<?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"
                xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">

    <xsl:output method="html" encoding="UTF-8" indent="yes"/>
    
    <xsl:template match="/">
        <html>
            <head>
                <title>XML Sitemap - CarirumahRooma21</title>
                <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
                <style type="text/css">
                    :root {
                        --primary-color: #0073aa;
                        --accent-color: #00a0d2;
                        --dark-accent: #005177;
                        --text-color: #333;
                        --light-text: #666;
                        --bg-color: #f8f9fa;
                        --border-color: #dee2e6;
                        --hover-color: #f1f8fb;
                        --success-color: #46b450;
                        --medium-priority: #00a0d2;
                        --low-priority: #939393;
                    }
                    
                    body {
                        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
                        color: var(--text-color);
                        background: var(--bg-color);
                        max-width: 1200px;
                        margin: 0 auto;
                        padding: 1rem;
                        line-height: 1.5;
                        font-size: 14px;
                    }
                    
                    .header {
                        background: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%);
                        padding: 2rem;
                        color: white;
                        border-radius: 8px;
                        margin-bottom: 2rem;
                        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
                    }
                    
                    h1 {
                        margin: 0 0 1rem 0;
                        font-size: 2rem;
                        font-weight: 600;
                    }
                    
                    .description {
                        background: white;
                        padding: 1.5rem;
                        border-radius: 8px;
                        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
                        margin-bottom: 2rem;
                    }
                    
                    a {
                        color: var(--accent-color);
                        text-decoration: none;
                        transition: all 0.2s ease;
                    }
                    
                    a:hover {
                        color: var(--dark-accent);
                        text-decoration: underline;
                    }
                    
                    table {
                        width: 100%;
                        border-collapse: collapse;
                        margin: 2rem 0;
                        background: white;
                        border-radius: 8px;
                        overflow: hidden;
                        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
                        table-layout: fixed;
                    }
                    
                    th {
                        background: #f1f1f1;
                        text-align: left;
                        padding: 1rem;
                        font-weight: 600;
                        color: var(--text-color);
                        border-bottom: 2px solid var(--border-color);
                    }
                    
                    td {
                        padding: 1rem;
                        vertical-align: top;
                        border-bottom: 1px solid var(--border-color);
                        word-break: break-all;
                    }
                    
                    tr:nth-child(even) {
                        background-color: rgba(0,0,0,0.02);
                    }
                    
                    tr:hover td {
                        background: var(--hover-color);
                    }
                    
                    .loc {
                        width: 60%;
                    }
                    
                    .lastmod, .changefreq, .priority {
                        width: 13%;
                        white-space: nowrap;
                    }
                    
                    .stats {
                        margin-bottom: 2rem;
                        padding: 1.2rem;
                        background: white;
                        border-radius: 8px;
                        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
                        display: flex;
                        flex-direction: column;
                        gap: 0.5rem;
                    }
                    
                    .stats p {
                        margin: 0;
                        font-size: 1rem;
                    }
                    
                    .stats strong {
                        color: var(--primary-color);
                        font-weight: 600;
                    }
                    
                    .footer {
                        margin-top: 2rem;
                        text-align: center;
                        color: var(--light-text);
                        font-size: 0.9rem;
                        padding: 1rem;
                        border-top: 1px solid var(--border-color);
                    }
                    
                    .navigation {
                        margin-bottom: 2rem;
                        display: flex;
                        gap: 0.5rem;
                        flex-wrap: wrap;
                    }
                    
                    .navigation a {
                        display: inline-block;
                        padding: 0.6rem 1.2rem;
                        background: var(--accent-color);
                        color: white;
                        border-radius: 4px;
                        text-decoration: none;
                        font-weight: 500;
                        transition: all 0.2s ease;
                    }
                    
                    .navigation a:hover {
                        background: var(--dark-accent);
                        transform: translateY(-2px);
                        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
                    }
                    
                    /* URL count badges */
                    .url-count {
                        display: inline-block;
                        background-color: var(--primary-color);
                        color: white;
                        padding: 0.2rem 0.6rem;
                        border-radius: 12px;
                        font-size: 0.8rem;
                        margin-left: 0.5rem;
                        font-weight: 600;
                    }
                    
                    /* Priority badges */
                    .priority-high {
                        color: white;
                        background-color: var(--success-color);
                        padding: 0.2rem 0.6rem;
                        border-radius: 12px;
                        font-weight: bold;
                    }
                    
                    .priority-medium {
                        color: white;
                        background-color: var(--medium-priority);
                        padding: 0.2rem 0.6rem;
                        border-radius: 12px;
                        font-weight: bold;
                    }
                    
                    .priority-normal {
                        color: white;
                        background-color: var(--low-priority);
                        padding: 0.2rem 0.6rem;
                        border-radius: 12px;
                    }
                    
                    /* Images badge */
                    .images-badge {
                        display: inline-block;
                        background-color: #6c757d;
                        color: white;
                        padding: 0.2rem 0.6rem;
                        border-radius: 12px;
                        font-size: 0.8rem;
                        margin-top: 0.5rem;
                    }
                    
                    @media (max-width: 768px) {
                        .header {
                            padding: 1.5rem;
                        }
                        
                        h1 {
                            font-size: 1.5rem;
                        }
                        
                        table, tr, td, th {
                            display: block;
                        }
                        
                        thead {
                            display: none;
                        }
                        
                        td {
                            position: relative;
                            padding-left: 50%;
                            text-align: left;
                        }
                        
                        td:before {
                            position: absolute;
                            left: 1rem;
                            width: 45%;
                            font-weight: bold;
                            content: attr(data-label);
                        }
                        
                        .loc, .lastmod, .changefreq, .priority {
                            width: 100%;
                        }
                    }
                </style>
            </head>
            <body>
                <div class="header">
                    <h1>CarirumahRooma21 XML Sitemap</h1>
                    <p>This is a comprehensive sitemap generated to help search engines with content discovery and optimal indexing.</p>
                </div>
                
                <div class="navigation">
                    <a href="/">Home</a>
                    <a href="/sitemap-viewer">HTML Sitemap</a>
                    <a href="/sitemap.xml">XML Index</a>
                </div>
                
                <div class="description">
                    <p>This XML Sitemap is meant to be processed by search engines like Google, Bing, Yandex or Baidu.</p>
                    <p>You can find more information about XML sitemaps on <a href="https://www.sitemaps.org" target="_blank" rel="noopener noreferrer">sitemaps.org</a>.</p>
                    <p>To view this sitemap in a more user-friendly format, visit our <a href="/sitemap-viewer">HTML Sitemap Viewer</a>.</p>
                </div>
                
                <!-- Sitemap Index -->
                <xsl:if test="sitemap:sitemapindex">
                    <div class="stats">
                        <p>This sitemap index contains <strong><xsl:value-of select="count(sitemap:sitemapindex/sitemap:sitemap)"/></strong> sitemaps.</p>
                        <p>Last generated: <strong><xsl:value-of select="substring(current-dateTime(),1,10)"/></strong></p>
                        <!-- Get comment with total URL count if available -->
                        <xsl:variable name="comments" select="comment()"/>
                        <xsl:for-each select="$comments">
                            <xsl:if test="contains(., 'URLs total')">
                                <p>Total URLs in all sitemaps: <strong><xsl:value-of select="substring-before(substring-after(., 'with '), ' URLs')"/></strong></p>
                            </xsl:if>
                        </xsl:for-each>
                    </div>
                    
                    <table id="sitemap-table">
                        <thead>
                            <tr>
                                <th class="loc">Sitemap URL</th>
                                <th class="lastmod">Last Modified</th>
                            </tr>
                        </thead>
                        <tbody>
                            <xsl:for-each select="sitemap:sitemapindex/sitemap:sitemap">
                                <tr>
                                    <td class="loc" data-label="Sitemap URL">
                                        <a href="{sitemap:loc}">
                                            <xsl:value-of select="sitemap:loc"/>
                                        </a>
                                        <!-- Display URL count if available in comment -->
                                        <xsl:variable name="comments" select="comment()"/>
                                        <xsl:for-each select="$comments">
                                            <xsl:if test="contains(., 'Contains')">
                                                <span class="url-count">
                                                    <xsl:value-of select="normalize-space(substring-before(substring-after(., 'Contains '), ' URLs'))"/> URLs
                                                </span>
                                            </xsl:if>
                                        </xsl:for-each>
                                    </td>
                                    <td class="lastmod" data-label="Last Modified">
                                        <xsl:value-of select="sitemap:lastmod"/>
                                    </td>
                                </tr>
                            </xsl:for-each>
                        </tbody>
                    </table>
                </xsl:if>
                
                <!-- URL Set (regular sitemap) -->
                <xsl:if test="sitemap:urlset">
                    <div class="stats">
                        <p>This sitemap contains <strong><xsl:value-of select="count(sitemap:urlset/sitemap:url)"/></strong> URLs.</p>
                        <p>Last generated: <strong><xsl:value-of select="substring(current-dateTime(),1,10)"/></strong></p>
                        <xsl:variable name="imageCount" select="count(sitemap:urlset/sitemap:url/image:image)"/>
                        <xsl:if test="$imageCount > 0">
                            <p>This sitemap contains <strong><xsl:value-of select="$imageCount"/></strong> images.</p>
                        </xsl:if>
                    </div>
                    
                    <table id="sitemap-table">
                        <thead>
                            <tr>
                                <th class="loc">URL</th>
                                <th class="lastmod">Last Modified</th>
                                <th class="changefreq">Change Frequency</th>
                                <th class="priority">Priority</th>
                            </tr>
                        </thead>
                        <tbody>
                            <xsl:for-each select="sitemap:urlset/sitemap:url">
                                <tr>
                                    <td class="loc" data-label="URL">
                                        <a href="{sitemap:loc}">
                                            <xsl:value-of select="sitemap:loc"/>
                                        </a>
                                        <xsl:if test="count(image:image) > 0">
                                            <div class="images-badge">
                                                <xsl:value-of select="count(image:image)"/> images
                                            </div>
                                        </xsl:if>
                                    </td>
                                    <td class="lastmod" data-label="Last Modified">
                                        <xsl:value-of select="sitemap:lastmod"/>
                                    </td>
                                    <td class="changefreq" data-label="Change Frequency">
                                        <xsl:choose>
                                            <xsl:when test="sitemap:changefreq">
                                                <xsl:value-of select="sitemap:changefreq"/>
                                            </xsl:when>
                                            <xsl:otherwise>-</xsl:otherwise>
                                        </xsl:choose>
                                    </td>
                                    <td class="priority" data-label="Priority">
                                        <xsl:choose>
                                            <xsl:when test="sitemap:priority">
                                                <xsl:choose>
                                                    <xsl:when test="sitemap:priority = '0.9' or sitemap:priority = '1.0'">
                                                        <span class="priority-high">High</span>
                                                    </xsl:when>
                                                    <xsl:when test="sitemap:priority = '0.7' or sitemap:priority = '0.8'">
                                                        <span class="priority-medium">Medium</span>
                                                    </xsl:when>
                                                    <xsl:otherwise>
                                                        <span class="priority-normal">Normal</span>
                                                    </xsl:otherwise>
                                                </xsl:choose>
                                                (<xsl:value-of select="sitemap:priority"/>)
                                            </xsl:when>
                                            <xsl:otherwise>-</xsl:otherwise>
                                        </xsl:choose>
                                    </td>
                                </tr>
                            </xsl:for-each>
                        </tbody>
                    </table>
                </xsl:if>
                
                <div class="footer">
                    <p>Generated by CarirumahRooma21 XML Sitemap Generator</p>
                    <p>Looking to optimize your website's SEO? Visit our <a href="/sitemap-viewer">HTML Sitemap</a> for a more user-friendly view.</p>
                </div>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>
