<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:sitemap="http://www.sitemaps.org/schemas/sitemap/0.9">
    
    <xsl:output method="html" encoding="UTF-8" indent="yes"/>
    
    <xsl:template match="/">
        <html>
            <head>
                <title>OLLU Sitemap</title>
                <meta charset="UTF-8"/>
                <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
                <style>
                    * {
                        margin: 0;
                        padding: 0;
                        box-sizing: border-box;
                    }
                    
                    body {
                        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
                        background: #ffffff;
                        color: #333;
                        line-height: 1.6;
                        padding: 20px;
                    }
                    
                    .container {
                        max-width: 1200px;
                        margin: 0 auto;
                        background: white;
                        border: 1px solid #fff;
                        padding: 30px;
                    }
                    
                    h1 {
                        color: #000;
                        margin-bottom: 20px;
                        font-size: 2em;
                    }
                    
                    .stats {
                        margin-bottom: 20px;
                        font-size: 0.95em;
                        color: #000;
                    }
                    
                    table {
                        width: 100%;
                        border-collapse: collapse;
                        margin-top: 20px;
                    }
                    
                    thead {
                        background: #fff;
                        position: sticky;
                        top: 0;
                    }
                    
                    th {
                        padding: 12px;
                        text-align: left;
                        border-bottom: 2px solid #dee2e6;
                        font-weight: 600;
                        color: #000;
                    }
                    
                    td {
                        padding: 10px 12px;
                        border-bottom: 1px solid #dee2e6;
                    }
                    
                    tr:hover {
                        background: #f8f9fa;
                    }
                    
                    a {
                        text-decoration: none;
                        word-break: break-all;
                    }
                    
                    a:hover {
                        text-decoration: underline;
                    }
                    
                    .url-cell {
                        max-width: 600px;
                    }
                    
                    @media (max-width: 768px) {
                        .container {
                            padding: 15px;
                        }
                        
                        h1 {
                            font-size: 1.5em;
                        }
                        
                        table {
                            font-size: 0.9em;
                        }
                        
                        th, td {
                            padding: 8px;
                        }
                    }
                </style>
            </head>
            <body>
                <div class="container">
                    <h1>Ollu Sitemap</h1>
                    
                    <div class="stats">
                        <strong>Total URLs:</strong> <xsl:value-of select="count(sitemap:urlset/sitemap:url)"/>
                    </div>
                    
                    <table>
                        <thead>
                            <tr>
                                <th style="width: 50px;">#</th>
                                <th>URL</th>
                            </tr>
                        </thead>
                        <tbody>
                            <xsl:for-each select="sitemap:urlset/sitemap:url">
                                <tr>
                                    <td><xsl:value-of select="position()"/></td>
                                    <td class="url-cell">
                                        <a href="{sitemap:loc}" target="_blank">
                                            <xsl:value-of select="sitemap:loc"/>
                                        </a>
                                    </td>
                                </tr>
                            </xsl:for-each>
                        </tbody>
                    </table>
                </div>
            </body>
        </html>
    </xsl:template>
    
</xsl:stylesheet>
