<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:sm="http://www.sitemaps.org/schemas/sitemap/0.9">
  <xsl:output method="html" encoding="UTF-8" indent="yes"/>
  <xsl:template match="/">
    <html lang="en-CA">
      <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>XML Sitemap | Travel Network Canada</title>
        <style>
          *{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:#f4f7f9;color:#182d3f;font:15px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
          a{color:#096b98}a:hover{text-decoration-thickness:2px}.top{background:linear-gradient(128deg,#071b30,#0a4164 62%,#0a6c86);color:#fff}.top-inner,.wrap{width:min(calc(100% - 32px),1120px);margin:auto}.top-inner{padding:44px 0}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:800}.brand-badge{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#fff;color:#0b6f9f;font-weight:900}.eyebrow{margin:26px 0 7px;color:#f3bd36;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}h1{margin:0;font-size:clamp(2rem,5vw,3.4rem);line-height:1.06;letter-spacing:-.035em}.lead{max-width:68ch;margin:12px 0 0;color:#d9eaf4}.meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.pill{padding:7px 10px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.08);font-size:12px;font-weight:750}
          .wrap{padding:30px 0 54px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}.toolbar p{margin:0;color:#687b8b}.human{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 14px;border-radius:10px;background:#0b6f9f;color:#fff;text-decoration:none;font-weight:800}.table-shell{overflow:hidden;border:1px solid #dbe4ea;border-radius:18px;background:#fff;box-shadow:0 12px 34px rgba(7,28,49,.07)}table{width:100%;border-collapse:collapse}th,td{padding:13px 15px;border-bottom:1px solid #e6edf1;text-align:left;vertical-align:top}th{background:#eef7fb;color:#17384f;font-size:12px;letter-spacing:.04em;text-transform:uppercase}tr:last-child td{border-bottom:0}.url{font-weight:700;overflow-wrap:anywhere}.date{white-space:nowrap;color:#6f8291}.foot{margin-top:16px;color:#6f8291;font-size:13px}
          @media(max-width:700px){.top-inner{padding:34px 0}.toolbar{align-items:flex-start;flex-direction:column}.table-shell{border:0;background:transparent;box-shadow:none}table,tbody,tr,td{display:block;width:100%}thead{position:absolute;left:-9999px}tr{margin-bottom:10px;padding:14px;border:1px solid #dbe4ea;border-radius:14px;background:#fff;box-shadow:0 7px 20px rgba(7,28,49,.05)}td{padding:4px 0;border:0}.date{font-size:12px}.date:before{content:"Updated: ";font-weight:750;color:#40586a}}
        </style>
      </head>
      <body>
        <header class="top">
          <div class="top-inner">
            <a class="brand" href="/"><span class="brand-badge">TNC</span><span>Travel Network Canada</span></a>
            <p class="eyebrow">Search-engine sitemap</p>
            <h1>XML Sitemap</h1>
            <p class="lead">This is the styled browser view of the same XML sitemap submitted to search engines. Use the human sitemap for a section-by-section website directory.</p>
            <div class="meta"><span class="pill"><xsl:value-of select="count(sm:urlset/sm:url)"/> public URLs</span><span class="pill">XML + XSL presentation</span></div>
          </div>
        </header>
        <main class="wrap">
          <div class="toolbar"><p>Public URLs currently exposed through <strong>/sitemap.xml</strong>.</p><a class="human" href="/sitemap/">Open human sitemap</a></div>
          <div class="table-shell">
            <table>
              <thead><tr><th>URL</th><th>Last modified</th></tr></thead>
              <tbody>
                <xsl:for-each select="sm:urlset/sm:url">
                  <tr>
                    <td class="url"><a href="{sm:loc}"><xsl:value-of select="sm:loc"/></a></td>
                    <td class="date"><xsl:value-of select="sm:lastmod"/></td>
                  </tr>
                </xsl:for-each>
              </tbody>
            </table>
          </div>
          <p class="foot">Travel Network Canada · Vancouver, British Columbia · Human-readable sitemap: <a href="/sitemap/">travelnetworkcanada.com/sitemap/</a></p>
        </main>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>
