<%
  function kFormatter(num) {
    if (isNaN(num)) return '0';
    return Math.abs(num) > 999 ? Math.sign(num) * ((Math.abs(num) / 1000).toFixed(1)) + 'k' : Math.sign(num) * Math.abs(num);
  }

  async function capeLayout(cape) {
    const string = (await getLocaleString(language, 'capes', 'tooltip.1')).replace('%n', kFormatter(cape.users)).replace('%s', cape.users > 1 ? 's' : '');
    let desc = [string];
    if (string.includes('[')) {
      const options = string.split('[')[1].split(']')[0].split('|');
      desc = [string.replace(`[${options[0]}|${options[1]}]`, cape.users > 1 ? options[0] : options[1])]
    }

    const description = cape.users > 0 ? desc.join('\<br') : await getLocaleString(language, 'capes', 'tooltip.2');

    return `
<div class="max-h-[330px]" style="padding-top: .2rem; padding-left: .2rem; padding-right: .2rem;">
  <div class="h-full text-left max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl dark:bg-gray-700">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <a href="/minecraft-capes/${cape.capeId}">
          \<img class="scaleNearest w-[70px] h-[120px] rounded-md" width="60" height="120" src="/api/render/2d/cape/${cape.capeId}.png" alt="${cape.capeId}">
          \<!-- \<img width="160" class="rounded-md" src="http://localhost:8080/cape.png?cape=capes/${cape.capeId}&slim=true" alt="${cape.capeId}"> -->
        </a>
      </div>
      <div class="px-2 py-2">
        <a href="/minecraft-capes/${cape.capeId}" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline dark:text-gray-300">${cape.title}</a>
        <p id="desc" data-id="${cape.capeId}" class="mt-2 text-gray-500 dark:text-gray-400">
          ${description}
        </p>
      </div>
    </div>
  </div>
</div>`
  }
%>
<!DOCTYPE html>
<html class="<%= theme %>" lang="en">
<head>
  <%-
    await include('../partials/meta', {
      title: "Minecraft Capes",
    });
  %>
  <style>
    .scaleNearest {
      image-rendering: optimizeSpeed;
      image-rendering: -moz-crisp-edges;
      image-rendering: -o-crisp-edges;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: optimize-contrast;
      -ms-interpolation-mode: nearest-neighbor;
      image-rendering: pixelated;
    }
  </style>
</head>
<body class="dark:bg-gray-800 dark:text-gray-300">
  <%-
    await include('../partials/header', {
    });
  %>
  <main>
    <div class="container px-4 mx-auto">
      <% if (true) { // ads %>
        <div class="mt-[10px]"></div>
        <div class="dark:bg-gray-600 bg-gray-200 p-2 rounded" style="height: 500px;">
          <div class="text-center">
            <p class="uppercase">Advertisement</p>
          </div>
          <div>
            <!-- ad-cape-0 -->
            <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-2978659071440635" data-ad-slot="4000432526" data-ad-format="auto" data-full-width-responsive="true"></ins>
            <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
          </div>
        </div>
      <% } %>
      <div class="inline xl:flex xl:flex-cols-1 gap-2">
        <div class="mx-auto grid grid-cols-3 gap-2">
          <%
            const Capes = capes.filter(cape => !cape.removed && !cape.category).sort((a, b) => b.users - a.users);
            const rCapes = capes.filter(cape => cape.removed && !cape.category).sort((a, b) => b.users - a.users);
            const categoried_capes = capes.filter(cape => !cape.removed && cape.category).sort((a, b) => b.users - a.users);
            const categories = {};
            categoried_capes.forEach(function (cape) {
              if (!categories[cape.category]) categories[cape.category] = [];
              categories[cape.category].push(cape);
            });
          %>
          <% for (let i = 0; i < Capes.length; i++) { %>
            <% const cape = Capes[i]; %>
            <%- await capeLayout(cape); %>
          <% } %>
        </div>
      </div>
      <div class="py-2"></div>
      <% if (false) { // ads %>
        <div class="dark:bg-gray-600 bg-gray-200 p-2 rounded" style="height: 300px;">
          <div class="text-center">
            <p class="uppercase">Advertisement</p>
          </div>
          <div>
            <div class="flex justify-center items-center text-center">
              <!-- ad-cape-1 -->
              <ins class="adsbygoogle" style="display:inline-block;width:357px;height:188px" data-ad-client="ca-pub-2978659071440635" data-ad-slot="5121942508" data-ad-format="auto" data-full-width-responsive="true"></ins>
              <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
            </div>
          </div>
        </div>
      <% } %>
      <div class="text-center">
        <h2 class="text-lg font-semibold"><%= await getLocaleString(language, 'capes', 'removed.or.unused') %>:</h2>
        <div class="mx-auto grid grid-cols-3 gap-1">
          <% for (let i = 0; i < rCapes.length; i++) { %>
            <% const cape = rCapes[i]; %>
            <%- await capeLayout(cape); %>
          <% } %>
        </div>
      </div>
      <div class="py-2"></div>
      <% if (false) { // ads %>
        <div class="dark:bg-gray-600 bg-gray-200 p-2 rounded" style="height: 300px;">
          <div class="text-center">
            <p class="uppercase">Advertisement</p>
          </div>
          <div>
            <div class="flex justify-center items-center text-center">
              <!-- ad-cape-1 -->
              <ins class="adsbygoogle" style="display:inline-block;width:357px;height:188px" data-ad-client="ca-pub-2978659071440635" data-ad-slot="5121942508" data-ad-format="auto" data-full-width-responsive="true"></ins>
              <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
            </div>
          </div>
        </div>
      <% } %>
      <div class="text-center">
        <% for (const key in categories) { %>
          <% if (Object.hasOwnProperty.call(categories, key)) { %>
            <% const cat = categories[key]; %>
            <h2 class="text-lg font-semibold"><%= key.replace(/\_/g, ' '); %></h2>
            <div class="mx-auto grid grid-cols-3 gap-1">
              <% for (let i = 0; i < cat.length; i++) { %>
                <% const cape = cat[i]; %>
                <%- await capeLayout(cape); %>
              <% } %>
            </div>
          <% } %>
        <% } %>
      </div>
    </div>
  </main>
  <%-
    await include('../partials/footer', {
    });
  %>
</body>
</html>