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

{% set active_menu = 'library' %}

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

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

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

{% block template %}
{# Header #}
<div>
  {% include "snippets/back.twig" with {link: 'app/library', label: p__('button', 'Library')} %}
  <h1>{{ __('Compositions library') }}</h1>

  <template x-if="total !== null">
    <div class="mt-2 text-sm text-content-dimmed">
      {{ __('Total :count compositions')|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 compositions yet.'), reset: __('There are no compositions matching your search.') } %}
  </div>

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

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

            <template x-if="r.cover_image">
              <img :src="r.cover_image.url" :alt="r.title"
                class="object-cover absolute top-0 left-0 w-full h-full rounded-xl">
            </template>

            <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-xl">
            </div>
          </a>

          <div class="hidden absolute top-2 right-2 z-10 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 gap-2 items-center px-4 py-2 w-full hover:no-underline hover:bg-intermediate"
                    @click.prevent="currentResource = r; 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-[150%]">
          <button type="button" @click="retrieveResources()"
            class="flex absolute top-0 left-0 flex-col gap-2 justify-center items-center w-full h-full 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 composition?'),
  title: ''
} %}
{% endblock %}