{% from "/macros/avatar.twig" import preset_avatar %}

{% if placeholder is defined %}
<div class="relative flex flex-col gap-6 box hover:border-line"
  data-starred="false">

  <div class="flex items-center justify-between avatar">
    <div class="w-10 h-10 rounded-ful loading">
    </div>
  </div>

  <div>
    <div class="w-16 h-6 loading"></div>
    <div class="h-4 mt-2 loading"></div>
    <div class="h-4 mt-1 mr-3 loading"></div>
    <div class="w-1/2 h-4 mt-1 loading"></div>
  </div>

  <div class="flex flex-col gap-6 mt-auto">
    <div class="flex items-center gap-2">
      <span class="w-10 h-5 py-1 loading"></span>
    </div>
  </div>
</div>
{% else %}
<div class="relative flex flex-col gap-6 box hover:border-line"
  data-starred="false">

  <div class="flex items-center justify-between avatar">
    {{ preset_avatar() }}

    <template>
      <button>
        <i
          class="ti ti-star text-2xl text-line-dimmed hover:text-line group-data-[starred=true]:hidden"></i>
        <i
          class="ti ti-star-filled text-2xl text-[#F3CF6B] hidden group-data-[starred=true]:block hover:text-line"></i>
      </button>
    </template>
  </div>

  <div>
    <h3 class="font-bold" x-text="preset.title"></h3>

    <p class="text-sm text-content-dimmed mt-1 min-h-[3.75rem]"
      x-text="preset.description">
      {{ p__('writer-tool-description', 'Write SEO optimized blogs, sales emails and more...') }}
    </p>
  </div>

  <div class="flex flex-col gap-6 mt-auto">
    <div class="flex items-center gap-2">
      <template x-if="preset.category">
        <span
          class="px-2 py-1 text-xs capitalize bg-transparent border rounded-lg border-line text-content"
          x-text="preset.category.title">
        </span>
      </template>
    </div>
  </div>

  <a class="absolute top-0 left-0 z-10 w-full h-full"
    :href="`app/writer/${preset.id}`"></a>
</div>
{% endif %}