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

{% set active_menu = 'assistants' %}

{% set xdata %}
assistant({{ assistant|json_encode }})
{% endset %}

{% block title p__('title', 'Train assistant')|title %}

{% block template %}
<div class="flex flex-col gap-8">
  <div>
    {% include "snippets/back.twig" with {link: 'admin/assistants/' ~ assistant.id, label: 'Assistant details'} %}

    <h1 class="mt-4">
      {{ p__('heading', 'Train assistant') }}:
      <span class="font-normal text-intermediate-content"
        x-text="assistant.name"></span>
    </h1>

    <div class="mt-2">
      <x-uuid x-text="assistant.id"></x-uuid>
    </div>
  </div>

  <div class="flex flex-col gap-2">
    <section class="grid gap-6 box" data-density="comfortable">
      <h2>{{ p__('heading', 'Files') }}</h2>

      <template
        x-if="files.length > 0 || assistant.dataset.filter(item => item.object === 'file_unit').length > 0">
        <div class="grid grid-cols-1 gap-1">
          <template
            x-for="unit in assistant.dataset.filter(item => item.object === 'file_unit')">
            <div
              class="flex gap-2 items-center p-2 pr-4 box min-w-72 hover:border-line group"
              :key="unit.id" x-data>
              <div class="flex justify-center items-center w-10 h-10 shrink-0">
                <i class="ti ti-file-description"></i>
              </div>

              <div class="min-w-0 grow">
                <div class="text-sm font-bold truncate" x-text="unit.title">
                </div>

                <div class="mt-0.5 text-xs truncate text-content-dimmed">
                  <span class="uppercase" x-text="unit.file.extension"></span>
                  ·
                  <x-filesize :data-value="unit.file.size"></x-filesize>
                  ·
                  {{ __('Ready to use') }}
                </div>
              </div>

              <div class="relative shrink-0"
                @click.outside="$refs.context.removeAttribute('data-open')">

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

                <div class="menu" x-ref="context">
                  <ul>
                    <li>
                      <a :href="unit.file.url" download target="_blank"
                        class="flex gap-2 items-center px-4 py-2 hover:no-underline hover:bg-intermediate">
                        {{ p__('button', 'Download') }}
                      </a>
                    </li>

                    <li>
                      <button
                        class="flex gap-2 items-center px-4 py-2 w-full hover:no-underline hover:bg-intermediate"
                        @click.prevent="currentResource = unit; modal.open('delete-modal')">
                        {{ p__('button', 'Delete') }}
                      </button>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </template>

          <template x-for="file in files">
            <div
              class="flex gap-2 items-center p-2 pr-4 box min-w-72 hover:border-line"
              :class="['pending', 'error'].includes(file.status) ? 'opacity-50 hover:opacity-100' : null"
              :key="file.id">
              <div class="flex justify-center items-center w-10 h-10 shrink-0">
                <i class="ti ti-file-description"></i>
              </div>

              <div class="min-w-0 grow">
                <div class="text-sm font-bold truncate" x-text="file.name">
                </div>

                <div class="mt-0.5 text-xs truncate text-content-dimmed">
                  <span class="uppercase" x-text="file.extension"></span>
                  ·
                  <x-filesize :data-value="file.size"></x-filesize>
                  ·
                  <template x-if="file.status == 'pending'">
                    <span class="text-orange-500">{{ __('Pending') }}</span>
                  </template>

                  <template x-if="file.status == 'error'">
                    <span class="inline-flex gap-1 items-center text-failure">
                      {{ __('Error') }}
                      <i class="text-sm ti ti-alert-circle"
                        x-tooltip="file.error"></i>
                    </span>
                  </template>
                </div>
              </div>

              <div class="text-content-dimmed shrink-0">
                <template x-if="file.status != 'uploading'">
                  <button type="button" @click="removeFile(file)">
                    <i class="ti ti-trash"
                      x-tooltip.raw="{{ __('Remove') }}"></i>
                  </button>
                </template>

                <template x-if="file.status == 'uploading'">
                  {% include "snippets/spinner.twig" %}
                </template>
              </div>
            </div>
          </template>
        </div>
      </template>

      <div class="flex relative flex-col gap-4 items-center p-10 group">
        <svg
          class="absolute top-0 left-0 w-full h-full rounded-lg text-line group-hover:text-content-dimmed group-data-[selected]:hidden stroke-2 stroke-current"
          width="100%" height="100%" fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <rect cx="56" width="100%" height="100%" stroke-dasharray="4 4" rx="8"
            ry="8" />
        </svg>

        <i class="text-3xl text-content-dimmed ti ti-upload"></i>

        <div class="flex flex-col gap-1 items-center">
          <h3>{{ p__('heading', 'Import files') }}</h3>
          <p class="text-sm text-content-dimmed">
            {{ p__('info', 'Drag and drop files here or click to browse.') }}
          </p>
        </div>

        <p class="text-xs text-content-dimmed">
          {{ p__('info', 'Supported file types: pdf, csv, json, txt, xml, doc, docx, odt') }}
        </p>

        <button type="button" class="absolute inset-0 z-10"
          @click="$refs.file.click()">
        </button>

        <x-dropzone>
          <input type="file" @change="pushFiles($refs.file.files)" name="file"
            multiple class="hidden" x-ref="file"
            accept="application/pdf,text/csv,application/json,text/plain,.doc,.docx,.odt,.xml">

          <div class="flex flex-col gap-6 items-center">
            <i class="text-6xl ti ti-upload text-content-dimmed"></i>
            <div class="flex flex-col gap-2 text-center max-w-[30rem]">
              <h2>{{ p__('heading', 'Drop files here') }}</h2>

              <div class="text-sm text-content-dimmed">
                {{ p__('info', 'Supported file types: pdf, csv, json, txt, doc, docx, odt') }}
              </div>
            </div>
          </div>
        </x-dropzone>
      </div>
    </section>

    <section class="grid gap-6 box" data-density="comfortable">
      <div class="flex justify-between items-center">
        <h2>{{ p__('heading', 'Web pages') }}</h2>

        <button class="w-8 h-8 rounded-full button button-sm button-dimmed"
          x-tooltip.raw="{{ __('Add new page') }}"
          @click="modal.open('new-page')">
          <i class="ti ti-plus"></i>
        </button>
      </div>

      <div>
        <template
          x-if="assistant.dataset.filter(item => item.object === 'link_unit').length == 0">
          <div class="text-sm text-content-dimmed">
            {{ p__('info', 'No pages added yet.') }}
          </div>
        </template>

        <template
          x-if="assistant.dataset.filter(item => item.object === 'link_unit').length > 0">
          <div class="grid grid-cols-1 gap-1">
            <template
              x-for="unit in assistant.dataset.filter(item => item.object === 'link_unit')">
              <div
                class="flex gap-2 items-center p-2 pr-4 box min-w-72 hover:border-line group"
                :key="unit.id" x-data>
                <div
                  class="flex justify-center items-center w-10 h-10 shrink-0">
                  <i class="ti ti-link"></i>
                </div>

                <div class="min-w-0 grow">
                  <div class="text-sm font-bold truncate">
                    <a :href="unit.url" target="_blank" x-text="unit.title"
                      class="hover:underline"></a>
                  </div>

                  <div class="mt-0.5 text-xs truncate text-content-dimmed">
                    <span>
                      {{ __('Date:')}}
                      <x-time :datetime="unit.created_at"
                        data-type="date"></x-time>
                    </span>
                    ·
                    {{ __('Ready to use') }}
                  </div>
                </div>

                <div class="relative shrink-0"
                  @click.outside="$refs.context.removeAttribute('data-open')">

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

                  <div class="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 = unit; modal.open('delete-modal')">
                          {{ p__('button', 'Delete') }}
                        </button>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </template>
      </div>
    </section>
  </div>
</div>

<modal-element name="new-page">
  <x-form>
    <form class="flex flex-col gap-8 modal"
      @submit.prevent="addPage($refs.url.value)">
      <div class="flex justify-between items-center">
        <h2 class="text-xl">{{ p__('heading', 'New page') }}</h2>

        <button
          class="flex justify-center items-center w-8 h-8 rounded-full border border-transparent bg-line-dimmed hover:border-line"
          @click="modal.close()" type="button">
          <i class="text-xl ti ti-x"></i>
        </button>
      </div>

      <div>
        <label for="new-page">{{ p__('label', 'URL') }}</label>
        <input type="url" class="mt-2 input" id="new-page" required
          placeholder="https://example.com" x-ref="url">
      </div>

      <div class="flex">
        <button type="submit" class="w-full button" :processing="isProcessing">
          {% include "/snippets/spinner.twig" %}

          {{ p__('button', 'Add page') }}
        </button>
      </div>
    </form>
  </x-form>
</modal-element>

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