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

{% set active_menu = 'plans' %}

{% set xdata %}
plan(
{{ currency|json_encode }},
{{ plan is defined ? plan|json_encode : null }}
)
{% endset %}

{% block title (plan is defined ? p__('title', 'Edit plan') :p__('title', 'New plan'))|title %}

{% block template %}
<x-form>
  <form class="flex flex-col gap-8" @submit.prevent="submit">
    <div>
      {% include "snippets/back.twig" with {link: 'admin/plans', label: 'Plans'} %}

      <h1 class="mt-4">
        <span x-show="!plan.id">
          {{ p__('heading', 'Create new plan') }}
        </span>
        <span x-show="plan.id">
          {{ p__('heading', 'Edit plan') }}:
          <span class="font-normal text-intermediate-content"
            x-text="plan.title"></span>
        </span>
      </h1>

      <template x-if="plan.id">
        <div class="mt-2">
          <x-uuid x-text="plan.id"></x-uuid>
        </div>
      </template>
    </div>

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

        <div>
          <label for="title">{{ p__('label', 'Title') }}</label>

          <input type="text" id="title" class="mt-2 input" autocomplete="off"
            :placeholder="plan.title || `{{ __('Include a title for the plan')|e('html_attr') }}`"
            x-model="model.title" required />
        </div>

        <div>
          <label for="description">{{ p__('label', 'Description') }}</label>

          <textarea id="description" rows="1" class="mt-2 input"
            autocomplete="off" :placeholder="plan.description || ''"
            x-model="model.description"></textarea>
        </div>

        <div>
          <label for="icon">{{ p__('label', 'Icon') }}</label>

          <input type="text" id="icon" name="icon" class="mt-2 input"
            autocomplete="off" :placeholder="plan.icon || ''"
            x-model="model.icon" />

          <p
            class="flex items-center gap-1 mt-2 text-sm text-intermediate-content">
            <i class="text-lg ti ti-info-square-rounded "></i>

            {% set link %}
            <a href="https://tabler-icons.io/" target="_blank"
              class="font-semibold text-content">Tabler Icons</a>
            {% endset %}

            {{ __('Include SVG source code or name of the any icon from %s', link)|raw }}
          </p>
        </div>

        <div
          class="flex items-center justify-between p-3 rounded-lg bg-intermediate">
          {{ p__('label', 'Status') }}

          <label class="inline-flex items-center gap-2 cursor-pointer">
            <input type="checkbox" name="status" class="hidden peer"
              x-model="model.status">

            <span
              class="h-6 w-10 rounded-3xl bg-line relative block peer-checked:bg-success transition-all after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ml-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>

            <span class="text-content-dimmed peer-checked:hidden">
              {{ p__('input-value', 'Inactive') }}
            </span>

            <span class="hidden text-success peer-checked:inline">
              {{ p__('input-value', 'Active') }}
            </span>
          </label>
        </div>

        <div
          class="flex items-center justify-between p-3 rounded-lg bg-intermediate">
          {{ p__('label', 'Featured plan') }}

          <label class="inline-flex items-center gap-2 cursor-pointer">
            <input type="checkbox" name="is_featured" class="hidden peer"
              x-model="model.is_featured">

            <span
              class="h-6 w-10 rounded-3xl bg-line relative block peer-checked:bg-success transition-all after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ml-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>

            <span class="text-content-dimmed peer-checked:hidden">
              {{ p__('input-value', 'Off') }}
            </span>

            <span class="hidden text-success peer-checked:inline">
              {{ p__('input-value', 'On') }}
            </span>
          </label>
        </div>

        <div>
          <label for="offers">{{ p__('label', 'Offers') }}</label>

          <textarea id="offers" rows="2" class="mt-2 input" autocomplete="off"
            :placeholder="plan.features || 'Basic support, -Dedicated account manager'"
            x-model="model.features"></textarea>

          <ul class="flex flex-col gap-1 mt-3 text-xs text-content-dimmed">
            <li>
              {{ __('Comma separated list of additional offers. To show the offer as excluded add a dash (-) before the name.') }}
            </li>
          </ul>
        </div>
      </section>

      <section class="grid gap-6 md:grid-cols-2 box" data-density="comfortable">
        <h2 class="md:col-span-2">{{ p__('heading', 'Pricing') }}</h2>

        <div class="col-span-2">
          <div>
            <label>{{ p__('label', 'Plan type') }}</label>

            <select name="category" name="billing-cycle" class="mt-2 input"
              x-model="model.billing_cycle">
              <option value="monthly"
                :selected="model.billing_cycle == 'monthly'">
                {{ p__('label', 'Monthly') }}
              </option>

              <option value="yearly"
                :selected="model.billing_cycle == 'yearly'">
                {{ p__('label', 'Yearly') }}
              </option>

              <option value="one-time"
                :selected="model.billing_cycle == 'one-time'">
                {{ p__('label', 'Addon credits') }}
              </option>

              <option value="lifetime"
                :selected="model.billing_cycle == 'lifetime'">
                {{ p__('label', 'Lifetime') }}
              </option>
            </select>
          </div>

          <template x-if="model.billing_cycle == 'one-time'">
            <ul
              class="flex flex-col gap-1 m-3 mb-0 text-xs list-disc list-inside text-content-dimmed">
              <li>
                {{ __('Add-on credits are non-recurring, permanent extras that can be purchased at any time to enhance the current subscription of a workspace. These credits are used only after the workspace\'s regular, recurring credits are depleted.')}}
              </li>

              <li>
                {{ __('Add-on credits can be applied to any active subscription, whether free or paid. However, they require an active subscription to be usable.')}}
              </li>
            </ul>
          </template>

          <template x-if="model.billing_cycle == 'lifetime'">
            <ul
              class="flex flex-col gap-1 m-3 mb-0 text-xs list-disc list-inside text-content-dimmed">
              <li>
                {{ __('The Lifetime Plan is a one-time payment option that grants users access to your service indefinitely.') }}
              </li>

              <li>
                {{ __('Workspaces receive monthly recurring usage credits as part of their Lifetime Plan. These credits reset each month, providing consistent access to your service\'s features.') }}
              </li>
            </ul>
          </template>

          <template x-if="model.billing_cycle == 'monthly'">
            <ul
              class="flex flex-col gap-1 m-3 mb-0 text-xs list-disc list-inside text-content-dimmed">
              <li>
                {{ __('The Monthly Plan requires users to pay (automatically) a set fee every month to maintain access to your service.') }}
              </li>

              <li>
                {{ __('Workspaces on the Monthly Plan receive monthly recurring usage credits. These credits are reset once in 30 days.') }}
              </li>
            </ul>
          </template>

          <template x-if="model.billing_cycle == 'yearly'">
            <ul
              class="flex flex-col gap-1 m-3 mb-0 text-xs list-disc list-inside text-content-dimmed">
              <li>
                {{ __('Users opting for the Yearly Plan make a single payment for a year\'s worth of access to your service.') }}
              </li>

              <li>
                {{ __('Despite the yearly payment, workspaces still receive monthly recurring usage credits. This ensures that users have regular access to your service throughout their subscription period.') }}
              </li>
            </ul>
          </template>
        </div>

        <div>
          <label for="price" class="flex items-center gap-2">
            <span>{{ p__('label', 'Price') }}</span>

            <template
              x-if="model.billing_cycle == 'one-time' || model.billing_cycle == 'lifetime'">
              <span class="badge">
                {{ __('One-time') }}
              </span>
            </template>

            <template x-if="model.billing_cycle == 'monthly'">
              <span class="flex items-center gap-1">
                <span class="badge">
                  {{ __('Recurring') }}
                </span>

                <span class="badge">
                  {{ __('30 days') }}
                </span>
              </span>
            </template>

            <template x-if="model.billing_cycle == 'yearly'">
              <span class="flex items-center gap-1">
                <span class="badge">
                  {{ __('Recurring') }}
                </span>

                <span class="badge">
                  {{ __('365 days') }}
                </span>
              </span>
            </template>
          </label>

          <div class="relative">
            <input type="text" id="price" name="title" class="mt-2 pr-11 input"
              autocomplete="off" placeholder="{{ __('Include price') }}"
              required x-model="model.price"
              x-mask:dynamic="$money($input, '.', ' ', {{ currency.fraction_digits }})"
              x-ref="price" />

            <code
              class="absolute text-sm font-medium -translate-y-1/2 pointer-events-none right-3 top-1/2 text-content-dimmed">{{ currency.code }}</code>
          </div>
        </div>

        <div>
          <label for="credit-count" class="flex items-center gap-2">
            <span>
              {{ p__('label', 'Credit limit') }}
            </span>

            <template x-if="model.billing_cycle == 'one-time'">
              <span class="badge">
                {{ __('Non-expiring') }}
              </span>
            </template>

            <template
              x-if="['lifetime', 'monthly', 'yearly'].includes(model.billing_cycle)">
              <span class="flex items-center gap-1">
                <span class="badge">
                  {{ __('Renewing') }}
                </span>

                <span class="badge">
                  {{ __('30 days') }}
                </span>
              </span>
            </template>
          </label>

          <input type="number" id="credit-count" name="title" class="mt-2 input"
            autocomplete="off"
            :placeholder="plan.credit_count || `{{ __('Unlimited') }}`"
            x-model="model.credit_count" />
        </div>
      </section>

      <template x-if="model.billing_cycle != 'one-time'">
        <section class="grid gap-6 md:grid-cols-2 box"
          data-density="comfortable">
          <h2 class="md:col-span-2">{{ p__('heading', 'Tools') }}</h2>

          <label
            class="flex items-center gap-4 cursor-pointer box hover:border-line">
            <div>
              <div class="flex items-center gap-2 label">
                {{ p__('heading', 'Writer') }}

                {% if option.features.writer.is_enabled is not defined or option.features.writer.is_enabled == false %}
                <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                  x-tooltip.raw="{{ __('Disabled globally') }}"></i>
                {% endif %}
              </div>

              <p class="font-normal text-content-dimmed">
                {{ p__('writer-tool-description', 'Write SEO optimized blogs, sales emails and more...') }}
              </p>
            </div>

            <div class="ml-auto">
              <input type="checkbox" class="hidden peer"
                x-model="model.config.writer.is_enabled">

              <span
                class="h-6 w-10 rounded-3xl bg-line relative block peer-checked:bg-success transition-all after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ml-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>
            </div>
          </label>

          <label
            class="flex items-center gap-4 cursor-pointer box hover:border-line">
            <div>
              <div class="flex items-center gap-2 label">
                {{ p__('heading', 'Coder') }}

                {% if option.features.coder.is_enabled is not defined or option.features.coder.is_enabled == false %}
                <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                  x-tooltip.raw="{{ __('Disabled globally') }}"></i>
                {% endif %}
              </div>
              <p class="font-normal text-content-dimmed">
                {{ p__('coder-tool-description', 'Ready to write code at the speed of light?') }}
              </p>
            </div>

            <div class="ml-auto">
              <input type="checkbox" class="hidden peer"
                x-model="model.config.coder.is_enabled">

              <span
                class="h-6 w-10 rounded-3xl bg-line relative block peer-checked:bg-success transition-all after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ml-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>
            </div>
          </label>

          <label
            class="flex items-center gap-4 cursor-pointer box hover:border-line">
            <div>
              <div class="flex items-center gap-2 label">
                {{ p__('heading', 'Imagine') }}

                {% if option.features.imagine.is_enabled is not defined or option.features.imagine.is_enabled == false %}
                <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                  x-tooltip.raw="{{ __('Disabled globally') }}"></i>
                {% endif %}
              </div>
              <p class="font-normal text-content-dimmed">
                {{ p__('imagine-tool-description', 'Visualize what you dream of. Create images from text.') }}
              </p>
            </div>

            <div class="ml-auto">
              <input type="checkbox" class="hidden peer"
                x-model="model.config.imagine.is_enabled">

              <span
                class="h-6 w-10 rounded-3xl bg-line relative block peer-checked:bg-success transition-all after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ml-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>
            </div>
          </label>

          <label
            class="flex items-center gap-4 cursor-pointer box hover:border-line">
            <div>
              <div class="flex items-center gap-2 label">
                {{ p__('heading', 'Transcriber') }}

                {% if option.features.transcriber.is_enabled is not defined or option.features.transcriber.is_enabled == false %}
                <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                  x-tooltip.raw="{{ __('Disabled globally') }}"></i>
                {% endif %}
              </div>
              <p class="font-normal text-content-dimmed">
                {{ p__('transcriber-tool-description', 'Instantly transcribe spoken words into text.')  }}
              </p>
            </div>

            <div class="ml-auto">
              <input type="checkbox" class="hidden peer"
                x-model="model.config.transcriber.is_enabled">

              <span
                class="h-6 w-10 rounded-3xl bg-line relative block peer-checked:bg-success transition-all after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ml-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>
            </div>
          </label>

          <label
            class="flex items-center gap-4 cursor-pointer box hover:border-line">
            <div>
              <div class="flex items-center gap-2 label">
                {{ p__('heading', 'Voiceover') }}

                {% if option.features.voiceover.is_enabled is not defined or option.features.voiceover.is_enabled == false %}
                <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                  x-tooltip.raw="{{ __('Disabled globally') }}"></i>
                {% endif %}
              </div>
              <p class="font-normal text-content-dimmed">
                {{ p__('voiceover-tool-description', 'Convert your texts into lifelike speech') }}
              </p>
            </div>

            <div class="ml-auto">
              <input type="checkbox" class="hidden peer"
                x-model="model.config.voiceover.is_enabled">

              <span
                class="h-6 w-10 rounded-3xl bg-line relative block peer-checked:bg-success transition-all after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ml-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>
            </div>
          </label>

          <label
            class="flex items-center gap-4 cursor-pointer box hover:border-line">
            <div>
              <div class="flex items-center gap-2 label">
                {{ p__('heading', 'Chat') }}

                {% if option.features.chat.is_enabled is not defined or option.features.chat.is_enabled == false %}
                <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                  x-tooltip.raw="{{ __('Disabled globally') }}"></i>
                {% endif %}
              </div>
              <p class="font-normal text-content-dimmed">
                {{ p__('chat-tool-description', 'Chat with AI assistants') }}
              </p>
            </div>

            <div class="ml-auto">
              <input type="checkbox" class="hidden peer"
                x-model="model.config.chat.is_enabled">

              <span
                class="h-6 w-10 rounded-3xl bg-line relative block peer-checked:bg-success transition-all after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ml-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>
            </div>
          </label>
        </section>
      </template>

      <template x-if="model.billing_cycle != 'one-time'">
        <section class="flex flex-col gap-6 box" data-density="comfortable">
          <h2>{{ p__('heading', 'Models') }}</h2>
          <h3>{{ p__('heading', 'Text Models') }}</h3>

          <div class="grid gap-6 md:grid-cols-2">
            <div>
              <label class="flex items-center gap-2">
                {{ p__('label', 'Writer model') }}

                <i class="text-base leading-5 ti ti-alert-square-rounded-filled text-failure"
                  x-show="!model.config.writer.is_enabled" x-cloak
                  x-tooltip.raw="{{ __('Writer tool is disabled') }}"></i>
              </label>

              <select class="mt-2 input" x-model="model.config.writer.model">
                <option value="gpt-4o">
                  GPT-4o
                </option>

                <option value="gpt-4-turbo">
                  GPT-4 Turbo
                </option>

                <option value="gpt-4">
                  GPT-4
                </option>

                <option value="gpt-3.5-turbo">
                  GPT-3.5 Turbo
                </option>

                <option value="gpt-3.5-turbo-instruct">
                  GPT-3.5 Turbo Instruct
                </option>

                <option value="claude-3-haiku-20240307">
                  Anthropic / Claude 3 Haiku
                </option>

                <option value="claude-3-sonnet-20240229">
                  Anthropic / Claude 3 Sonnet
                </option>

                <option value="claude-3-opus-20240229">
                  Anthropic / Claude 3 Opus
                </option>
              </select>
            </div>

            <div>
              <label class="flex items-center gap-2">
                {{ p__('label', 'Coder model') }}

                <i class="text-base leading-5 ti ti-alert-square-rounded-filled text-failure"
                  x-show="!model.config.coder.is_enabled" x-cloak
                  x-tooltip.raw="{{ __('Coder tool is disabled') }}"></i>
              </label>

              <select class="mt-2 input" x-model="model.config.coder.model">
                <option value="gpt-4o">
                  GPT-4o
                </option>

                <option value="gpt-4-turbo">
                  GPT-4 Turbo
                </option>

                <option value="gpt-4">
                  GPT-4
                </option>

                <option value="gpt-3.5-turbo">
                  GPT-3.5 Turbo
                </option>

                <option value="gpt-3.5-turbo-instruct">
                  GPT-3.5 Turbo Instruct
                </option>

                <option value="claude-3-haiku-20240307">
                  Anthropic / Claude 3 Haiku
                </option>

                <option value="claude-3-sonnet-20240229">
                  Anthropic / Claude 3 Sonnet
                </option>

                <option value="claude-3-opus-20240229">
                  Anthropic / Claude 3 Opus
                </option>
              </select>
            </div>

            <div>
              <label>{{ p__('label', 'Title generator model') }}</label>

              <select class="mt-2 input" x-model="model.config.titler.model">
                <option value="gpt-4o">
                  GPT-4o
                </option>

                <option value="gpt-4-turbo">
                  GPT-4 Turbo
                </option>

                <option value="gpt-4">
                  GPT-4
                </option>

                <option value="gpt-3.5-turbo">
                  GPT-3.5 Turbo
                </option>

                <option value="gpt-3.5-turbo-instruct">
                  GPT-3.5 Turbo Instruct
                </option>

                <option value="claude-3-haiku-20240307">
                  Anthropic / Claude 3 Haiku
                </option>

                <option value="claude-3-sonnet-20240229">
                  Anthropic / Claude 3 Sonnet
                </option>

                <option value="claude-3-opus-20240229">
                  Anthropic / Claude 3 Opus
                </option>
              </select>
            </div>
          </div>

          <hr class="my-2">

          <h3 class="flex items-center gap-2">
            {{ p__('heading', 'Image Models') }}

            <i class="text-base ti ti-alert-square-rounded-filled text-failure"
              x-show="!model.config.imagine.is_enabled" x-cloak
              x-tooltip.raw="{{ __('Imagine tool is disabled') }}"></i>
          </h3>

          <div class="grid gap-6 md:grid-cols-2">
            <label
              class="flex items-center gap-4 cursor-pointer box hover:border-line">
              <div>
                <div class="flex items-center gap-2 text-sm">
                  DALL·E 3

                  {% if option.openai.api_secret_key is not defined or option.openai.api_secret_key is empty %}
                  <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                    x-tooltip.raw="{{ __('Missing OpenAI API key') }}"></i>
                  {% endif %}
                </div>

                <div class="font-normal text-content-dimmed">OpenAI</div>
              </div>

              <div class="ml-auto">
                <input type="checkbox" class="hidden peer" value="dall-e-3"
                  x-model="model.config.models['dall-e-3']">

                <span
                  class="h-6 w-10 rounded-3xl bg-line relative block peer-checked:bg-success transition-all after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ml-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>
              </div>
            </label>

            <label
              class="flex items-center gap-4 cursor-pointer box hover:border-line">
              <div>
                <div class="flex items-center gap-2 text-sm">
                  DALL·E 2

                  {% if option.openai.api_secret_key is not defined or option.openai.api_secret_key is empty %}
                  <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                    x-tooltip.raw="{{ __('Missing OpenAI API key') }}"></i>
                  {% endif %}
                </div>

                <div class="font-normal text-content-dimmed">OpenAI</div>
              </div>

              <div class="ml-auto">
                <input type="checkbox" class="hidden peer" value="dall-e-2"
                  x-model="model.config.models['dall-e-2']">

                <span
                  class="h-6 w-10 rounded-3xl bg-line relative block peer-checked:bg-success transition-all after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ml-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>
              </div>
            </label>

            <label
              class="flex items-center gap-4 cursor-pointer box hover:border-line">
              <div>
                <div class="flex items-center gap-2 text-sm">
                  Stable Diffusion XL (SDXL)

                  {% if option.stabilityai.api_key is not defined or option.stabilityai.api_key is empty %}
                  <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                    x-tooltip.raw="{{ __('Missing StabilityAI API key') }}"></i>
                  {% endif %}
                </div>

                <div class="font-normal text-content-dimmed">StabilityAI</div>
              </div>

              <div class="ml-auto">
                <input type="checkbox" class="hidden peer"
                  value="stable-diffusion-xl-1024-v1-0"
                  x-model="model.config.models['stable-diffusion-xl-1024-v1-0']">

                <span
                  class="h-6 w-10 rounded-3xl bg-line relative block peer-checked:bg-success transition-all after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ml-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>
              </div>
            </label>

            <label
              class="flex items-center gap-4 cursor-pointer box hover:border-line">
              <div>
                <div class="flex items-center gap-2 text-sm">
                  Stable Diffusion 1.6 (SD 1.6)

                  {% if option.stabilityai.api_key is not defined or option.stabilityai.api_key is empty %}
                  <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                    x-tooltip.raw="{{ __('Missing StabilityAI API key') }}"></i>
                  {% endif %}
                </div>

                <div class="font-normal text-content-dimmed">StabilityAI</div>
              </div>

              <div class="ml-auto">
                <input type="checkbox" class="hidden peer"
                  value="stable-diffusion-v1-6"
                  x-model="model.config.models['stable-diffusion-v1-6']">

                <span
                  class="h-6 w-10 rounded-3xl bg-line relative block peer-checked:bg-success transition-all after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ml-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>
              </div>
            </label>

            <label
              class="flex items-center gap-4 cursor-pointer box hover:border-line">
              <div>
                <div class="flex items-center gap-2 text-sm">
                  Clipdrop

                  {% if option.clipdrop.api_key is not defined or option.clipdrop.api_key is empty %}
                  <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                    x-tooltip.raw="{{ __('Missing Clipdrop API key') }}"></i>
                  {% endif %}
                </div>

                <div class="font-normal text-content-dimmed">Clipdrop</div>
              </div>

              <div class="ml-auto">
                <input type="checkbox" class="hidden peer"
                  value="stable-diffusion-v1-6"
                  x-model="model.config.models['clipdrop']">

                <span
                  class="h-6 w-10 rounded-3xl bg-line relative block peer-checked:bg-success transition-all after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ml-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>
              </div>
            </label>
          </div>

          <hr class="my-2">

          <h3 class="flex items-center gap-2">
            {{ p__('heading', 'Voice Models') }}

            <i class="text-base ti ti-alert-square-rounded-filled text-failure"
              x-show="!model.config.voiceover.is_enabled" x-cloak
              x-tooltip.raw="{{ __('Voiceover tool is disabled') }}"></i>
          </h3>

          <div class="grid gap-6 md:grid-cols-2">
            <label
              class="flex items-center gap-4 cursor-pointer box hover:border-line">
              <div>
                <div class="flex items-center gap-2 text-sm">
                  TTS 1

                  {% if option.openai.api_secret_key is not defined or option.openai.api_secret_key is empty %}
                  <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                    x-tooltip.raw="{{ __('Missing OpenAI API key') }}"></i>
                  {% endif %}
                </div>

                <div class="font-normal text-content-dimmed">OpenAI</div>
              </div>

              <div class="ml-auto">
                <input type="checkbox" class="hidden peer" value="tts-1"
                  x-model="model.config.models['tts-1']">

                <span
                  class="h-6 w-10 rounded-3xl bg-line relative block peer-checked:bg-success transition-all after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ml-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>
              </div>
            </label>

            <label
              class="flex items-center gap-4 cursor-pointer box hover:border-line">
              <div>
                <div class="flex items-center gap-2 text-sm">
                  Multilingual v2

                  {% if option.elevenlabs.api_key is not defined or option.elevenlabs.api_key is empty %}
                  <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                    x-tooltip.raw="{{ __('Missing ElevenLabs API key') }}"></i>
                  {% endif %}
                </div>

                <div class="font-normal text-content-dimmed">ElevenLabs</div>
              </div>

              <div class="ml-auto">
                <input type="checkbox" class="hidden peer"
                  value="eleven_multilingual_v2"
                  x-model="model.config.models['eleven_multilingual_v2']">

                <span
                  class="h-6 w-10 rounded-3xl bg-line relative block peer-checked:bg-success transition-all after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ml-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>
              </div>
            </label>

            <label
              class="flex items-center gap-4 cursor-pointer box hover:border-line">
              <div>
                <div class="flex items-center gap-2 text-sm">
                  Multilingual v1

                  {% if option.elevenlabs.api_key is not defined or option.elevenlabs.api_key is empty %}
                  <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                    x-tooltip.raw="{{ __('Missing ElevenLabs API key') }}"></i>
                  {% endif %}
                </div>

                <div class="font-normal text-content-dimmed">ElevenLabs</div>
              </div>

              <div class="ml-auto">
                <input type="checkbox" class="hidden peer"
                  value="eleven_multilingual_v1"
                  x-model="model.config.models['eleven_multilingual_v1']">

                <span
                  class="h-6 w-10 rounded-3xl bg-line relative block peer-checked:bg-success transition-all after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ml-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>
              </div>
            </label>

            <label
              class="flex items-center gap-4 cursor-pointer box hover:border-line">
              <div>
                <div class="flex items-center gap-2 text-sm">
                  Monolingual v1

                  {% if option.elevenlabs.api_key is not defined or option.elevenlabs.api_key is empty %}
                  <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                    x-tooltip.raw="{{ __('Missing ElevenLabs API key') }}"></i>
                  {% endif %}
                </div>

                <div class="font-normal text-content-dimmed">ElevenLabs</div>
              </div>

              <div class="ml-auto">
                <input type="checkbox" class="hidden peer"
                  value="eleven_monolingual_v1"
                  x-model="model.config.models['eleven_monolingual_v1']">

                <span
                  class="h-6 w-10 rounded-3xl bg-line relative block peer-checked:bg-success transition-all after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ml-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>
              </div>
            </label>

            <label
              class="flex items-center gap-4 cursor-pointer box hover:border-line">
              <div>
                <div class="flex items-center gap-2 text-sm">
                  Google TTS {{ __('Standard') }}

                  {% if option.gcp.credentials is not defined or option.gcp.credentials is empty %}
                  <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                    x-tooltip.raw="{{ __('Missing Google TTS credentials') }}"></i>
                  {% endif %}
                </div>

                <div class="font-normal text-content-dimmed">Google</div>
              </div>

              <div class="ml-auto">
                <input type="checkbox" class="hidden peer"
                  value="google-tts-standard"
                  x-model="model.config.models['google-tts-standard']">

                <span
                  class="h-6 w-10 rounded-3xl bg-line relative block peer-checked:bg-success transition-all after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ml-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>
              </div>
            </label>

            <label
              class="flex items-center gap-4 cursor-pointer box hover:border-line">
              <div>
                <div class="flex items-center gap-2 text-sm">
                  Google TTS {{ __('Studio') }}

                  {% if option.gcp.credentials is not defined or option.gcp.credentials is empty %}
                  <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                    x-tooltip.raw="{{ __('Missing Google TTS Credentials') }}"></i>
                  {% endif %}
                </div>

                <div class="font-normal text-content-dimmed">Google</div>
              </div>

              <div class="ml-auto">
                <input type="checkbox" class="hidden peer"
                  value="google-tts-studio"
                  x-model="model.config.models['google-tts-studio']">

                <span
                  class="h-6 w-10 rounded-3xl bg-line relative block peer-checked:bg-success transition-all after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ml-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>
              </div>
            </label>

            <label
              class="flex items-center gap-4 cursor-pointer box hover:border-line">
              <div>
                <div class="flex items-center gap-2 text-sm">
                  Google TTS {{ __('Premium') }}

                  {% if option.gcp.credentials is not defined or option.gcp.credentials is empty %}
                  <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                    x-tooltip.raw="{{ __('Missing Google TTS Credentials') }}"></i>
                  {% endif %}
                </div>

                <div class="font-normal text-content-dimmed">Google</div>
              </div>

              <div class="ml-auto">
                <input type="checkbox" class="hidden peer"
                  value="google-tts-premium"
                  x-model="model.config.models['google-tts-premium']">

                <span
                  class="h-6 w-10 rounded-3xl bg-line relative block peer-checked:bg-success transition-all after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ml-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>
              </div>
            </label>

            <label
              class="flex items-center gap-4 cursor-pointer box hover:border-line">
              <div>
                <div class="flex items-center gap-2 text-sm">
                  Azure TTS

                  {% if option.azure.speech is not defined or option.azure.speech is empty %}
                  <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                    x-tooltip.raw="{{ __('Missing Azure TTS Credentials') }}"></i>
                  {% endif %}
                </div>

                <div class="font-normal text-content-dimmed">Azure</div>
              </div>

              <div class="ml-auto">
                <input type="checkbox" class="hidden peer" value="azure-tts"
                  x-model="model.config.models['azure-tts']">

                <span
                  class="h-6 w-10 rounded-3xl bg-line relative block peer-checked:bg-success transition-all after:h-5 after:w-5 after:top-0.5 after:absolute after:left-0 after:ml-0.5 after:transition-all after:rounded-full after:bg-white peer-checked:after:left-4"></span>
              </div>
            </label>
          </div>
        </section>
      </template>

      <template x-if="model.billing_cycle != 'one-time' && plan.id">
        <section class="flex flex-col gap-6 box" data-density="comfortable">

          <div>
            <div>
              <label class="inline-flex items-center gap-1">
                <input type="checkbox" class="hidden peer"
                  x-model="model.update_snapshots">

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

                <span
                  class="select-none">{{ p__('button', 'Update snapshots') }}</span>
              </label>
            </div>

            <ul class="flex flex-col gap-1 mt-3 text-xs text-content-dimmed">
              <li>
                {{ __('If checked and saved, all subscriptions on this plan will have their plan configuration updated to the latest configuration. Price and billing cycle changes will not be applied.') }}
              </li>
            </ul>
          </div>
        </section>
      </template>
    </div>

    <div class="flex justify-end gap-4">
      <a href="admin/plans" class="button button-outline">
        {{ p__('button', 'Cancel') }}
      </a>

      <button type="submit" class="button button-accent"
        :processing="isProcessing">

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

        <span x-show="!plan.id">
          {{ p__('button', 'Create plan') }}
        </span>

        <span x-show="plan.id">
          {{ p__('button', 'Update plan') }}
        </span>
      </button>
    </div>
  </form>
</x-form>
{% endblock %}