<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:output method="html"
                encoding="UTF-8"
                doctype-system="about:legacy-compat"/>

    <xsl:template match="/">

        <html lang="nl">

        <head>
            <meta charset="UTF-8"/>

            <title>
                <xsl:value-of select="rss/channel/title"/>
            </title>

            <style>
                * {
                    box-sizing: border-box;
                }

                body {
                    margin: 0;
                    padding: 40px 20px;
                    background: #f5f5f5;
                    color: #222;
                    font-family: "quatro", system-ui, -apple-system, BlinkMacSystemFont,
                    "Segoe UI", sans-serif;
                }

                main {
                    max-width: 900px;
                    margin: 0 auto;
                }

                header {
                    margin-bottom: 40px;
                }

                h1 {
                    margin: 0 0 8px;
                    font-weight: 900;
                    color: #c42526;
                }

                .description {
                    color: #666;
                }

                article {
                    display: grid;
                    grid-template-columns: 240px 1fr;
                    gap: 24px;
                    margin-bottom: 24px;
                    padding: 20px;
                    background: #f0d316;
                }

                article img {
                    width: 100%;
                    aspect-ratio: 4 / 3;
                    object-fit: cover;
                }

                h2 {
                    margin-top: 0;
                    font-weight: 900;
                    color: #c42526;
                }

                h2 a {
                    text-decoration: none;
                    color: inherit;
                }

                h2 a:hover {
                    text-decoration: underline;
                }

                time {
                    color: #fff;
                    font-size: 1.3em;
                    font-weight: bold;
                    background-color: #253781;
                    padding: .75rem;
                    margin-bottom: 1rem;
                    display: inline-block;
                    text-align: center;
                    aspect-ratio: 1 / 1;
                    width: 4rem;
                }

                time span {
                    display: block;
                }

                @media (max-width: 600px) {
                    article {
                        grid-template-columns: 1fr;
                    }
                }
            </style>
        </head>

        <body>

        <main>

            <header>
                <h1>
                    <xsl:value-of select="rss/channel/title"/>
                </h1>

                <div class="description">
                    <xsl:value-of select="rss/channel/description"/>
                </div>
            </header>

            <xsl:for-each select="rss/channel/item">

                <article>

                    <xsl:if test="enclosure">
                        <img src="{enclosure/@url}"
                             alt="{title}"/>
                    </xsl:if>

                    <div>

                        <h2>
                            <a href="{link}">
                                <xsl:value-of select="title"/>
                            </a>
                        </h2>

                        <time datetime="{pubDate}">
                            <span>
                            <xsl:value-of select="substring(pubDate, 6, 2)"/>
                            <xsl:text> </xsl:text>
                                </span>

                            <span><xsl:choose>
                                <xsl:when test="substring(pubDate, 9, 3) = 'Jan'">jan</xsl:when>
                                <xsl:when test="substring(pubDate, 9, 3) = 'Feb'">feb</xsl:when>
                                <xsl:when test="substring(pubDate, 9, 3) = 'Mar'">mrt</xsl:when>
                                <xsl:when test="substring(pubDate, 9, 3) = 'Apr'">apr</xsl:when>
                                <xsl:when test="substring(pubDate, 9, 3) = 'May'">mei</xsl:when>
                                <xsl:when test="substring(pubDate, 9, 3) = 'Jun'">jun</xsl:when>
                                <xsl:when test="substring(pubDate, 9, 3) = 'Jul'">jul</xsl:when>
                                <xsl:when test="substring(pubDate, 9, 3) = 'Aug'">aug</xsl:when>
                                <xsl:when test="substring(pubDate, 9, 3) = 'Sep'">sep</xsl:when>
                                <xsl:when test="substring(pubDate, 9, 3) = 'Oct'">okt</xsl:when>
                                <xsl:when test="substring(pubDate, 9, 3) = 'Nov'">nov</xsl:when>
                                <xsl:when test="substring(pubDate, 9, 3) = 'Dec'">dec</xsl:when>
                            </xsl:choose></span>
                        </time>

                        <div>
                            <xsl:value-of select="description"/>
                        </div>

                    </div>

                </article>

            </xsl:for-each>

        </main>

        </body>

        </html>

    </xsl:template>

</xsl:stylesheet>