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

{% set active_menu = 'chat' %}
{% set sort = [
  {
    value: null,
    label: p__('label', 'Default')
  },

  {
    value: 'title',
    label: p__('label', 'Title')
  }
] %}

{% set xdata %}
list("assistants", {{ sort|json_encode|raw }})
{% endset %}

{% block title p__('title', 'Assistants')|title %}

{% block template %}
{# Header #}
<div>
  <a href="app"
    class="inline-flex items-center gap-1 text-sm rounded-lg text-content-dimmed hover:text-content">
    <i class="text-lg ti ti-square-rounded-arrow-left-filled"></i>

    {{ p__('button', 'Dashboard') }}
  </a>

  <div class="flex items-center justify-between gap-4 mt-4">
    <div>
      <div class="flex items-center gap-2">
        <h1>{{ p__('heading', 'Assistants') }}</h1>

        <template x-if="total !== null">
          <div class="text-sm text-content-dimmed md:hidden">
            (<span x-text="total"></span>)
          </div>
        </template>
      </div>

      <p class="mt-2 text-content-dimmed">
        {{ __('Choose one of the AI assistants to chat with') }}
      </p>
    </div>

    <div class="md:hidden">
      <button type="button" class="hidden w-8 h-8 avatar">
        <i class="text-lg ti ti-adjustments-horizontal"></i>
      </button>
    </div>
  </div>
</div>

{# Filters #}
{% include "/snippets/filters.twig" with { total: "Total :count assistants" } %}

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

  <template
    x-if="resources.length > 0 || typeof isFiltered === 'undefined' || !isFiltered">
    <div class="grid gap-5 sm:grid-cols-2 md:grid-cols-3 ">
      {% for i in range(1,6) %}
      <div class="hidden group-data-[state=initial]/list:block">
        {% include "/snippets/cards/assistant.twig" with {placeholder:true} only %}
      </div>
      {% endfor %}

      <div
        class="flex flex-col gap-6 box box-selected hover:border-line group-data-[state=initial]/list:hidden">
        <div class="avatar">
          {% if option.features.chat.avatar is defined and option.features.chat.avatar %}
          <img src="{{ option.features.chat.avatar }}"
            alt="{{ option.features.chat.name ?? 'AI' }}{{ option.features.chat.name ?? 'AI' }}">
          {% else %}
          <i class="ti ti-sparkles"></i>
          {% endif %}
        </div>

        <div>
          <h3 class="font-bold">
            {{ option.features.chat.name ?? 'AI' }}
          </h3>

          <div class="mt-1 text-sm text-content-dimmed">
            {{ __('Universal AI bot') }}
          </div>
        </div>

        <a href="app/chat/" class="w-full mt-auto button button-dimmed">
          {{ p__('button', 'Start conversation') }}
        </a>
      </div>

      <template x-for="assistant in resources" :key="assistant.id">
        {% include "/snippets/cards/assistant.twig" only %}
      </template>
    </div>
  </template>
</div>
{% endblock %}