import { is_embeddable, is_image } from "../../main.ts";
import { Renderer } from "./_renderer.ts";

export const GridRenderer = new Renderer('Grid', items => {
  return `
    <div class="grid">
      ${items.map(item => `
        <a class="item" href="${item.href}">
          ${ is_image(item.name) ? `
            <div class="image" style="background-image: url('${item.href}');"></div>
          ` : is_embeddable(item.name) ? `
            <div class="iframe-container">
              <iframe src="${item.href}#toolbar=0&navpanes=0" frameborder="0"></iframe>
            </div>
          ` : `
            <svg class="icon" data-slot="icon" aria-hidden="true" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              ${item.is_directory ? `
                <path d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z" stroke-linecap="round" stroke-linejoin="round"></path>
              ` : `
                <path d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" stroke-linecap="round" stroke-linejoin="round"></path>
              `}
            </svg>
          `}
          <div class="title">${item.name}</div>
        </a>
      `).join('')}
    </div>
  `;
})