<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:atom="http://www.w3.org/2005/Atom"
  xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd"
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns:podcast="https://podcastindex.org/namespace/1.0"
  exclude-result-prefixes="atom itunes content podcast">

  <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>

  <xsl:template match="/">
    <html lang="en">
      <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title><xsl:value-of select="/rss/channel/title"/> - RSS Feed</title>
        <style>
          :root {
            --fs-primary: #FF6B35;
            --fs-primary-subtle: rgba(255, 107, 53, 0.1);
            --fs-red: #ff4950;
            --fs-amber: #F59E0B;
            --fs-body-bg: #f1f3f4;
            --fs-body-color: #212529;
            --fs-secondary-color: #6c757d;
            --fs-border-color: #dee2e6;
            --fs-card-bg: #ffffff;
            --fs-font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --fs-border-radius-lg: 0.75rem;
            --fs-border-radius-xl: 1rem;
            --fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
            --fs-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
          }

          @media (prefers-color-scheme: dark) {
            :root {
              --fs-body-bg: #1a1a1a;
              --fs-body-color: #f8f9fa;
              --fs-secondary-color: #adb5bd;
              --fs-border-color: #343a40;
              --fs-card-bg: #212529;
              --fs-primary-subtle: rgba(255, 107, 53, 0.15);
            }
          }

          * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
          }

          html {
            font-size: 16px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
          }

          body {
            font-family: var(--fs-font-sans);
            background-color: var(--fs-body-bg);
            color: var(--fs-body-color);
            line-height: 1.6;
            padding: 2rem 1rem;
          }

          .container {
            max-width: 48rem;
            margin: 0 auto;
          }

          /* Subscribe Banner */
          .subscribe-banner {
            background: linear-gradient(135deg, var(--fs-primary) 0%, var(--fs-red) 100%);
            color: white;
            padding: 1.25rem 1.5rem;
            border-radius: var(--fs-border-radius-xl);
            margin-bottom: 2rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
          }

          .subscribe-banner svg {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
          }

          .subscribe-banner-content {
            flex: 1;
            min-width: 200px;
          }

          .subscribe-banner-title {
            font-weight: 700;
            font-size: 1rem;
            margin-bottom: 0.25rem;
          }

          .subscribe-banner-text {
            font-size: 0.875rem;
            opacity: 0.9;
          }

          .subscribe-banner-actions {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
          }

          .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border-radius: var(--fs-border-radius-lg);
            font-size: 0.875rem;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
            border: none;
            transition: all 0.15s ease;
          }

          .btn-light {
            background: rgba(255, 255, 255, 0.95);
            color: var(--fs-primary);
          }

          .btn-light:hover {
            background: white;
            transform: translateY(-1px);
          }

          .btn svg {
            width: 16px;
            height: 16px;
          }

          /* Podcast Header */
          .podcast-header {
            display: flex;
            gap: 1.5rem;
            margin-bottom: 2.5rem;
            align-items: flex-start;
          }

          .podcast-cover {
            width: 140px;
            height: 140px;
            border-radius: var(--fs-border-radius-xl);
            object-fit: cover;
            flex-shrink: 0;
            box-shadow: var(--fs-shadow);
          }

          .podcast-info {
            flex: 1;
            min-width: 0;
          }

          .podcast-label {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.075em;
            color: var(--fs-primary);
            margin-bottom: 0.5rem;
          }

          .podcast-title {
            font-size: 1.75rem;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 0.5rem;
            letter-spacing: -0.02em;
          }

          .podcast-author {
            font-size: 1rem;
            color: var(--fs-secondary-color);
            margin-bottom: 0.75rem;
          }

          .podcast-description {
            font-size: 0.9375rem;
            color: var(--fs-secondary-color);
            line-height: 1.6;
          }

          /* Episodes Section */
          .episodes-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--fs-border-color);
          }

          .episodes-title {
            font-size: 1.125rem;
            font-weight: 700;
          }

          .episodes-count {
            font-size: 0.875rem;
            color: var(--fs-secondary-color);
          }

          .episode-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
          }

          .episode-card {
            background: var(--fs-card-bg);
            border: 1px solid var(--fs-border-color);
            border-radius: var(--fs-border-radius-xl);
            padding: 1.25rem;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
          }

          .episode-card:hover {
            border-color: var(--fs-primary);
            box-shadow: var(--fs-shadow-sm);
          }

          .episode-card a {
            text-decoration: none;
            color: inherit;
          }

          .episode-meta {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.5rem;
            font-size: 0.8125rem;
            color: var(--fs-secondary-color);
          }

          .episode-meta-item {
            display: flex;
            align-items: center;
            gap: 0.25rem;
          }

          .episode-meta svg {
            width: 14px;
            height: 14px;
            opacity: 0.7;
          }

          .episode-title {
            font-size: 1.0625rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            line-height: 1.4;
          }

          .episode-title a {
            color: var(--fs-body-color);
          }

          .episode-title a:hover {
            color: var(--fs-primary);
          }

          .episode-description {
            font-size: 0.875rem;
            color: var(--fs-secondary-color);
            line-height: 1.6;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          .episode-player {
            margin-top: 0.75rem;
          }

          .episode-player audio {
            width: 100%;
            height: 40px;
          }

          /* Footer */
          .footer {
            margin-top: 3rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--fs-border-color);
            text-align: center;
          }

          .fireside-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--fs-secondary-color);
            font-size: 0.8125rem;
            text-decoration: none;
            transition: color 0.15s ease;
          }

          .fireside-link:hover {
            color: var(--fs-primary);
          }

          .fireside-logo {
            height: 18px;
            width: auto;
          }

          /* Responsive */
          @media (max-width: 640px) {
            body {
              padding: 1.5rem 1rem;
            }

            .podcast-header {
              flex-direction: column;
              align-items: center;
              text-align: center;
            }

            .podcast-cover {
              width: 120px;
              height: 120px;
            }

            .podcast-title {
              font-size: 1.5rem;
            }

            .subscribe-banner {
              flex-direction: column;
              text-align: center;
            }

            .subscribe-banner-actions {
              justify-content: center;
            }
          }

          /* Copy feedback */
          .copy-success {
            position: fixed;
            bottom: 1.5rem;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: var(--fs-body-color);
            color: var(--fs-body-bg);
            padding: 0.75rem 1.25rem;
            border-radius: var(--fs-border-radius-lg);
            font-size: 0.875rem;
            font-weight: 500;
            opacity: 0;
            transition: all 0.3s ease;
            z-index: 1000;
          }

          .copy-success.show {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
          }
        </style>
      </head>
      <body>
        <div class="container">
          <!-- Subscribe Banner -->
          <div class="subscribe-banner">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
              <path d="M6.18 15.64a2.18 2.18 0 1 1 0 4.36 2.18 2.18 0 0 1 0-4.36zM4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44zm0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"/>
            </svg>
            <div class="subscribe-banner-content">
              <div class="subscribe-banner-title">This is an RSS feed</div>
              <div class="subscribe-banner-text">Copy the URL and paste it into your podcast app to subscribe.</div>
            </div>
            <div class="subscribe-banner-actions">
              <button class="btn btn-light" onclick="copyFeedUrl()">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 16H8V7h11v14z"/>
                </svg>
                Copy URL
              </button>
            </div>
          </div>

          <!-- Podcast Header -->
          <header class="podcast-header">
            <xsl:if test="/rss/channel/itunes:image/@href">
              <img class="podcast-cover" src="{/rss/channel/itunes:image/@href}" alt=""/>
            </xsl:if>
            <div class="podcast-info">
              <div class="podcast-label">Podcast</div>
              <h1 class="podcast-title">
                <xsl:value-of select="/rss/channel/title"/>
              </h1>
              <xsl:if test="normalize-space(/rss/channel/itunes:author)">
                <div class="podcast-author">
                  By <xsl:value-of select="/rss/channel/itunes:author"/>
                </div>
              </xsl:if>
              <p class="podcast-description">
                <xsl:value-of select="/rss/channel/description"/>
              </p>
            </div>
          </header>

          <!-- Episodes -->
          <section>
            <div class="episodes-header">
              <h2 class="episodes-title">Episodes</h2>
              <span class="episodes-count">
                <xsl:value-of select="count(/rss/channel/item)"/> episodes
              </span>
            </div>
            <div class="episode-list">
              <xsl:for-each select="/rss/channel/item">
                <article class="episode-card">
                  <div class="episode-meta">
                    <span class="episode-meta-item">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14v11zM7 11h5v5H7z"/>
                      </svg>
                      <xsl:call-template name="format-date">
                        <xsl:with-param name="date" select="pubDate"/>
                      </xsl:call-template>
                    </span>
                    <xsl:if test="itunes:duration">
                      <span class="episode-meta-item">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                          <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/>
                        </svg>
                        <xsl:value-of select="itunes:duration"/>
                      </span>
                    </xsl:if>
                  </div>
                  <h3 class="episode-title">
                    <a href="{link}">
                      <xsl:value-of select="title"/>
                    </a>
                  </h3>
                  <div class="episode-description" data-html-description="">
                    <xsl:value-of select="description"/>
                  </div>
                  <div class="episode-player">
                    <audio controls="controls" preload="none">
                      <xsl:attribute name="src">
                        <xsl:value-of select="enclosure/@url"/>
                      </xsl:attribute>
                    </audio>
                  </div>
                </article>
              </xsl:for-each>
            </div>
          </section>

          <!-- Footer -->
          <footer class="footer">
            <a href="https://fireside.fm" class="fireside-link">
              <span>Powered by</span>
              <svg class="fireside-logo" viewBox="0 0 1589 444" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M436.2 146.407H538.4C541.4 146.407 543.8 148.807 543.8 151.807V177.807C543.8 180.807 541.4 183.307 538.4 183.307H470.3V220.107H526.5C529.5 220.107 531.9 222.507 531.9 225.507V251.507C531.9 254.507 529.5 256.907 526.5 256.907H470.3V316.708C470.3 319.708 467.9 322.107 464.9 322.107H436.2C433.2 322.107 430.8 319.708 430.8 316.708V151.807C430.8 148.807 433.2 146.407 436.2 146.407ZM596.1 146.407H624.9C627.9 146.407 630.3 148.807 630.3 151.807V316.708C630.3 319.708 627.9 322.107 624.9 322.107H596.1C593.2 322.107 590.8 319.708 590.8 316.708V151.807C590.8 148.807 593.2 146.407 596.1 146.407ZM1190.5 146.407H1219.2C1222.2 146.407 1224.6 148.807 1224.6 151.807V316.708C1224.6 319.708 1222.2 322.107 1219.2 322.107H1190.5C1187.5 322.107 1185.1 319.708 1185.1 316.708V151.807C1185.1 148.807 1187.5 146.407 1190.5 146.407ZM1435.2 233.307C1435.2 279.107 1403.4 322.107 1341.9 322.107H1287.1C1284.1 322.107 1281.7 319.708 1281.7 316.708V151.807C1281.7 148.807 1284.1 146.407 1287.1 146.407H1342.3C1404.7 146.407 1435.2 192.307 1435.2 233.307ZM1393.9 233.007C1393.9 206.707 1375.4 183.307 1340.4 183.307C1328.1 183.307 1321.2 183.307 1321.2 183.307V285.307C1321.2 285.307 1327.2 285.307 1340.4 285.307C1376.4 285.307 1393.9 260.007 1393.9 233.007ZM819 314.107C820.9 317.707 818.3 322.107 814.2 322.107H782.9C780.9 322.107 779.1 321.007 778.1 319.107L744.6 253.107H727.4V316.708C727.4 319.708 725 322.107 722 322.107H693.2C690.2 322.107 687.8 319.708 687.8 316.708V151.807C687.8 148.807 690.2 146.407 693.2 146.407H764.4C802.4 146.407 821.6 174.807 821.6 199.807C821.6 226.807 803.1 244.907 784.7 250.807L819 314.107ZM783.1 202.407C783.1 192.407 776.9 183.208 762.1 183.208C754.1 183.208 727.3 183.208 727.3 183.208V221.607C727.3 221.607 755.3 221.607 762.1 221.607C775.1 221.607 783.1 212.607 783.1 202.407ZM873.8 146.407H976.7C979.7 146.407 982.1 148.807 982.1 151.807V177.807C982.1 180.807 979.7 183.208 976.7 183.208H908V214.708H963.8C966.8 214.708 969.2 217.107 969.2 220.107V246.107C969.2 249.107 966.8 251.507 963.8 251.507H908V285.208H976.7C979.7 285.208 982.1 287.607 982.1 290.607V316.708C982.1 319.708 979.7 322.107 976.7 322.107H873.8C870.8 322.107 868.4 319.708 868.4 316.708V151.807C868.4 148.807 870.8 146.407 873.8 146.407ZM1480.1 146.407H1583C1586 146.407 1588.4 148.807 1588.4 151.807V177.807C1588.4 180.807 1586 183.208 1583 183.208H1514.3V214.708H1570.1C1573.1 214.708 1575.5 217.107 1575.5 220.107V246.107C1575.5 249.107 1573.1 251.507 1570.1 251.507H1514.3V285.208H1583C1586 285.208 1588.4 287.607 1588.4 290.607V316.708C1588.4 319.708 1586 322.107 1583 322.107H1480.1C1477.1 322.107 1474.7 319.708 1474.7 316.708V151.807C1474.7 148.807 1477.1 146.407 1480.1 146.407ZM1111.6 192.807C1102.6 186.107 1088.2 178.407 1076.5 178.407C1067.9 178.407 1060.9 183.707 1060.9 191.507C1060.9 220.107 1138.6 213.507 1138.6 273.407C1138.6 300.007 1115.7 324.307 1078.9 324.307C1054.7 324.307 1034.7 316.507 1022.9 304.807C1021.2 303.107 1020.9 300.507 1022.1 298.407L1033.9 277.208C1035.4 274.508 1039 273.607 1041.6 275.507C1052.3 282.907 1069.3 289.807 1077.3 289.807C1086.3 289.807 1094.8 285.008 1094.8 274.708C1094.8 243.008 1020.6 249.907 1020.6 194.007C1020.6 170.407 1038.4 144.107 1079.2 144.107C1097.2 144.107 1117.8 151.507 1132.8 163.607C1135 165.407 1135.4 168.607 1133.8 170.907L1119.3 191.607C1117.5 194.107 1114 194.607 1111.6 192.807Z" fill="currentColor"/>
                <path fill-rule="evenodd" clip-rule="evenodd" d="M191 75.3075C191 139.608 95.8 202.908 95.8 294.208C95.8 376.408 167.2 405.608 207 396.708C209.8 396.008 209.5 392.008 206.7 391.708C163.9 387.708 128.8 359.707 124.7 319.507C120.3 277.307 147.2 261.808 147.2 231.408C147.2 225.408 146 219.807 143.7 215.507C142.2 212.707 143.6 209.208 146.7 208.408C166.4 203.108 207.9 225.708 207.9 274.208C207.9 293.508 204.7 302.308 204.7 321.208C204.7 360.808 235.6 369.108 276.3 355.908C279.1 355.008 281.4 359.208 280.4 361.908C264.2 406.208 223 443.208 155.2 443.208C68.9 443.208 0 370.008 0 291.208C0 184.508 99.1 128.108 99.1 53.3075C99.1 38.9075 93.2 24.1076 81.8 16.9076C78.4 14.7076 78.5 9.70756 81.9 7.60756C112.6 -11.8924 191 4.50751 191 75.3075ZM310.1 236.507C319.8 287.407 287.4 340.108 250.2 345.408C242.6 346.508 235.6 345.508 230.1 342.308C228.2 341.208 227.7 338.608 229.2 336.908C241.3 322.808 244.7 303.507 242.1 285.007C235.2 236.507 186.3 204.808 180.9 166.808C176.3 134.308 196.7 99.9077 226.3 91.7077C230.1 90.7077 234 93.5076 233.9 97.4076C231.5 163.408 295.9 161.407 310.1 236.507Z" fill="currentColor"/>
              </svg>
            </a>
          </footer>
        </div>

        <!-- Copy success toast -->
        <div id="copyToast" class="copy-success">URL copied to clipboard!</div>

        <script>
          function copyFeedUrl() {
            var url = window.location.href;
            var toast = document.getElementById('copyToast');

            function showToast(message) {
              toast.textContent = message;
              toast.classList.add('show');
              setTimeout(function() {
                toast.classList.remove('show');
              }, 2000);
            }

            // Modern clipboard API (requires HTTPS)
            if (navigator.clipboard &amp;&amp; window.isSecureContext) {
              navigator.clipboard.writeText(url).then(function() {
                showToast('URL copied to clipboard!');
              }).catch(function() {
                showToast('Copy failed - please copy URL manually');
              });
            } else {
              // Fallback for HTTP or older browsers
              var textArea = document.createElement('textarea');
              textArea.value = url;
              textArea.style.position = 'fixed';
              textArea.style.left = '-9999px';
              document.body.appendChild(textArea);
              textArea.select();
              try {
                document.execCommand('copy');
                showToast('URL copied to clipboard!');
              } catch (e) {
                showToast('Copy failed - please copy URL manually');
              }
              document.body.removeChild(textArea);
            }
          }

          // Process episode descriptions to render HTML content
          // (Firefox doesn't support disable-output-escaping in XSLT)
          document.querySelectorAll('[data-html-description]').forEach(function(el) {
            var text = el.textContent;
            // Create a temporary element to decode HTML entities and render HTML
            var temp = document.createElement('div');
            temp.innerHTML = text;
            // Extract just the text content, stripping HTML tags for clean display
            el.textContent = temp.textContent;
          });
        </script>
      </body>
    </html>
  </xsl:template>

  <!-- Date formatting template -->
  <xsl:template name="format-date">
    <xsl:param name="date"/>
    <!-- Extract day, month, year from RSS date format: "Tue, 15 Jan 2025 12:00:00 +0000" -->
    <xsl:variable name="day" select="substring($date, 6, 2)"/>
    <xsl:variable name="month" select="substring($date, 9, 3)"/>
    <xsl:variable name="year" select="substring($date, 13, 4)"/>
    <xsl:value-of select="concat($month, ' ', $day, ', ', $year)"/>
  </xsl:template>

</xsl:stylesheet>
