<?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" lang="en">
            <head>
                <meta charset="UTF-8"/>
                <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
                <title>XML Sitemap | Mohammad Hafiz bin Ismail (CS Hafiz)</title>
                <!-- Google Fonts (AAGBS Design Guidelines) -->
                <link rel="preconnect" href="https://fonts.googleapis.com"/>
                <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/>
                <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&amp;family=Open+Sans:wght@300;400;600;700&amp;family=Space+Mono:wght@400;700&amp;display=swap" rel="stylesheet"/>
                <!-- Font Awesome 6 -->
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
                <style type="text/css">
                    :root {
                        --color-primary: #392e6a;
                        --color-primary-dark: #271f4b;
                        --color-accent: #5640a6;
                        --color-accent-light: #765cd4;
                        --color-accent-subtle: rgba(86, 64, 166, 0.08);
                        --color-bg: #f9f8fd;
                        --color-surface: #ffffff;
                        --color-border: #e3dff0;
                        --color-text: #1d1838;
                        --color-text-muted: #5e5a77;
                        --color-text-light: #8783a3;
                        --font-heading: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                        --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                        --font-mono: 'Space Mono', monospace;
                        --radius-pill: 9999px;
                        --radius-md: 12px;
                        --radius-lg: 16px;
                        --shadow-sm: 0 2px 8px rgba(57, 46, 106, 0.04);
                        --shadow-md: 0 8px 24px rgba(57, 46, 106, 0.08);
                    }

                    * {
                        margin: 0;
                        padding: 0;
                        box-sizing: border-box;
                    }

                    body {
                        background-color: var(--color-bg);
                        color: var(--color-text);
                        font-family: var(--font-body);
                        line-height: 1.6;
                        padding-bottom: 4rem;
                        -webkit-font-smoothing: antialiased;
                    }

                    /* Header */
                    .header-banner {
                        background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
                        color: #ffffff;
                        padding: 3rem 1.5rem;
                        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                        box-shadow: var(--shadow-md);
                    }

                    .header-container {
                        max-width: 1000px;
                        margin: 0 auto;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 1.5rem;
                        flex-wrap: wrap;
                    }

                    .brand-info {
                        display: flex;
                        align-items: center;
                        gap: 1.25rem;
                    }

                    .brand-logo-badge {
                        background: #ffffff;
                        color: var(--color-primary);
                        width: 54px;
                        height: 54px;
                        border-radius: 14px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 1.6rem;
                        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
                        flex-shrink: 0;
                    }

                    .brand-text h1 {
                        font-family: var(--font-heading);
                        font-size: 1.8rem;
                        font-weight: 800;
                        color: #ffffff;
                        line-height: 1.2;
                    }

                    .brand-text p {
                        color: rgba(255, 255, 255, 0.8);
                        font-size: 0.95rem;
                        margin-top: 0.25rem;
                    }

                    .btn-home {
                        display: inline-flex;
                        align-items: center;
                        gap: 0.6rem;
                        background: rgba(255, 255, 255, 0.12);
                        color: #ffffff;
                        border: 1px solid rgba(255, 255, 255, 0.25);
                        padding: 0.65rem 1.25rem;
                        border-radius: var(--radius-pill);
                        text-decoration: none;
                        font-weight: 700;
                        font-size: 0.9rem;
                        backdrop-filter: blur(8px);
                        transition: all 0.3s ease;
                    }

                    .btn-home:hover {
                        background: #ffffff;
                        color: var(--color-primary);
                        transform: translateY(-2px);
                    }

                    /* Main Container */
                    .main-container {
                        max-width: 1000px;
                        margin: 2rem auto 0;
                        padding: 0 1.5rem;
                    }

                    /* Summary Bar */
                    .summary-grid {
                        display: grid;
                        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                        gap: 1.25rem;
                        margin-bottom: 2rem;
                    }

                    .summary-card {
                        background: var(--color-surface);
                        border: 1px solid var(--color-border);
                        border-radius: var(--radius-md);
                        padding: 1.25rem;
                        display: flex;
                        align-items: center;
                        gap: 1rem;
                        box-shadow: var(--shadow-sm);
                    }

                    .summary-icon {
                        width: 44px;
                        height: 44px;
                        border-radius: 10px;
                        background: var(--color-accent-subtle);
                        color: var(--color-accent);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 1.25rem;
                        flex-shrink: 0;
                    }

                    .summary-card-text {
                        display: flex;
                        flex-direction: column;
                    }

                    .summary-card-label {
                        font-size: 0.78rem;
                        font-weight: 700;
                        color: var(--color-text-light);
                        text-transform: uppercase;
                        letter-spacing: 0.5px;
                    }

                    .summary-card-value {
                        font-family: var(--font-heading);
                        font-size: 1.4rem;
                        font-weight: 800;
                        color: var(--color-primary);
                    }

                    /* Info Alert */
                    .info-box {
                        background: var(--color-surface);
                        border-left: 4px solid var(--color-accent);
                        border-top: 1px solid var(--color-border);
                        border-right: 1px solid var(--color-border);
                        border-bottom: 1px solid var(--color-border);
                        border-radius: 0 var(--radius-md) var(--radius-md) 0;
                        padding: 1.1rem 1.4rem;
                        margin-bottom: 2rem;
                        display: flex;
                        align-items: flex-start;
                        gap: 0.85rem;
                        font-size: 0.92rem;
                        color: var(--color-text-muted);
                    }

                    .info-box i {
                        color: var(--color-accent);
                        font-size: 1.1rem;
                        margin-top: 0.15rem;
                    }

                    /* Table Card */
                    .table-card {
                        background: var(--color-surface);
                        border: 1px solid var(--color-border);
                        border-radius: var(--radius-lg);
                        box-shadow: var(--shadow-md);
                        overflow: hidden;
                    }

                    .table-header-title {
                        padding: 1.25rem 1.5rem;
                        border-bottom: 1px solid var(--color-border);
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        background: #fdfcff;
                    }

                    .table-header-title h2 {
                        font-family: var(--font-heading);
                        font-size: 1.15rem;
                        font-weight: 700;
                        color: var(--color-primary);
                        display: flex;
                        align-items: center;
                        gap: 0.6rem;
                    }

                    table {
                        width: 100%;
                        border-collapse: collapse;
                        text-align: left;
                    }

                    th {
                        background: #f7f5fc;
                        color: var(--color-primary);
                        font-family: var(--font-heading);
                        font-weight: 700;
                        font-size: 0.85rem;
                        text-transform: uppercase;
                        letter-spacing: 0.5px;
                        padding: 1rem 1.25rem;
                        border-bottom: 1px solid var(--color-border);
                    }

                    td {
                        padding: 1rem 1.25rem;
                        border-bottom: 1px solid var(--color-border);
                        font-size: 0.92rem;
                    }

                    tr:last-child td {
                        border-bottom: none;
                    }

                    tr:hover td {
                        background: #faf8fe;
                    }

                    .url-link {
                        color: var(--color-accent);
                        text-decoration: none;
                        font-weight: 600;
                        display: inline-flex;
                        align-items: center;
                        gap: 0.5rem;
                        word-break: break-all;
                    }

                    .url-link:hover {
                        color: var(--color-primary);
                        text-decoration: underline;
                    }

                    .url-icon {
                        color: var(--color-accent);
                        font-size: 0.85rem;
                    }

                    .pill-badge {
                        display: inline-flex;
                        align-items: center;
                        gap: 0.35rem;
                        padding: 0.25rem 0.65rem;
                        border-radius: var(--radius-pill);
                        font-size: 0.78rem;
                        font-weight: 700;
                        text-transform: uppercase;
                        letter-spacing: 0.4px;
                    }

                    .badge-freq {
                        background: var(--color-accent-subtle);
                        color: var(--color-accent);
                        border: 1px solid rgba(86, 64, 166, 0.2);
                    }

                    .badge-priority-high {
                        background: rgba(16, 185, 129, 0.1);
                        color: #059669;
                        border: 1px solid rgba(16, 185, 129, 0.25);
                    }

                    .badge-priority-med {
                        background: rgba(59, 130, 246, 0.1);
                        color: #2563eb;
                        border: 1px solid rgba(59, 130, 246, 0.25);
                    }

                    .date-text {
                        font-family: var(--font-mono);
                        font-size: 0.82rem;
                        color: var(--color-text-muted);
                        display: inline-flex;
                        align-items: center;
                        gap: 0.4rem;
                    }

                    /* Footer */
                    .sitemap-footer {
                        max-width: 1000px;
                        margin: 2.5rem auto 0;
                        padding: 0 1.5rem;
                        text-align: center;
                        font-size: 0.85rem;
                        color: var(--color-text-light);
                    }

                    .sitemap-footer a {
                        color: var(--color-accent);
                        text-decoration: none;
                        font-weight: 600;
                    }

                    .sitemap-footer a:hover {
                        text-decoration: underline;
                    }

                    @media (max-width: 768px) {
                        .header-banner {
                            padding: 2rem 1rem;
                        }
                        .brand-info {
                            flex-direction: column;
                            align-items: flex-start;
                            gap: 0.75rem;
                        }
                        th, td {
                            padding: 0.75rem 0.85rem;
                        }
                    }
                </style>
            </head>
            <body>
                <!-- Header Banner with AAGBS Branding -->
                <header class="header-banner">
                    <div class="header-container">
                        <div class="brand-info">
                            <div class="brand-logo-badge">
                                <i class="fa-solid fa-sitemap"></i>
                            </div>
                            <div class="brand-text">
                                <h1>XML Sitemap Index</h1>
                                <p>Mohammad Hafiz bin Ismail | Universiti Teknologi MARA (UiTM)</p>
                            </div>
                        </div>
                        <a href="https://cshafiz.com/" class="btn-home">
                            <i class="fa-solid fa-house"></i>
                            <span>Visit Profile</span>
                        </a>
                    </div>
                </header>

                <main class="main-container">
                    <!-- Summary Stats -->
                    <div class="summary-grid">
                        <div class="summary-card">
                            <div class="summary-icon">
                                <i class="fa-solid fa-link"></i>
                            </div>
                            <div class="summary-card-text">
                                <span class="summary-card-label">Total Indexed Pages</span>
                                <span class="summary-card-value">
                                    <xsl:value-of select="count(sitemap:urlset/sitemap:url)"/>
                                </span>
                            </div>
                        </div>

                        <div class="summary-card">
                            <div class="summary-icon">
                                <i class="fa-solid fa-building-columns"></i>
                            </div>
                            <div class="summary-card-text">
                                <span class="summary-card-label">Affiliation</span>
                                <span class="summary-card-value" style="font-size: 1.1rem;">UiTM Kampus Arau</span>
                            </div>
                        </div>

                        <div class="summary-card">
                            <div class="summary-icon">
                                <i class="fa-solid fa-circle-check"></i>
                            </div>
                            <div class="summary-card-text">
                                <span class="summary-card-label">Standard Format</span>
                                <span class="summary-card-value" style="font-size: 1.1rem;">Sitemaps.org 0.9</span>
                            </div>
                        </div>
                    </div>

                    <!-- Information Alert -->
                    <div class="info-box">
                        <i class="fa-solid fa-circle-info"></i>
                        <div>
                            This XML Sitemap is generated according to the official XML Sitemap Protocol (<a href="https://www.sitemaps.org" target="_blank" rel="noopener" style="color: var(--color-accent); font-weight: 600;">sitemaps.org</a>) for search engine crawlers (Google, Bing, Yandex). It is rendered with an XSL stylesheet.
                        </div>
                    </div>

                    <!-- URLs Table -->
                    <div class="table-card">
                        <div class="table-header-title">
                            <h2>
                                <i class="fa-solid fa-list-check"></i>
                                <span>Indexed URLs List</span>
                            </h2>
                            <span style="font-size: 0.85rem; color: var(--color-text-light); font-weight: 600;">
                                <xsl:value-of select="count(sitemap:urlset/sitemap:url)"/> Entries
                            </span>
                        </div>

                        <table>
                            <thead>
                                <tr>
                                    <th style="width: 50%;">Page URL (Location)</th>
                                    <th style="width: 20%;">Last Modified</th>
                                    <th style="width: 15%;">Change Frequency</th>
                                    <th style="width: 15%;">Priority</th>
                                </tr>
                            </thead>
                            <tbody>
                                <xsl:for-each select="sitemap:urlset/sitemap:url">
                                    <tr>
                                        <td>
                                            <a class="url-link">
                                                <xsl:attribute name="href">
                                                    <xsl:value-of select="sitemap:loc"/>
                                                </xsl:attribute>
                                                <i class="fa-solid fa-arrow-up-right-from-square url-icon"></i>
                                                <xsl:value-of select="sitemap:loc"/>
                                            </a>
                                        </td>
                                        <td>
                                            <span class="date-text">
                                                <i class="fa-regular fa-calendar-days" style="color: var(--color-accent);"></i>
                                                <xsl:value-of select="sitemap:lastmod"/>
                                            </span>
                                        </td>
                                        <td>
                                            <span class="pill-badge badge-freq">
                                                <i class="fa-solid fa-rotate"></i>
                                                <xsl:value-of select="sitemap:changefreq"/>
                                            </span>
                                        </td>
                                        <td>
                                            <xsl:choose>
                                                <xsl:when test="sitemap:priority &gt;= 0.9">
                                                    <span class="pill-badge badge-priority-high">
                                                        <i class="fa-solid fa-star"></i>
                                                        <xsl:value-of select="sitemap:priority"/>
                                                    </span>
                                                </xsl:when>
                                                <xsl:otherwise>
                                                    <span class="pill-badge badge-priority-med">
                                                        <i class="fa-solid fa-star-half-stroke"></i>
                                                        <xsl:value-of select="sitemap:priority"/>
                                                    </span>
                                                </xsl:otherwise>
                                            </xsl:choose>
                                        </td>
                                    </tr>
                                </xsl:for-each>
                            </tbody>
                        </table>
                    </div>

                    <!-- Footer -->
                    <footer class="sitemap-footer">
                        <p>&#169; 2026 Mohammad Hafiz bin Ismail</p>
                        <p style="margin-top: 0.35rem;">
                            <a href="https://cshafiz.com/">Home Profile</a> • 
                            <a href="https://cshafiz.com/projects.html">Projects</a> • 
                            <a href="https://mypapit.net" target="_blank" rel="noopener">mypapit.net</a> • 
                            <a href="https://expert.uitm.edu.my/expert/mohammadhafiz" target="_blank" rel="noopener">UiTM Expert</a>
                        </p>
                    </footer>
                </main>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>
