<?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"
    xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
    exclude-result-prefixes="sm image">

  <xsl:output method="html" encoding="UTF-8" indent="yes"/>

  <xsl:template match="/">
    <html>
      <head>
        <title>Pingingo Sitemap</title>
        <style>
          body { font-family: Arial, sans-serif; margin: 20px; }
          h1 { font-size: 22px; margin-bottom: 10px; }
          table { border-collapse: collapse; width: 100%; margin-top: 10px; }
          th, td { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; vertical-align: top; }
          th { background: #f4f4f4; text-align: left; }
          tr:nth-child(even) { background: #fafafa; }
          .img-thumb { max-width: 120px; max-height: 80px; display: block; margin-bottom: 4px; }
          .img-list div { margin-bottom: 4px; }
        </style>
      </head>
      <body>
        <h1>Pingingo Sitemap</h1>
        <table>
          <tr>
            <th>#</th>
            <th>URL</th>
            <th>Last Modified</th>
            <th>Change Freq</th>
            <th>Priority</th>
            <th>Images</th>
          </tr>

          <!-- loop semua <url> -->
          <xsl:for-each select="sm:urlset/sm:url">
            <tr>
              <!-- nomor urut -->
              <td>
                <xsl:value-of select="position()"/>
              </td>

              <!-- URL -->
              <td>
                <a href="{sm:loc}">
                  <xsl:value-of select="sm:loc"/>
                </a>
              </td>

              <!-- lastmod -->
              <td>
                <xsl:value-of select="sm:lastmod"/>
              </td>

              <!-- checkfreq -->
              <td>
                <xsl:value-of select="sm:changefreq"/>
              </td>

              <!-- priority -->
              <td>
                <xsl:value-of select="sm:priority"/>
              </td>

              <!-- images -->
              <td class="img-list">
                <!-- kalau mau tampilkan semua image:image -->
                <xsl:for-each select="image:image">
                  <div>
                    <!-- kalau mau pakai thumbnail (kalau direct image URL) -->
                    <img class="img-thumb" src="{image:loc}" alt="{image:title}"/>
                    <!-- text title / URL -->
                    <span>
                      <xsl:value-of select="image:title"/>
                    </span>
                  </div>
                </xsl:for-each>

                <!-- kalau tidak ada image:image sama sekali -->
                <xsl:if test="not(image:image)">
                  <span>No image</span>
                </xsl:if>
              </td>
            </tr>
          </xsl:for-each>

        </table>
      </body>
    </html>
  </xsl:template>

</xsl:stylesheet>
