{% extends "/layouts/main.twig" %}
{% set mobile_head_button = {
  link: 'app/voiceover/voices'
} %}

{% set active_menu = 'voiceover' %}
{% set xdata %}
voiceover(
{{ (voice ?? null )|json_encode }},
{{ (speech ?? null )|json_encode }}
)
{% endset %}
{% block title p__('title', 'Voice Over')|title %}

{% block template %}
<div class="flex flex-col gap-4 grow">
  <div class="hidden md:block">
    {% include "snippets/back.twig" with {link: 'app/library/speeches', label: p__('button', 'Library'), icon: 'square-rounded-arrow-up-filled'} %}

    <div class="relative mt-4">
      <div
        class="absolute top-0 left-0 z-10 w-28 h-full bg-gradient-to-r to-transparent pointer-events-none from-main">
      </div>

      <div class="flex">
        <div class="flex overflow-hidden gap-2 justify-end items-center pr-1">
          <template x-if="history === null">
            <template x-for="i in 5" :key="i">
              <div
                class="flex gap-2 items-center p-2 w-72 rounded-lg border shrink-0 border-line-dimmed"
                @click.prevent="select(i)">
                <div class="avatar loading">
                </div>

                <div class="grow">
                  <div class="my-1 w-2/3 h-4 loading">
                  </div>

                  <div class="my-1 w-20 h-3 loading">
                  </div>
                </div>
              </div>
            </template>
          </template>

          <template x-if="history && history.length > 0">
            <template x-for="i in history" :key="i.id">
              <a :href="`app/voiceover/${i.id}`"
                class="flex gap-2 items-center p-2 w-72 rounded-lg border shrink-0 hover:border-line"
                :class="preview && preview.id == i.id ? 'border-line' : 'border-line-dimmed'"
                @click.prevent="select(i)">
                <x-avatar :title="i.title"></x-avatar>

                <div class="grow">
                  <div x-text="i.title"
                    class="overflow-hidden text-sm text-ellipsis text-nowrap max-w-52">
                  </div>

                  <div class="flex">
                    <x-time :datetime="i.created_at" data-type="date"
                      class="text-xs text-content-dimmed"></x-time>
                  </div>
                </div>
              </a>
            </template>
          </template>
        </div>
      </div>
    </div>
  </div>

  <div class="md:my-6"
    :class="preview || isProcessing ? '' : 'flex justify-center md:my-auto'">
    <template x-if="!preview && !isProcessing">
      <div class="my-10 text-center md:my-0">
        <div
          class="mx-auto w-16 h-16 bg-gradient-to-br from-[#BCE143] to-[#30C862] tool-icon">
          <div class="bg-gradient-to-br from-[#BCE143] to-[#30C862]"></div>

          {% include "snippets/icons/voiceover.twig" %}
        </div>

        <h1 class="mt-6">{{ p__('heading', 'Speech') }}</h1>
        <p class="mt-1 text-lg font-light text-content-dimmed">
          {{ __('Effortlessly transform written text into spoken words.') }}
        </p>
      </div>
    </template>

    <template x-if="isProcessing">
      <div class="flex flex-col gap-4">
        <div class="flex flex-col gap-3 grow">
          <div class="w-2/3 h-6 loading">
          </div>

          <div class="mb-1">
            <div class="w-64 h-4 loading"></div>
          </div>
        </div>

        <div class="flex gap-4 items-center p-2 box">
          <span
            class="flex justify-center items-center w-10 h-10 rounded-lg bg-intermediate text-intermediate-content">
          </span>

          <div class="grow">
            <div class="flex gap-2 items-center group">
              <div type="button" class="w-6 h-6 loading">
              </div>

              <span process class="w-9 h-3 text-xs text-content-dimmed loading">
              </span>

              <div class="h-6 grow loading" wave>
              </div>

              <span duration
                class="w-9 h-3 text-xs text-content-dimmed loading">
              </span>
            </div>
          </div>
        </div>

        <div class="flex gap-4 items-center">
          <div class="flex gap-1 items-center mr-auto">
            <span class="my-1 w-16 h-3 loading"></span>
            <span
              class="text-xs animate-pulse ti ti-point-filled text-content-dimmed"></span>
            <span class="my-1 w-24 h-3 loading"></span>
          </div>

          <div class="my-1 size-5 loading"></div>
          <div class="my-1 size-5 loading"></div>
          <div class="my-1 size-5 loading"></div>
        </div>

        <div>
          <div class="mt-1 h-4 loading"></div>
          <div class="mt-2 h-4 loading"></div>
          <div class="mt-2 h-4 loading"></div>
          <div class="mt-2 mb-1 w-2/3 h-4 loading"></div>
        </div>
      </div>
    </template>

    <template x-if="preview && !isProcessing">
      <div class="flex flex-col gap-4">
        <div class="grow">
          <div class="text-xl autogrow-textarea font-editor-heading"
            :data-replicated-value="preview.title">
            <textarea placeholder="{{ __('Untitled document') }}"
              autocomplete="off" x-model="preview.title" rows="1"
              @input.debounce.750ms="save(preview)"
              class="block px-0 py-0 w-full bg-transparent border-0 transition-colors appearance-none resize-none focus:ring-0 placeholder:text-content-dimmed placeholder:opacity-50 read-only:text-content-dimmed"></textarea>
          </div>

          <div class="mt-1">
            <x-uuid x-text="preview.id"></x-uuid>
          </div>
        </div>

        <div class="flex gap-4 items-center p-2 box">
          <span
            class="flex justify-center items-center w-10 h-10 rounded-lg bg-intermediate text-intermediate-content">
            <i class="ti ti-music"></i>
          </span>

          <div class="grow">
            <x-wave :src="preview.output_file.url"
              class="flex gap-2 items-center group" x-ref="previewWave"
              @audioprocess="previewTime = $event.detail.time">
              <button type="button" play-pause class="text-content-dimmed">
                <i
                  class="ti ti-player-play-filled group-[[state=loading]]:hidden group-[[state=loaded]]:hidden group-[[state=playing]]:hidden"></i>
                <i
                  class="ti ti-player-pause-filled hidden group-[[state=playing]]:block"></i>

                <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                  width="20px" height="20px" viewBox="0 0 50 50"
                  style="enable-background:new 0 0 50 50;"
                  class="hidden group-[[state=loading]]:block group-[[state=loaded]]:block"
                  xml:space="preserve">
                  <path fill="currentColor"
                    d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
                    <animateTransform attributeType="xml"
                      attributeName="transform" type="rotate" from="0 25 25"
                      to="360 25 25" dur="0.6s" repeatCount="indefinite">
                    </animateTransform>
                  </path>
                </svg>
              </button>

              <span process
                class="text-xs text-content-dimmed w-9 group-[[state=loading]]:hidden">
                00:00
              </span>

              <div class="h-10 grow" wave>
              </div>

              <span duration
                class="text-xs text-content-dimmed w-9 group-[[state=loading]]:hidden">
                00:00
              </span>
            </x-wave>
          </div>
        </div>

        <div class="flex gap-4 items-center">
          <div class="flex gap-4 items-center mr-auto">
            {% include "snippets/audience.twig" %}

            <template x-if="preview.voice">
              <span
                class="hidden gap-1 items-center text-sm md:flex text-content-dimmed">
                <i class="text-base ti ti-user-circle"></i>
                <span x-text="preview.voice.name" class="capitalize"></span>
              </span>
            </template>

            <span
              class="hidden gap-1 items-center text-sm md:flex text-content-dimmed">
              {% set count %}
              <span x-text="preview.content.length">
              </span>
              {% endset %}

              <i class="text-base ti ti-square-rounded-letter-t"></i>
              {{ __(":count characters", {':count': count})|raw }}
            </span>

            <span class="flex gap-1 items-center text-sm text-content-dimmed">
              <i class="text-base ti ti-coins"></i>
              <x-credit :data-value="preview.cost"
                format="{{ __(":count credits") }}"></x-credit>
            </span>
          </div>

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

            <button @click="$refs.downloadOptions.toggleAttribute('data-open')"
              class="flex gap-1 items-center text-sm transition-all text-content-dimmed hover:text-content">
              <i class="text-xl ti ti-download"></i>
            </button>

            <div class="menu menu-br" x-ref="downloadOptions"
              @click="$el.removeAttribute('data-open')">

              <ul class="text-sm">
                <li>
                  <a :href="preview.output_file.url" target="_blank" download
                    class="flex gap-2 items-center px-4 py-2 w-full text-left hover:bg-intermediate">
                    <i class="text-lg text-content-dimmed ti ti-music"></i>

                    {{ p__('button', 'Download file') }}
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <button @click="modal.open('delete-modal');"
            class="flex gap-1 items-center text-sm transition-all text-content-dimmed hover:text-content group">
            <i class="text-xl ti ti-trash group-hover:text-failure"></i>
          </button>
        </div>

        <div class="flex flex-col gap-4 mt-4 box" data-density="comfortable">
          <div class="editor" x-text="preview.content">
          </div>

          <div class="flex">
            <x-copy :data-copy="preview.content"
              class="flex gap-1 items-center text-sm transition-all text-content-dimmed hover:text-content">
              <i class="text-xl ti ti-copy"></i>

              <span class="hidden md:inline">{{ p__('button', 'Copy') }}</span>
            </x-copy>
          </div>
        </div>
      </div>
    </template>
  </div>
</div>

<modal-element name="delete-modal">
  <template x-if="preview">
    <form class="modal" @submit.prevent="remove(preview);">
      <div
        class="flex relative justify-center items-center mx-auto w-24 h-24 rounded-full text-failure/25">

        <svg class="absolute top-0 left-0 w-full h-full" width="112"
          height="112" viewBox="0 0 112 112" fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <circle cx="56" cy="56" r="55.5" stroke="currentColor"
            stroke-dasharray="8 8" />
        </svg>

        <div
          class="flex justify-center items-center w-20 h-20 text-4xl rounded-full transition-all bg-failure/25 text-failure">
          <i class="text-4xl ti ti-trash"></i>
        </div>
      </div>

      <div class="mt-4 text-lg text-center">
        {{ __('Do you really want to delete the speech?') }}
      </div>

      <div class="flex gap-4 justify-center items-center mt-10">
        <button class="button button-outline" @click="modal.close()"
          type="button">
          {{ p__('button', 'No, cancel') }}
        </button>

        <button class="button button-failure" type="submit"
          :processing="isDeleting">
          {% include "/snippets/spinner.twig" %}

          {{ p__('button', 'Yes, delete') }}
        </button>
      </div>
    </form>
  </template>
</modal-element>

<modal-element name="voice-list-modal">
  <div class="flex flex-col gap-6 modal">
    <div class="flex justify-between items-center">
      <h2 class="text-xl">{{ p__('heading', 'Voice library') }}</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>
      <input type="text" class="mt-2 input" id="new-voice-search"
        placeholder="{{ __('Search voices') }}" x-model="query"
        @keyup.debounce="getVoices(null,true)">
    </div>

    <div class="flex flex-col gap-1 pr-1 overflow-y-scroll max-h-[424px]"
      @scroll.throttle="getVoices(voices.length > 0 ? voices[voices.length-1].id : null)">
      <template x-for="v in voices" :key="v.id">
        <div
          class="flex relative gap-2 items-center box hover:border-line group">

          <template
            x-if="$store.workspace.subscription?.plan.config.models[v.model]">
            <button type="button"
              class="absolute top-0 left-0 w-full h-full opacity-0"
              @click="selectVoice(v); showList=false;"></button>
          </template>

          <template x-if="v.sample_url">
            <x-wave class="flex cursor-pointer group" :src="v.sample_url" lazy>
              <button type="button" play-pause @click.stop class="avatar">
                <i
                  class="ti ti-player-play-filled hover:text-content group-[[state=loading]]:hidden group-[[state=loaded]]:hidden group-[[state=playing]]:hidden"></i>
                <i
                  class="ti ti-player-pause-filled hidden group-[[state=playing]]:block"></i>
              </button>

              <div wave class="w-0"></div>
            </x-wave>
          </template>

          <div class="grow">
            <div class="flex gap-2 justify-between items-center">
              <h3 x-text="v.name" class="line-clamp-1"></h3>

              <div class="flex relative items-center group">
                <template x-for="locale, i in v.supported_languages">
                  <template x-if="i < 3">
                    <x-avatar
                      class="border-2 transition-all cursor-pointer border-main hover:border-line avatar-xs"
                      :class="i > 0 ? '-ml-2 group-hover:ml-0' : null"
                      x-tooltip="locale.name || locale.code"
                      :src="`https://flagcdn.com/${locale.country_code.toLowerCase()}.svg`">
                    </x-avatar>
                  </template>
                </template>

                <template
                  x-if="v.supported_languages && v.supported_languages.length > 3">
                  <button type="button"
                    class="ml-1 text-xs text-content-dimmed hover:text-content"
                    @click="currentResource = v; modal.open('voice-modal')"
                    x-tooltip.raw="{{ __('View all') }}">
                    +<span x-text="v.supported_languages.length - 3"></span>
                  </button>
                </template>
              </div>
            </div>

            <div class="text-sm capitalize">
              <template x-if="v.age">
                <span x-text="v.age"></span>
              </template>

              <template x-if="v.accent">
                <span x-text="v.accent"></span>
              </template>

              <template x-if="v.gender">
                <span x-text="v.gender"></span>
              </template>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</modal-element>

<modal-element name="voice-modal">
  <template x-if="currentResource">
    <div class="flex flex-col gap-8 modal">
      <div class="flex justify-between items-center">
        <h2 class="text-xl" x-text="currentResource.name"></h2>

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

      <div>
        <div class="flex gap-1 items-center text-sm font-bold">
          <i class="text-lg ti ti-language"></i>
          {{ __('Supported languages') }}
        </div>

        <ul
          class="flex overflow-y-auto flex-wrap gap-1 items-center mt-4 max-h-80">
          <template x-for="locale in currentResource.supported_languages">
            <li
              class="flex gap-1 items-center px-2 py-1 rounded-md border border-line-dimmed">
              <x-avatar class="avatar-xs" :title="locale.country_code"
                :src="`https://flagcdn.com/${locale.country_code.toLowerCase()}.svg`"></x-avatar>

              <span x-text="locale.name || locale.code" class="text-sm"></span>
            </li>
          </template>
        </ul>
      </div>
    </div>
  </template>
</modal-element>
{% endblock %}

{% block footer %}
<div class="sticky bottom-0 z-40 mt-auto">
  <div class="h-4 bg-gradient-to-t to-transparent from-main">
  </div>

  <div class="bg-main">
    <template x-if="voice">
      <form
        @submit.prevent="{{ workspace.subscription.plan.config.voiceover.is_enabled is defined and workspace.subscription.plan.config.voiceover.is_enabled ? 'submit' : ''   }}">
        <div class="flex justify-between items-end mb-3">
          <div>
            <div class="flex gap-0 items-center 5">
              <span
                class="font-bold">{{ p__('heading', 'Text to speech') }}</span>
              <i
                class="text-base ti ti-corner-right-up text-content-dimmed"></i>
            </div>

            <div class="flex gap-2 items-center">
              <div class="text-sm text-content-dimmed">
                {{ __('Generate speeches from writen texts') }}
              </div>

              <button type="button" class="button button-xs button-dimmed"
                @click="showList=true; modal.open('voice-list-modal');">
                <i class="ti ti-player-play-filled"></i>
                <span x-text="voice.name"></span>
              </button>

              <template x-if="voice.supported_languages.length > 0">
                <button type="button"
                  class="text-base ti ti-info-circle-filled text-content-dimmed hover:text-content"
                  @click="currentResource = voice; modal.open('voice-modal')"></button>
              </template>
            </div>
          </div>
        </div>

        <div
          class="relative p-1 rounded-xl bg-line-dimmed has-[textarea:focus]:bg-gradient-to-br has-[textarea:focus]:from-gradient-from has-[textarea:focus]:to-gradient-to">

          <div class="flex gap-2 items-end p-2 pl-4 rounded-lg bg-main">
            <div
              class="overflow-y-auto mb-2 max-h-36 autogrow-textarea text-content grow"
              :data-replicated-value="prompt">
              <textarea placeholder="{{ __('Type a prompt here...') }}"
                autocomplete="off" rows="1" x-model="prompt" x-ref="prompt"
                class="block p-0 text-base bg-transparent border-none focus:ring-0 placeholder:text-content-dimmed"
                required></textarea>
            </div>

            <div class="flex gap-2 items-center ml-auto">
              {% if workspace.subscription.plan.config.voiceover.is_enabled is defined and workspace.subscription.plan.config.voiceover.is_enabled %}
              <template
                x-if="$store.workspace.subscription?.plan.config.models[voice.model]">
                <button type="submit" class="p-0 w-10 h-10 button button-accent"
                  :processing="isProcessing" :disabled="!voice || !prompt">
                  {% include "/snippets/spinner.twig" %}

                  <template x-if="!isProcessing">
                    <i class="ti ti-arrow-up"></i>
                  </template>
                </button>
              </template>

              <template
                x-if="!$store.workspace.subscription?.plan.config.models[voice.model]">
                <a href="app/billing" class="p-0 w-10 h-10 button button-dimmed"
                  x-tooltip.raw="{{ __('Selected voice is not available in your plan. Either upgrade your plan or select another voice.') }}">
                  <i class="ti ti-lock-up"></i>
                </a>
              </template>
              {% else %}
              <a href="app/billing" class="p-0 w-10 h-10 button button-dimmed"
                x-tooltip.raw="{{ __('Upgrade your plan') }}">
                <i class="ti ti-lock-up"></i>
              </a>
              {% endif %}
            </div>
          </div>
        </div>
      </form>
    </template>

    {% include "/sections/footer.twig" %}
  </div>
</div>
{% endblock %}