{% extends "/layouts/main.twig" %}
{% set mobile_head_button = {
  link: 'app/voice-isolator'
} %}

{% set active_menu = 'voice-isolator' %}
{% set xdata %}
voiceIsolator({{ (voice ?? null )|json_encode() }})
{% endset %}
{% block title p__('title', 'Voice Isolator')|title %}

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

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

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

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

                  <div class="w-20 h-3 my-1 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/voice-isolator/${i.id}`"
                class="flex items-center gap-2 p-2 border rounded-lg shrink-0 w-72 hover:border-line"
                :class="preview && preview.id == i.id ? 'border-line' : 'border-line-dimmed'"
                @click.prevent="select(i)">
                <div class="avatar">
                  <span
                    x-text="i.title ? i.title.match(/(\b\S)?/g).join('').slice(0, 2) : `{{ __('Untitled resource') }}`"></span>
                </div>

                <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-[#6283FB] to-[#C883F3] tool-icon">
          <div class="bg-gradient-to-br from-[#6283FB] to-[#C883F3]"></div>

          {% include "snippets/icons/voice-isolator.twig" %}
        </div>

        <h1 class="mt-6">{{ p__('heading', 'Voice isolator') }}</h1>
        <p class="mt-1 text-lg font-light text-content-dimmed">
          {{ p__('voice-isolator-tool-description', 'Isolate voice from background noise.')  }}
        </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 items-center gap-4 p-2 box">
          <span
            class="flex items-center justify-center w-10 h-10 rounded-lg bg-intermediate text-intermediate-content">
          </span>

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

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

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

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

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

        <template x-if="viewSegments">
          <div class="flex flex-col gap-4 mt-4">
            <template x-for="i in 5" :key="i">
              <div class="flex items-start gap-4">
                <div class="w-10 h-4 my-1 text-xs loading">
                </div>

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

        <template x-if="!viewSegments">
          <div>
            <div class="h-4 mt-1 loading"></div>
            <div class="h-4 mt-2 loading"></div>
            <div class="h-4 mt-2 loading"></div>
            <div class="w-2/3 h-4 mt-2 mb-1 loading"></div>
          </div>
        </template>
      </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 resource') }}"
              autocomplete="off" x-model="preview.title" rows="1"
              @input.debounce.750ms="save(preview)"
              class="block w-full px-0 py-0 transition-colors bg-transparent border-0 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="relative">
          <div>
            <template x-if="viewInputFile">
              <div class="mb-2 label">{{ __('Isolated audio') }}</div>
            </template>

            <div class="relative z-10 flex items-center gap-4 p-2 box bg-main">
              <span
                class="flex items-center justify-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 items-center gap-2 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>

          <div class="transition-all"
            :class="viewInputFile ? 'mt-4' : '-mt-12 scale-95'" x-cloak>
            <template x-if="viewInputFile">
              <div class="mb-2 label">{{ __('Original audio') }}</div>
            </template>

            <div class="flex items-center gap-4 p-2 box">
              <span
                class="flex items-center justify-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.input_file.url"
                  class="flex items-center gap-2 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>

        </div>

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

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

          <label class="flex items-center gap-1 text-content-dimmed">
            <input type="checkbox" class="hidden peer" x-model="viewInputFile">

            <span
              class="font-normal select-none">{{ p__('button', 'View original audio') }}</span>

            <i class="text-xl ti ti-square-rounded peer-checked:hidden"></i>
            <i
              class="hidden text-xl ti ti-square-rounded-check-filled peer-checked:block"></i>

          </label>

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

              <button
                @click="$refs.downloadOptions.toggleAttribute('data-open')"
                class="flex items-center gap-1 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="block px-4 py-2 text-left hover:bg-intermediate">
                      {{ p__('button', 'Isolated audio') }}
                    </a>
                  </li>

                  <li>
                    <a :href="preview.input_file.url" target="_blank" download
                      class="block px-4 py-2 text-left hover:bg-intermediate">
                      {{ p__('button', 'Original file') }}
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <button @click="modal.open('delete-modal');"
            class="flex items-center gap-1 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>
    </template>
  </div>
</div>

<modal-element name="delete-modal">
  <template x-if="preview">
    <form class="modal" @submit.prevent="remove(preview);">
      <div
        class="relative flex items-center justify-center w-24 h-24 mx-auto 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 items-center justify-center w-20 h-20 text-4xl transition-all rounded-full 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 isolated voice?') }}
      </div>

      <div class="flex items-center justify-center gap-4 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>
{% endblock %}

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

  <div class="bg-main">
    <x-form>
      <form
        @submit.prevent="{{ workspace.subscription.plan.config.voice_isolator.is_enabled is defined and workspace.subscription.plan.config.voice_isolator.is_enabled ? 'submit($el)' : ''   }}">
        <div class="mb-3">
          <div class="flex items-center gap-0 5">
            <span
              class="font-bold">{{ p__('heading', 'Voice isolator') }}</span>
            <i class="text-base ti ti-corner-right-up text-content-dimmed"></i>
          </div>

          <div class="text-sm text-content-dimmed">
            {{ p__('voice-isolator-tool-description', 'Isolate voice from background noise.')  }}
          </div>
        </div>

        <div
          class="relative p-1 rounded-xl bg-line-dimmed focus-within:bg-gradient-to-br focus-within:from-gradient-from focus-within:to-gradient-to">
          <div class="flex items-end gap-2 p-2 pl-4 rounded-lg bg-main">
            <input type="file" @change="file = $refs.file.files[0];" name="file"
              accept=".flac,.mp3,.mp4,.mpeg,.mpga,.m4a,.ogg,.wav,.webm" required
              class="hidden" x-ref="file">

            <div class="grow">
              <template x-if="!file">
                <button type="button"
                  class="flex items-center w-full gap-4 text-left outline-none ring-0"
                  @click="$refs.file.click()">
                  <i class="ti ti-cloud-upload"></i>

                  <div>
                    <div>{{ __('Drag and drop or upload file here') }}</div>
                    <div class="text-xs text-content-dimmed">
                      {{ __('flac, mp3, mp4, mpeg, mpga, m4a, ogg, wav, or webm') }}
                    </div>
                  </div>
                </button>
              </template>

              <template x-if="file">
                <div class="flex items-center gap-4">
                  <button type="button"
                    class="relative w-10 h-10 p-0 button button-dimmed group shrink-0"
                    @click="file=null; $refs.file.value=null">
                    <i class="ti ti-music"></i>

                    <div
                      class="absolute top-0 left-0 items-center justify-center hidden w-full h-full rounded-lg bg-content/50 text-main group-hover:flex">
                      <i
                        class="text-base rounded-full ti ti-circle-x-filled bg-content"></i>
                    </div>
                  </button>

                  <div class="grow">
                    <x-wave :src="URL.createObjectURL(file)"
                      class="flex items-center gap-2 group">

                      <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>

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

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

            <div class="ml-auto shrink-0 ">
              {% if workspace.subscription.plan.config.voice_isolator.is_enabled is defined and workspace.subscription.plan.config.voice_isolator.is_enabled %}
              <button type="submit" :processing="isProcessing"
                class="w-10 h-10 p-0 button button-accent">

                {% include "/snippets/spinner.twig" %}

                <template x-if="!isProcessing">
                  <i class="ti ti-arrow-up"></i>
                </template>
              </button>
              {% else %}
              <a href="app/billing" class="w-10 h-10 p-0 button button-dimmed"
                x-tooltip.raw="{{ __('Upgrade your plan') }}">
                <i class="ti ti-lock-up"></i>
              </a>
              {% endif %}
            </div>
          </div>
        </div>
      </form>
    </x-form>

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