<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd"
                xmlns:media="http://search.yahoo.com/mrss/"
                xmlns:atom="http://www.w3.org/2005/Atom"
                xmlns:content="http://purl.org/rss/1.0/modules/content/"
                xmlns:dc="http://purl.org/dc/elements/1.1/"
                xmlns:podcast="https://podcastindex.org/namespace/1.0">

  <xsl:output method="html" encoding="UTF-8" indent="yes"
              doctype-public="-//W3C//DTD HTML 4.01//EN"/>

  <xsl:template match="/">
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title>
          <xsl:value-of select="/rss/channel/title"/>
        </title>
        <style type="text/css">
          body {
          font-family: Arial, Helvetica, sans-serif;
          background: #f4f4f4;
          color: #333;
          margin: 0;
          padding: 0;
          }
          .header {
          background: #1a1a2e;
          color: white;
          padding: 30px 20px;
          }
          .header h1 {
          margin: 0 0 10px 0;
          font-size: 1.6em;
          }
          .header p {
          margin: 0;
          font-size: 0.9em;
          opacity: 0.8;
          }
          .header-image {
          width: 100px;
          height: 100px;
          border-radius: 10px;
          float: left;
          margin-right: 20px;
          }
          .header-inner {
          max-width: 860px;
          margin: 0 auto;
          overflow: hidden;
          }
          .feed-url {
          background: #0f3460;
          color: #ccc;
          font-size: 0.8em;
          padding: 10px 20px;
          text-align: center;
          }
          .feed-url a {
          color: #7eb8f7;
          }
          .container {
          max-width: 860px;
          margin: 20px auto;
          padding: 0 20px;
          }
          .item {
          background: white;
          border-radius: 8px;
          padding: 20px;
          margin-bottom: 14px;
          border-left: 4px solid #1a1a2e;
          }
          .item-title {
          font-size: 1.05em;
          font-weight: bold;
          margin-bottom: 6px;
          }
          .item-title a {
          color: #1a1a2e;
          text-decoration: none;
          }
          .item-title a:hover {
          color: #e94560;
          }
          .item-date {
          font-size: 0.78em;
          color: #999;
          margin-bottom: 8px;
          }
          .item-desc {
          font-size: 0.88em;
          color: #555;
          line-height: 1.5;
          }
          .item-footer {
          margin-top: 10px;
          font-size: 0.8em;
          color: #888;
          }
          .item-footer a {
          color: #1a1a2e;
          margin-right: 15px;
          }
          .notice {
          background: #fff8e1;
          border: 1px solid #ffe082;
          border-radius: 6px;
          padding: 14px 18px;
          margin-bottom: 20px;
          font-size: 0.85em;
          color: #555;
          }
          .footer {
          text-align: center;
          padding: 20px;
          font-size: 0.78em;
          color: #aaa;
          }
        </style>
      </head>
      <body>

        <div class="header">
          <div class="header-inner">
            <xsl:if test="/rss/channel/itunes:image/@href != ''">
              <img class="header-image">
                <xsl:attribute name="src">
                  <xsl:value-of select="/rss/channel/itunes:image/@href"/>
                </xsl:attribute>
                <xsl:attribute name="alt">
                  <xsl:value-of select="/rss/channel/title"/>
                </xsl:attribute>
              </img>
            </xsl:if>
            <h1><xsl:value-of select="/rss/channel/title"/></h1>
            <p><xsl:value-of select="/rss/channel/description"/></p>
          </div>
        </div>

        <div class="feed-url">
          RSS Feed:
          <a>
            <xsl:attribute name="href">
              <xsl:value-of select="/rss/channel/atom:link/@href"/>
            </xsl:attribute>
            <xsl:value-of select="/rss/channel/atom:link/@href"/>
          </a>
        </div>

        <div class="container">

          <div class="notice">
            This is a podcast RSS feed. To subscribe, copy the URL above
            into your podcast app (Apple Podcasts, Spotify, Pocket Casts, etc).
          </div>

          <xsl:for-each select="/rss/channel/item">
            <div class="item">

              <div class="item-title">
                <a>
                  <xsl:attribute name="href">
                    <xsl:value-of select="link"/>
                  </xsl:attribute>
                  <xsl:value-of select="title"/>
                </a>
              </div>

              <div class="item-date">
                <xsl:value-of select="pubDate"/>
                <xsl:if test="itunes:duration != ''">
                  &#160;&#8212;&#160;
                  <xsl:value-of select="itunes:duration"/>
                </xsl:if>
              </div>

              <div class="item-desc">
                <xsl:value-of select="description"/>
              </div>

              <div class="item-footer">
                <xsl:if test="enclosure/@url != ''">
                  <a>
                    <xsl:attribute name="href">
                      <xsl:value-of select="enclosure/@url"/>
                    </xsl:attribute>
                    &#9654; Play / Download
                  </a>
                </xsl:if>
                <xsl:if test="link != ''">
                  <a>
                    <xsl:attribute name="href">
                      <xsl:value-of select="link"/>
                    </xsl:attribute>
                    Episode Page
                  </a>
                </xsl:if>
              </div>

            </div>
          </xsl:for-each>

          <div class="footer">
            BBS Radio, BBS Network Inc. &#8212;
            <a href="https://bbsradio.com">bbsradio.com</a>
          </div>

        </div>
      </body>
    </html>
  </xsl:template>

</xsl:stylesheet>
