<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet
  version="3.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:atom="http://www.w3.org/2005/Atom">
  <xsl:output
    method="html"
    version="4.0"
    encoding="UTF-8"
    indent="yes" />
  <xsl:template match="/">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>
          {{ title }}
        </title>
        <link href="/assets/styles/tailwind.css" rel="stylesheet" />
        <link href="/assets/styles/index.css" rel="stylesheet" />
        <link
          href="/assets/img/favicon/favicon-16x16.png"
          rel="icon"
          type="image/x-icon" />
        <link
          href="/assets/img/favicon/favicon-32x32.png"
          rel="icon"
          type="image/png"
          sizes="32x32" />
        <link href="/assets/img/favicon/apple-touch-icon.png" rel="apple-touch-icon" />
        <link rel="me" href="https://social.lol/@cory" />
      </head>
      <body class="dark:text-white dark:bg-gray-900 font-sans text-gray-800">
        <div class="min-h-screen flex flex-col">
          <main class="flex-1 w-10/12 max-w-screen-sm md:max-w-screen-md mx-auto">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between md:pt-10 pt-5">
              <h1
                class="font-black leading-tight md:pb-0 md:text-3xl pb-5 text-2xl flex flex-row items-center ">
                <span class="mr-1 icon--28 icon--bold">
                  {% tablericon icon title %}
                </span>
                {{ title }} </h1>
              <div class="flex flex-row gap-6">
                <a href="/feeds" class="icon--24 link--icon">
                  {% tablericon "arrow-left" "Back to feeds" %}
                </a>
                <a href="/" class="icon--24 link--icon">
                  {% tablericon "home-move" "Home • Cory Dransfeldt" %}
                </a>
              </div>
            </div>
            <div class="pt-4 prose dark:prose-invert hover:prose-a:text-blue-500 max-w-full">
              <div class="dark:text-white text-gray-800">
                <p>{{ description }} <img width="1" height="1" src="/404ca498061b54" style="display:none" /></p>
                <p>
                  <xsl:value-of select="atom:feed/atom:description" />
                </p>
              </div>
              <ul class="mb-8">
                <xsl:apply-templates select="atom:feed/atom:entry" />
              </ul>
            </div>
            <footer
              class="prose pb-8 mt-4 text-gray-800 dark:text-white border-t border-gray-200 dark:border-gray-700 max-w-full">
              <div>
                <p class="mb-0">
                  <strong class="text-gray-800 dark:text-gray-200">This is a web feed,</strong> also
                  known as an RSS or Atom feed. </p>
                <p class="mt-0">
                  <strong class="text-gray-800 dark:text-gray-200">Subscribe</strong> by copying the
                  URL from the address bar into your newsreader. </p>
              </div>
              <small>Visit <a href="https://aboutfeeds.com">About Feeds</a> to get started with
                newsreaders and subscribing. It's free. </small>
            </footer>
          </main>
        </div>
      </body>
    </html>
  </xsl:template>
  <xsl:template match="atom:feed/atom:entry">
    <li>
      <a
        class="no-underline text-gray-800 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400 leading-tight m-0 cursor-pointer">
        <xsl:attribute name="href">
          <xsl:value-of select="atom:link/@href" />
        </xsl:attribute>
        <xsl:value-of select="atom:title" />
      </a>
      <span class="mx-1">•</span>
      <xsl:value-of select="atom:updated" />
    </li>
  </xsl:template>
</xsl:stylesheet>