<%
  const config = {
    CLASS: "px-4 rounded bg-gray-100 dark:bg-gray-900 ml-[5px] py-1 font-semibold border-2 border-indigo-600/50 dark:border-indigo-500/50 hover:underline",
    ACTIVECLASS: "border-indigo-600/100 dark:border-indigo-500/100",
  }

  if (typeof dh === 'undefined') dh = null;
%>
<!DOCTYPE html>
<html class="<%= theme %>" lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <%-
    await include('../partials/meta.ejs', {
      title: 'Minecraft Skins | LivzMC'
    });
  %>
</head>
<body class="dark:bg-gray-800 dark:text-gray-300">
  <%-
    await include('../partials/header.ejs', {
    });
  %>
  <main>
    <div class="text-center py-3">
      <div id="options" class="flex justify-center items-center text-center">
        <div class="<%= config.CLASS %><%= !random ? " " + config.ACTIVECLASS : "" %>">
          <a href="/skins/new">Recent</a>
        </div>
        <div class="<%= config.CLASS %><%= random ? " " + config.ACTIVECLASS : "" %>">
          <a href="/skins/random">Random</a>
        </div>
      </div>
    </div>
    <% if (dh) { %>
      <%-
        await include('../partials/pagination', {
          path: '/skins/similar',
          options: [`dh=${dh}`],
          page: number,
          hasNextPage,
        });
      %>
    <% } else if (!random) { %>
      <%-
        await include('../partials/pagination', {
          path: '/skins/new',
          options: null,
          page: number,
        });
      %>
    <% } %>
    <div class="py-1"></div>
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-1">
      <div>
        <% if (ads) { // ads %>
          <div class="dark:bg-gray-600 bg-gray-200 p-2 m-2 rounded">
            <div class="text-center">
              <p class="uppercase">Advertisement</p>
            </div>
            <div>
              <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2978659071440635" data-ad-slot="4924359001" data-ad-format="auto" data-full-width-responsive="true"></ins>
            </div>
          </div>
        <% } %>
      </div>
      <div id="content">
        <div class="flex justify-center items-center text-center">
          <div class="w-[50rem]">
            <div class="flex flex-row flex-wrap gap-1">
              <% for (let i = 0; i < skins.length; i++) { %>
                <%
                  const skin = skins[i];
                  const SKINUSER = skin.recentUser;
                %>
                <div class="mx-auto bg-white rounded shadow-md overflow-hidden dark:bg-gray-700 ">
                  <% if (SKINUSER && !random) { %>
                    <div class="max-w-[104px] text-ellipsis overflow-clip">
                      <a class="text-indigo-600 dark:text-indigo-500 hover:underline" href="/skins/<%= skin.skinId %>"><%= SKINUSER.username %> <%# getEmoji(SKINUSER, '22', '22') %></a>
                      <hr class="dark:border-gray-900 w-full">
                    </div>
                  <% } %>
                  <div class="p-2">
                    <a href="/skins/<%= skin.skinId %>">
                      <img draggable="false" width="88" height="188" class="md:rounded-none rounded-lg mx-auto md:py-0 py-1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAC8CAYAAAD8QGmgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABXSURBVHhe7cExAQAAAMKg9U9tB28gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAE41A0sAAfNFXjMAAAAASUVORK5CYII=" alt="<%= skin.skinId %>" skin="<%= skin.skinId %>">
                    </a>
                  </div>
                </div>
              <% } %>
            </div>
          </div>
        </div>
      </div>
      <div>
        <% if (ads) { // ads %>
          <div class="dark:bg-gray-600 bg-gray-200 p-2 m-2 rounded">
            <div class="text-center">
              <p class="uppercase">Advertisement</p>
            </div>
            <div>
              <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2978659071440635" data-ad-slot="4924359001" data-ad-format="auto" data-full-width-responsive="true"></ins>
            </div>
          </div>
        <% } %>
      </div>
    </div>
  </main>
  <%-
    await include('../partials/footer', {
    });
  %>
  <script src="<%= textureServer %>/js/three.min.js"></script>
  <script src="<%= textureServer %>/js/3d/2.3.9.bundle.js"></script>
  <script>
    const skinViewer = new skinview3d.SkinViewer({
      width: 88,
      height: 188,
      cameraX: -34,
      renderPaused: true,
    });
    
    skinViewer.camera.rotation.y = -0.5;

    async function renderImage(id, image, element) {
      await Promise.all([
        skinViewer.loadSkin(image),
      ]);
      skinViewer.background = <%= theme == 'dark' ? 3621201 : 16777215 %>;
      skinViewer.render();
      element.setAttribute('src', skinViewer.canvas.toDataURL());
      skinViewer.dispose();
    };

    document.querySelectorAll('[skin]').forEach(function (e) {
      const skinId = e.getAttribute('skin');
      renderImage(skinId, `${TEXTURE_SERVER}/skins/${skinId}.png`, e);
    });
  </script>
</body>
</html>