<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:exslt="http://exslt.org/common">
<xsl:param name="title"/>
<xsl:param name="all"/>
<xsl:template name="substring-split-last" as="element()*">
  <xsl:param name="string1" select="''" />
  <xsl:param name="string2" select="''" />
  <xsl:if test="$string1 != '' and $string2 != ''">
    <xsl:variable name="head" select="substring-before($string1, $string2)" />
    <xsl:variable name="tail" select="substring-after($string1, $string2)" />
    <xsl:choose>
      <xsl:when test="contains($tail, $string2)">
        <xsl:variable name="next">
          <xsl:call-template name="substring-split-last">
            <xsl:with-param name="string1" select="$tail" />
            <xsl:with-param name="string2" select="$string2" />
          </xsl:call-template>
        </xsl:variable>
        <result>
          <head>
            <xsl:value-of select="$head"/>
            <xsl:value-of select="$string2"/>
            <xsl:value-of select="exslt:node-set($next)/result/head/text()"/>
          </head>
          <tail>
            <xsl:value-of select="exslt:node-set($next)/result/tail/text()"/>
          </tail>
        </result>
      </xsl:when>
      <xsl:otherwise>
        <result>
          <head>
            <xsl:value-of select="$head"/>
          </head>
          <tail>
            <xsl:value-of select="$tail"/>
          </tail>
        </result>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:if>
</xsl:template>
<xsl:template name="directory">
  <xsl:param name="href" select="''" />
  <xsl:param name="text" select="''" />
  <a href="{$href}" name="{$text}" class="dir element">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style=" fill:#000000;">
      <path d="M 2.5 2 C 1.671875 2 1 2.671875 1 3.5 L 1 12.5 C 1 13.328125 1.671875 14 2.5 14 L 13.5 14 C 14.328125 14 15 13.328125 15 12.5 L 15 5.5 C 15 4.671875 14.328125 4 13.5 4 L 6.796875 4 L 6.144531 2.789063 C 5.882813 2.300781 5.378906 2 4.824219 2 Z"></path>
    </svg>
    <span><xsl:value-of select="$text"/></span>
  </a>
</xsl:template>
<xsl:output method="html" encoding="utf-8" indent="yes" />
<xsl:template match="/">
    <xsl:text disable-output-escaping='yes'>&lt;!DOCTYPE html&gt;</xsl:text>
    <html>
    <head>
        <title><xsl:value-of select="$title" /></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <style>
        img, video {
            display: block;
            max-width: 4em;
            height: 4em;
            margin: 2mm;
            vertical-align: top;
            image-orientation: from-image;
        }
        .container > div, .container > .dir {
          width: 8em;
          height: 8em;
          word-break: break-word;
          padding: 0.5em;
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        html, body, .container {
          margin: 0;
          padding: 0;
          width: 100vw;
          overflow-x: hidden;
        }
        .container {
          display: flex;
          flex-wrap: wrap;
        }
        body > a {
          display: block;
          padding: 1em;
        }
        .searchbox {
          margin: 1em;
        }
        </style>
    </head>
    <body>
      <a href="../">back</a>
      <input class="searchbox" oninput="searchfilter(event)" id="searchinput"/>
      <div class="container">
        <xsl:if test="$title = '/emoji/'">
          <xsl:call-template name="directory">
            <xsl:with-param name="text" select="'all'" />
            <xsl:with-param name="href" select="'all'" />
          </xsl:call-template>        
        </xsl:if>
        <xsl:for-each select="list/directory">
          <xsl:call-template name="directory">
            <xsl:with-param name="text" select="./text()" />
            <xsl:with-param name="href" select="." />
          </xsl:call-template>        
        </xsl:for-each>
      </div>
      <div class="container">
        <xsl:for-each select="list/file">
          <xsl:variable name="parts" as="element()*">
            <xsl:call-template name="substring-split-last">
              <xsl:with-param name="string1" select="./text()" />
              <xsl:with-param name="string2" select="'.'" />
            </xsl:call-template>
          </xsl:variable>
          <xsl:variable name="basename">
            <xsl:value-of select="exslt:node-set($parts)/result/head/text()"/>
          </xsl:variable>
          <xsl:variable name="suffix">
            <xsl:value-of select="exslt:node-set($parts)/result/tail/text()"/>
          </xsl:variable>
          <xsl:choose>
            <xsl:when test="contains('json', $suffix)"/>
            <xsl:when test="contains('mp4 webm mkv avi wmv flv ogv', $suffix)">
              <video controls="" src="{.}" alt="{.}" title="{.}"/>
            </xsl:when>
            <xsl:otherwise>
              <xsl:choose>
                <xsl:when test="$title = '/'">
                  <xsl:variable name="hostname" select="substring-before(substring-after($basename, '_'), '_')" />
                  <xsl:variable name="realbasename" select="substring-after(substring-after($basename, '_'), '_')" />
                  <div name="{$realbasename}" class="element">
                    <img src="{.}" alt="{$realbasename}" title="{$realbasename}"/>
                    <span>:<xsl:value-of select="$realbasename"/>:</span>
                  </div>
                </xsl:when>
                <xsl:otherwise>
                  <div name="{$basename}" class="element">
                    <img src="{.}" alt="{.}" title="{.}"/>
                    <span>:<xsl:value-of select="$basename"/>:</span>
                  </div>
                </xsl:otherwise>
              </xsl:choose>
            </xsl:otherwise>
          </xsl:choose>
        </xsl:for-each>
      </div>
      <style type="text/css" id="search">
      </style>
      <script type="application/javascript">
        function searchfilter() {
          const value = document.getElementById('searchinput').value;
          if (history &amp;&amp; history.replaceState) {
            history.replaceState(null, null, '#' + value);
          } else {
            window.location.hash = '#' + value;
          }
          document.getElementById('search').innerText = value 
            ? '.container > .element { display: none; } .container > .element[name*="' + value + '"] { display:inherit; }'
            : '';
        }
        document.getElementById('searchinput').value = (window.location.hash || '#').substring(1);
        window.onload = searchfilter;
        searchfilter();
      </script>
    </body>
    </html>
</xsl:template>
</xsl:stylesheet>
