<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0" 
                xmlns:html="http://www.w3.org/TR/REC-html40"
                xmlns:sitemap="http://www.sitemaps.org/schemas/sitemap/0.9"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
    <xsl:template match="/">
        <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <title>XML Sitemap Index</title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1" />
                <style>
                    body {
                        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
                        background-color: #f6f1e4;
                        color: #1c2b22;
                        margin: 0;
                        padding: 0;
                    }
                    .header {
                        background-color: #112f23;
                        color: white;
                        padding: 40px 20px;
                        text-align: center;
                    }
                    .header h1 {
                        margin: 0 0 10px 0;
                        font-size: 32px;
                        font-family: "Fraunces", serif;
                    }
                    .header p {
                        margin: 0;
                        color: #a8a194;
                        font-size: 16px;
                    }
                    .container {
                        max-width: 800px;
                        margin: 40px auto;
                        padding: 0 20px;
                    }
                    .info {
                        font-size: 16px;
                        margin-bottom: 20px;
                    }
                    .info strong {
                        color: #1f4d3b;
                    }
                    table {
                        width: 100%;
                        border-collapse: collapse;
                        background: #fffdf8;
                        border-radius: 8px;
                        overflow: hidden;
                        box-shadow: 0 4px 12px rgba(28,43,34,0.08);
                    }
                    th, td {
                        padding: 16px;
                        text-align: left;
                        border-bottom: 1px solid #e1d6b9;
                    }
                    th {
                        background-color: #f0bd3e;
                        color: #112f23;
                        font-weight: bold;
                    }
                    tr:last-child td {
                        border-bottom: none;
                    }
                    a {
                        color: #1f4d3b;
                        text-decoration: none;
                        font-weight: 500;
                    }
                    a:hover {
                        text-decoration: underline;
                    }
                </style>
            </head>
            <body>
                <div class="header">
                    <h1>XML Sitemap</h1>
                    <p>This XML Sitemap is generated for search engines like Google to crawl and re-crawl pages on WindsorBooks.</p>
                </div>
                <div class="container">
                    <!-- Count the urls dynamically -->
                    <div class="info">
                        This XML Sitemap Index contains <strong><xsl:value-of select="count(sitemap:sitemapindex/sitemap:sitemap)"/></strong> sitemaps.
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>Sitemap</th>
                                <th>Last Modified</th>
                            </tr>
                        </thead>
                        <tbody>
                            <xsl:for-each select="sitemap:sitemapindex/sitemap:sitemap">
                                <tr>
                                    <td>
                                        <a href="{sitemap:loc}"><xsl:value-of select="sitemap:loc"/></a>
                                    </td>
                                    <td>
                                        <xsl:value-of select="sitemap:lastmod"/>
                                    </td>
                                </tr>
                            </xsl:for-each>
                        </tbody>
                    </table>
                </div>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>