<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet
    version="2.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"
    xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"
    xmlns:xhtml="http://www.w3.org/1999/xhtml">

    <xsl:output method="html" indent="yes" encoding="UTF-8" />

    <xsl:template match="/">
        <html>
            <head>
                <title> Sitemap </title>
                <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
                <style type="text/css">
                    body {
                        font-family: sans-serif;
                        background-color: #f4f4f4;
                        color: #000;
                    }
                    .bg-near-white {
                    background-color: #f4f4f4
                    }
                    .mw8 {
                        max-width: 64rem;
                        margin: 0 auto;
                        padding: 2rem;
                    }
                    table {
                        width: 100%;
                        border-collapse: collapse;
                        margin-bottom: 1rem;
                    }
                    th, td {
                        padding: 0.75rem;
                        text-align: left;
                        border: 1px solid #ddd;
                    }
                    th {
                        background-color: #fff;
                        font-weight: bold;
                    }
                    tr:hover {
                        background-color: #f4f4f4;
                    }
                    a {
                        color: #357edd;
                        text-decoration: none;
                    }
                    a:hover {
                        text-decoration: underline;
                    }
                    .ph3 {
                    padding-left: 1rem;
                    padding-right: 1rem
                    }

                    .pb3 {
                    padding-bottom: 1rem
                    }
                    .black {
                    color: #000
                    }
                     .mw8 {
                    max-width: 64rem
                    }

                    .pv4 {
                    padding-top: 2rem;
                    padding-bottom: 2rem
                    }

                    .center {
                    margin-right: auto;
                    margin-left: auto
                    }

                    .overflow-auto {
                    overflow: auto
                    }
                     .mr2 {
                    margin-right: .5rem
                    }

                    .ma0 {
                    margin: 0
                    }
                     .f3 {
                    font-size: unset
                    }
                     .gray {
                    color: #777
                    }
                     .expl {
                    line-height: 1.5em;
                    }
                    .b--light-gray {
                    border-color: #eee
                    }
                    .w-100 {
                    width: 100%
                    }
                    .f6 {
                    font-size: 12px
                    }
                    .fw6 {
                    font-weight: 600
                    }
                    .b {
                    font-weight: unset
                    }
                    .tl {
                    text-align: left
                    }
                     .bb {
                    border-bottom-style: solid;
                    border-bottom-width: 1px
                    }

                    .tr {
                    text-align: right
                    }

                    .tc {
                    text-align: center
                    }

                    .ba {
                    border-style: solid;
                    border-width: 1px
                    }

                    .bw1 {
                    border-width: .125rem
                    }

                    .bg-white {
                    background-color: #fff
                    }

                    .pa3 {
                    padding: 5px
                    }
                     .lh-copy {
                    line-height: 1.5
                    }
                    .hover-bg-near-white:focus,
                    .hover-bg-near-white:hover {
                    background-color: #f4f4f4
                    }
                    @media ( max-width:768px ) {
                        th, td {
                            font-size: 1rem !important;
                        }
                    }
                </style>
            </head>
              <body class="ph3 pb3 black bg-near-white">
                <header class="mw8 pv4 center">
                    <h2 class="ma0 mr2 f3">XML Sitemap</h2>
                    <p class="expl gray">This XML Sitemap generated by <strong>DefiniteSEO</strong> WordPress Plugin helps Search Engines crawl your website content easily and effectively. It is generated according to the protocols set by <a target="_blank" href="https://sitemaps.org">sitemaps.org</a>.</p>
                    <p class="expl gray">This is the Sitemaps Index file and it contains <strong><xsl:value-of select="count(sitemap:urlset/sitemap:url)" /></strong> sitemaps.</p>
                </header>
                <xsl:apply-templates />
            </body>
        </html>
    </xsl:template>

    <xsl:template match="sitemap:urlset">
       <div  class="mw8 center">
            <div class="overflow-auto">
                <table class="w-100 f6 b--light-gray ba bw1" cellspacing="0">
                    <thead class="lh-copy b bb b--light-gray bg-white">
                        <tr>
                            <th class="pa3 fw6 bb  tc" style="width:60px">#</th>
                            <th class="pa3 fw6 tl bb ">URL</th>
                            <th class="pa3 fw6 tl bb ">IMAGES</th>
                             <xsl:if test="sitemap:url[1]/sitemap:priority">
                                <th class="pa3 fw6 tl bb ">Priority</th>
                            </xsl:if>
                            <th class="pa3 fw6 bb  tc" style="width:200px">Last Modified</th>
                        </tr>
                    </thead>
                    <tbody class="lh-copy bg-white">
                        <xsl:for-each select="sitemap:url">
                              <tr class="hover-bg-near-white">
                                <td class="pa3 tc b"><xsl:value-of select="position()" /></td>
                                <td class="pa3 b"><a href="{sitemap:loc}" target="_blank"><xsl:value-of select="sitemap:loc" /></a></td>
                                 <td class="pa3 b">
                                    <xsl:value-of select="count(image:image)" />
                                </td>
                                <xsl:if test="sitemap:priority">
                                    <xsl:if test="sitemap:priority !=''">
                                       <td class="pa3 b">
                                            <xsl:value-of select="concat(sitemap:priority*100,'%')" />
                                        </td>
                                    </xsl:if>
                                </xsl:if>
                                <td class="pa3 tr tc"><xsl:value-of select="sitemap:lastmod" /></td>
                            </tr>
                        </xsl:for-each>
                    </tbody>
                </table>
            </div>
        </div>
    </xsl:template>

</xsl:stylesheet>
