<template x-if="documentsFetched && documents.length > 0">
  <div>
    <div class="flex items-center gap-2">
      <h2>
        {{ p__('heading', 'Recent documents') }}
      </h2>

      <a href="app/library/documents" class="hidden badge md:flex">
        {{ p__('button', 'See all documents') }}
      </a>
    </div>

    <ul class="flex flex-col gap-1 mt-4 text-sm">
      <template x-for="doc in documents" :key="doc.id">
        <li
          class="relative flex items-center justify-between gap-3 p-3 md:grid md:grid-cols-12 box hover:border-line"
          x-data>

          <a :href="`app/writer/${doc.id}`"
            class="absolute top-0 left-0 w-full h-full cursor-pointer"></a>

          <div class="flex items-center gap-3 md:col-span-11">
            <div
              class="rounded-full bg-line-dimmed flex items-center justify-center w-10 h-10 [&_svg]:w-6 [&_svg]:h-6 font-bold shrink-0 uppercase"
              :style="{backgroundColor: doc.preset ? doc.preset.color : null, color: doc.preset ? '#fff' : null}">

              <template x-if="!doc.preset">
                <span x-text="doc.title.match(/(\b\S)?/g).join('').slice(0, 2)">
                </span>
              </template>

              <template x-if="doc.preset">
                <span>
                  <template
                    x-if="doc.preset.image && doc.preset.image.startsWith('<svg')">
                    <div x-html="doc.preset.image"></div>
                  </template>

                  <template
                    x-if="doc.preset.image && !doc.preset.image.startsWith('<svg')">
                    <i class="ti" :class='`ti-${doc.preset.image}`'></i>
                  </template>

                  <template x-if="!doc.preset.image">
                    <span
                      x-text="doc.preset.title.match(/(\b\S)?/g).join('').slice(0, 2)">
                    </span>
                  </template>
                </span>
              </template>
            </div>

            <div>
              <div x-html="doc.title" class="line-clamp-1">
              </div>

              <div class="mt-1 text-xs text-content-dimmed">
                <x-time :datetime="doc.created_at" data-type="date"></x-time>
              </div>
            </div>
          </div>

          <div class="md:col-span-1 justify-self-end">
            <div class="relative"
              @click.outside="$refs.context.removeAttribute('data-open')">

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

              <div class="z-10 menu" x-ref="context">
                <ul>
                  <li>
                    <a :href="`app/writer/${doc.id}`"
                      class="flex items-center gap-2 px-4 py-2 hover:no-underline hover:bg-intermediate">
                      <i class="ti ti-pencil"></i>
                      {{ p__('button', 'Edit') }}
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </li>
      </template>
    </ul>

    <div class="mt-6 text-center md:hidden">
      <a href="app/library/documents"
        class="text-xs font-bold text-right uppercase hover:underline">
        {{ p__('button', 'See all documents') }}
      </a>
    </div>
  </div>
</template>