{% extends "/layouts/main.twig" %}

{% set active_menu = 'library' %}

{% set strings = {
  delete_success: __("Image has been deleted successfully.")
} %}

{% set xdata %}
list("library/images", {{ strings|json_encode }})
{% endset %}

{% block title p__('title', 'Image library')|title %}

{% block template %}
{# Header #}
<div>
  {% include "snippets/back.twig" with {link: 'app/library', label: 'Library'} %}

  <h1 class="mt-4">{{ __('Image library') }}</h1>

  <template x-if="total !== null">
    <div class="mt-2 text-sm text-content-dimmed">
      {{ __('Total :count images')|replace({':count': '<span x-text="total"></span>'})|raw }}
    </div>
  </template>
</div>

{# List #}
<div class="group/list" data-state="initial" :data-state="state">
  <div class="hidden group-data-[state=empty]/list:block">
    {% include "sections/empty.twig" with { title: p__('heading', 'Empty result set'), message: __('There are no image yet.'), reset: __('There are no image matching your search.') } %}
  </div>

  <ul
    class="text-sm group-data-[state=empty]/list:hidden grid gap-4 grid-cols-4">
    {% for i in range(1,12) %}
    <li class="hidden group-data-[state=initial]/list:block">
      <div class="relative pt-[100%] group loading">
      </div>
    </li>
    {% endfor %}

    <template x-for="image in resources" :key="image.id">
      <li x-data>
        <div class="relative pt-[100%] group">
          <a :href="`app/imagine/${image.id}`" class="">
            <template x-if="image.output_file.blur_hash">
              <canvas is="x-blurhash"
                class="absolute top-0 left-0 w-full h-full rounded-lg"
                width="56" height="56" :hash="image.output_file.blur_hash"
                type="color"></canvas>
            </template>

            <img :src="image.output_file.url" :alt="image.params.prompt || ''"
              class="absolute top-0 left-0 object-cover w-full h-full rounded-lg">

            <div
              class="absolute top-0 left-0 w-full h-full z-10 bg-gradient-to-bl from-[rgba(63,66,70,1)] to-[rgba(63,66,70,0)] invisible group-hover:visible rounded-lg">
            </div>
          </a>

          <div class="absolute z-10 hidden top-2 right-2 group-hover:block"
            @click.outside="$refs.context.removeAttribute('data-open')">

            <button @click="$refs.context.toggleAttribute('data-open')">
              <i class="text-white ti ti-dots-vertical"></i>
            </button>

            <div class="z-10 menu" x-ref="context">
              <ul>
                <li>
                  <button
                    class="flex items-center w-full gap-2 px-4 py-2 hover:no-underline hover:bg-intermediate"
                    @click.prevent="currentResource = image; modal.open('delete-modal')">
                    <i class="ti ti-trash"></i>
                    {{ __('Delete') }}
                  </button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </li>
    </template>

    <template x-if="hasMore">
      <li class="group-data-[state=initial]/list:hidden"
        :class="isLoading ? 'animate-pulse' : null">
        <div class="relative pt-[100%]">
          <button type="button" @click="retrieveResources()"
            class="absolute top-0 left-0 flex flex-col items-center justify-center w-full h-full gap-2 text-content-dimmed hover:text-content disabled:pointer-events-none disabled:opacity-50"
            :disabled="isLoading">
            <i class="text-4xl ti ti-rotate-clockwise"></i>
            {{ p__('button', 'Load more') }}
          </button>
        </div>
      </li>
    </template>
  </ul>
</div>

{% include "sections/delete-modal.twig" with { 
  message: __('Do you really want to delete the image?'),
  title: ''
} %}
{% endblock %}