<!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 Skin | ' + skin.skinId,
    });
  %>
</head>
<body class="dark:bg-gray-800 dark:text-gray-300">
  <%-
    await include('../partials/header.ejs', {
    });
  %>
  <main>
    <div class="container px-4 mx-auto">
      <div class="grid lg:grid-cols-3 gap-3 justify-items-center">
        <div id="skin-info" class="text-center w-full mx-auto sm:px-6 lg:px-8 py-5">
          <div class="px-4 py-1 sm:px-6 dark:bg-gray-900 bg-gray-100">
            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-300"><%= await getLocaleString(language, 'skins', 'skin.stats') %></h3>
          </div>
          <div>
            <!-- statistics -->
            <dl>
              <div class="border border-gray-100 dark:border-gray-900 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-200"><%= await getLocaleString(language, 'skins', 'cached.on') %></dt>
                <dd class="mt-1 text-sm font-semibold text-gray-900 sm:mt-0 sm:col-span-2 dark:text-gray-300">
                  <time data-int="true" data-time="<%= skin.createdAt %>"></time>
                </dd>
              </div>
            </dl>
          </div>
        </div>
        <div id="skin-content" class="w-full text-center">
          <div class="py-2"></div>
          <div class="flex justify-center items-center">
            <div class="rounded transition duration-200 border-2 border-gray-200 hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-900 bg-gray-100 dark:bg-gray-900" style="width: min-content;">
              <canvas id="skin" width="270" height="360" style="cursor:pointer;"></canvas>
            </div>
          </div>
          <div class="py-1">
            <button class="transition duration-200 text-white dark:bg-[#059669] bg-[#10b981] dark:text-white py-1 px-2 rounded-md dark:hover:bg-[#047857] hover:bg-[#059669]" id="skinPauseButton" data-paused="false" onclick="pauseSkin()">Pause</button>
          </div>
        </div>
        <!-- other content. Mostly advertisements -->
        <div id="skin-other" class="text-center w-full mx-auto sm:px-6 lg:px-8 py-5">
          <% if (true) { // 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>
    </div>
    <div id="spacer" class="mt-[10px]"></div>
    <div id="user-content" class="w-1/2 mx-auto sm:px-6 lg:px-8">
      <div class="overflow-hidden shadow-md rounded-lg">
        <div class="px-6 py-4 bg-white border-b border-gray-200 font-bold text-center dark:bg-gray-900 dark:border-gray-700"><%= await getLocaleString(language, 'skins', 'users') %></div>
        <div class="p-6 bg-white border-b border-gray-200 dark:bg-gray-900 dark:border-gray-700" style="overflow-y:auto; text-align: justify!important; word-spacing: .15rem;">
          <% for (let i = 0; i < users.length; i++) { %>
            <% const user = users[i]; %>
            <% if (!user.hidden) { %>
              <a
                class="text-indigo-600 dark:text-indigo-500 hover:underline"
                href="/user/<%= user.profiles_username %>.<%= await getUserNameIndex(user.profiles_username, user.profiles_uuid) + 1 %>"
                <%# user.enabledColor || user.enabledFont ? setStyle(user, acc) : '' %>
              >
                <%= user.profiles_username %>
                <% if (user.enabledEmoji) { %>
                  <span data-emoji="<%= user.profiles_uuid %>" id="<%= user.profiles_uuid %>-emojis-container" data-height="22" data-width="22"><%# getEmoji(user, '22') %></span>
                <% } %>
              </a>
            <% } %>
          <% } %>
          <%- hasMoreUsers ? "\n..." : "" %>
        </div>
        <div id="requestId" class="p-6 bg-white border-gray-200 text-center dark:bg-gray-900 dark:border-gray-700">
          <a class="bg-[#073C92] shadow-md text-sm text-white font-bold py-3 md:px-8 px-4 hover:bg-[#073392] rounded uppercase" href="/download/skin/<%= skin.skinId %>.png"><%= await getLocaleString(language, 'skins', 'download.skin') %></a>
        </div>
      </div>
    </div>
    <div class="mt-[15px]"></div>
    <div id="similar-skins" class="mx-auto">
      <% if (similarSkins.length > 0) { %>
        <div class="w-1/2 mx-auto sm:px-6 lg:px-8">
          <h1 class="text-2xl font-semibold">
            Similar Skins
            <% if (similarSkins.length > 18) { %>
              <span class="float-right"><a class="bg-indigo-500 p-1 rounded hover:underline" href="/skins/similar?dh=<%= skin.dhash.toString().slice(0, 8) %>">Show More</a></span>
            <% } %>
          </h1>
          <div class="mt-[5px]"></div>
          <hr>
          <div class="mt-[5px]"></div>
          <div class="flex flex-wrap justify-center items-center gap-1">
            <% for (let i = 0; i < similarSkins.length && i < 18; i++) { %>
              <% const skin = similarSkins[i]; %>
              <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 class="mt-[5px]">
            <small class="text-xs">Diff Hash: <%= skin.dhash %></small>
          </div>
        </div> 
      <% } %>
    </div>
  </main>
  <%-
    await include('../partials/footer', {
    });
  %>
  <script src="/js/formatDate.js"></script>
  <%-
    await include('../partials/skinviewer', {
      skin: `${textureServer}/skins/${skin.skinId}.png`,
      cape: null,
      slim: users[users.length - 1]?.model === 1,
    });
  %>
  <script>
    const skinViewerImage = new skinview3d.SkinViewer({
      width: 88,
      height: 188,
      cameraX: -34,
      renderPaused: true,
    });
    
    skinViewerImage.camera.rotation.y = -0.5;

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

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