{% if placeholder is defined %}
<div class="flex flex-col gap-6 box">
  <div>
    <h3 class="w-16 h-6 font-bold loading"></h3>
    <div class="w-24 h-4 mt-1 loading"></div>
  </div>

  <div class="flex items-center gap-2">
    <div class="w-6 h-6 rounded-full shrink-0 loading">
    </div>

    <div class="w-full h-8 grow-1 loading">
    </div>
  </div>

  <div class="flex flex-col gap-6 mt-auto">
    <div class="flex items-center gap-2 mt-0.5">
      <span class="w-12 h-6 py-1 loading"></span>
      <span class="h-6 py-1 w-14 loading"></span>
    </div>

    <div class="w-full button button-dimmed"></div>
  </div>
</div>
{% else %}
<div class="flex flex-col gap-6 box hover:border-line">
  <div>
    <div class="flex items-center justify-between gap-2">
      <h3 x-text="voice.name" class="line-clamp-1"></h3>

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

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

    <div class="text-sm capitalize min-h-5">
      <template x-if="voice.age">
        <span x-text="voice.age"></span>
      </template>

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

      <template x-if="voice.gender">
        <span x-text="voice.gender"></span>
      </template>
    </div>
  </div>

  <template x-if="voice.sample_url">
    <x-wave class="flex items-center gap-2 group" :src="voice.sample_url">
      <button type="button" play-pause>
        <i
          class="ti ti-player-play-filled text-content-dimmed 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 class="h-8 grow" wave>
      </div>
    </x-wave>
  </template>

  <div class="flex flex-col gap-6 mt-auto">
    <template
      x-if="!$store.workspace.subscription?.plan.config.models[voice.model]">
      <div class="flex items-center gap-2 text-xs text-content-dimmed">
        <i class="text-base ti ti-lock-up"></i>

        {{ __('Not availabe in your plan') }}
      </div>
    </template>

    <template
      x-if="!$store.workspace.subscription?.plan.config.models[voice.model]">
      <a href="app/billing" class="w-full button button-outline">
        <i class="ti ti-lock-up"></i>
        {{ p__('button', 'Upgrade plan') }}
      </a>
    </template>

    <template
      x-if="$store.workspace.subscription?.plan.config.models[voice.model]">
      <a :href="`app/voiceover/${voice.id}`"
        class="w-full button button-dimmed">
        {{ p__('button', 'Use this voice') }}
      </a>
    </template>
  </div>
</div>
{% endif %}