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

{% set active_menu = 'plans' %}

{% set models = [
  {
    heading: p__('heading', 'Text Models'),
    providers: [
      {
        name: 'OpenAI',
        tooltip: __('Missing OpenAI API key'),
        is_available: option.openai.api_secret_key is defined and option.openai.api_secret_key is not empty, 
        models: [
          {
            name: 'GPT·4o',
            value: 'gpt-4o',
          },
          {
            name: 'GPT·4o mini',
            value: 'gpt-4o-mini',
          },
          {
            name: 'GPT·4 Turbo',
            value: 'gpt-4-turbo',
          },
          {
            name: 'GPT·4',
            value: 'gpt-4',
          },
          {
            name: 'GPT·3.5 Turbo',
            value: 'gpt-3.5-turbo',
          },
        ]
      },
      {
        name: 'Anthropic / Claude',
        tooltip: __('Missing Anthropic API key'),
        is_available: option.anthropic.api_key is defined and option.anthropic.api_key is not empty,
        models: [
          {
            name: 'Sonnet 3.5',
            value: 'claude-3-5-sonnet-20240620',
          },
          {
            name: 'Haiku 3',
            value: 'claude-3-haiku-20240307',
          },
          {
            name: 'Sonnet 3',
            value: 'claude-3-sonnet-20240229',
          },
          {
            name: 'Opus 3',
            value: 'claude-3-opus-20240229',
          },
        ]
      },
      {
        name: 'Cohere',
        tooltip: __('Missing Cohere API key'),
        is_available: option.cohere.api_key is defined and option.cohere.api_key is not empty, 
        models: [
          {
            name: 'Command R+',
            value: 'command-r-plus',
          },
          {
            name: 'Command R',
            value: 'command-r',
          },
          {
            name: 'Command',
            value: 'command',
          },
          {
            name: 'Command Light',
            value: 'command-light',
          }
        ]
      }
    ]
  },
  {
    heading: p__('heading', 'Image Models'),
    providers: [
      {
        name: 'OpenAI',
        tooltip: __('Missing OpenAI API key'),
        is_available: option.openai.api_secret_key is defined and option.openai.api_secret_key is not empty, 
        models: [
          {
            name: 'DALL·E 3',
            value: 'dall-e-3',
          },
          {
            name: 'DALL·E 2',
            value: 'dall-e-2',
          },
        ]
      },
      {
        name: 'FalAI',
        tooltip: __('Missing FalAI API key'),
        is_available: option.falai.api_key is defined and option.falai.api_key is not empty, 
        models: [
          {
            name: 'Flux Pro',
            value: 'flux-pro',
          },
          {
            name: 'FLUX Realism',
            value: 'flux-realism',
          }
        ]
      },
      {
        name: 'StabilityAI',
        tooltip: __('Missing StabilityAI API key'),
        is_available: option.stabilityai.api_key is defined and option.stabilityai.api_key is not empty,
        models: [
          {
            name: 'Stable Diffusion Ultra (SD Ultra)',
            value: 'sd-ultra',
          },
          {
            name: 'Stable Diffusion Core (SD Core)',
            value: 'sd-core',
          },
          {
            name: 'Stable Diffusion 3 (SD3 Large)',
            value: 'sd3-large',
          },
          {
            name: 'Stable Diffusion 3 (SD3 Large Turbo)',
            value: 'sd3-large-turbo',
          },
          {
            name: 'Stable Diffusion 3 (SD3 Medium)',
            value: 'sd3-medium',
          },
          {
            name: 'Stable Diffusion XL (SDXL)',
            value: 'stable-diffusion-xl-1024-v1-0',
          },
          {
            name: 'Stable Diffusion 1.6 (SD 1.6)',
            value: 'stable-diffusion-v1-6',
          },
        ]
      },
      {
        name: 'Clipdrop',
        tooltip: p__('tooltip', 'Missing Clipdrop API key'),
        is_available: option.clipdrop.api_key is defined and option.clipdrop.api_key is not empty,
        models: [
          {
            name:  'Clipdrop',
            value: 'clipdrop',
          }
        ]
      }
    ]
  },
  {
    heading: p__('heading', 'Voice Models'),
    providers: [
      {
        name: 'OpenAI',
        tooltip: __('Missing OpenAI API key'),
        is_available: option.openai.api_secret_key is defined and option.openai.api_secret_key is not empty, 
        models: [
          {
            name: 'TTS·1',
            value: 'tts-1',
          },
        ]
      },
      {
        name: 'ElevenLabs',
        tooltip: __('Missing ElevenLabs API key'),
        is_available: option.elevenlabs.api_key is defined and option.elevenlabs.api_key is not empty,
        models: [
          {
            name: 'Multilingual v2',
            value: 'eleven_multilingual_v2',
          },
          {
            name: 'Turbo v2.5',
            value: 'eleven_turbo_v2_5',
          },
          {
            name: 'Multilingual v1',
            value: 'eleven_multilingual_v1',
          },
          {
            name: 'Monolingual v1',
            value: 'eleven_monolingual_v1',
          },
        ]
      },
      {
        name: 'Google',
        tooltip: __('Missing Google TTS credentials'),
        is_available: option.gcp.credentials is defined and option.gcp.credentials is not empty,
        models: [
          {
            name:  'Google TTS Standard',
            value: 'google-tts-standard',
          },
          {
            name:  'Google TTS Studio',
            value: 'google-tts-studio',
          },
          {
            name:  'Google TTS Premium',
            value: 'google-tts-premium',
          },
        ]
      },
      {
        name: 'Azure',
        tooltip: __('Missing OpenAI API key'),
        is_available: option.azure.speech is defined and option.azure.speech is not empty, 
        models: [
          {
            name: 'Azure TTS',
            value: 'azure-tts',
          },
        ]
      },
    ]
  }
] %}

{% 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 gap-1 items-center 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 justify-between items-center p-3 rounded-lg bg-intermediate">
          {{ p__('label', 'Status') }}

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

            <span
              class="block relative w-10 h-6 rounded-3xl transition-all bg-line peer-checked:bg-success 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 justify-between items-center p-3 rounded-lg bg-intermediate">
          {{ p__('label', 'Featured plan') }}

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

            <span
              class="block relative w-10 h-6 rounded-3xl transition-all bg-line peer-checked:bg-success 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 gap-2 items-center">
            <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 gap-1 items-center">
                <span class="badge">
                  {{ __('Recurring') }}
                </span>

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

            <template x-if="model.billing_cycle == 'yearly'">
              <span class="flex gap-1 items-center">
                <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="pr-11 mt-2 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 right-3 top-1/2 text-sm font-medium -translate-y-1/2 pointer-events-none text-content-dimmed">{{ currency.code }}</code>
          </div>
        </div>

        <div>
          <label for="credit-count" class="flex gap-2 items-center">
            <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 gap-1 items-center">
                <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 gap-4 items-center cursor-pointer box hover:border-line">
            <div>
              <div class="flex gap-2 items-center 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="block relative w-10 h-6 rounded-3xl transition-all bg-line peer-checked:bg-success 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 gap-4 items-center cursor-pointer box hover:border-line">
            <div>
              <div class="flex gap-2 items-center 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="block relative w-10 h-6 rounded-3xl transition-all bg-line peer-checked:bg-success 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 gap-4 items-center cursor-pointer box hover:border-line">
            <div>
              <div class="flex gap-2 items-center 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="block relative w-10 h-6 rounded-3xl transition-all bg-line peer-checked:bg-success 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 gap-4 items-center cursor-pointer box hover:border-line">
            <div>
              <div class="flex gap-2 items-center 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="block relative w-10 h-6 rounded-3xl transition-all bg-line peer-checked:bg-success 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 gap-4 items-center cursor-pointer box hover:border-line">
            <div>
              <div class="flex gap-2 items-center 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="block relative w-10 h-6 rounded-3xl transition-all bg-line peer-checked:bg-success 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 gap-4 items-center cursor-pointer box hover:border-line">
            <div>
              <div class="flex gap-2 items-center 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="block relative w-10 h-6 rounded-3xl transition-all bg-line peer-checked:bg-success 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 gap-4 items-center cursor-pointer box hover:border-line">
            <div>
              <div class="flex gap-2 items-center label">
                {{ p__('heading', 'Voice isolator') }}

                {% if option.features.voice_isolator.is_enabled is not defined or option.features.voice_isolator.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__('voice-isolator-tool-description', 'Isolate voice from background noise.')  }}
              </p>
            </div>

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

              <span
                class="block relative w-10 h-6 rounded-3xl transition-all bg-line peer-checked:bg-success 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 gap-4 items-center cursor-pointer box hover:border-line">
            <div>
              <div class="flex gap-2 items-center label">
                {{ p__('heading', 'Classifier') }}

                {% if option.features.classifier.is_enabled is not defined or option.features.classifier.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__('classifier-tool-description', 'Classify content as potentially harmful across several categories.')  }}
              </p>
            </div>

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

              <span
                class="block relative w-10 h-6 rounded-3xl transition-all bg-line peer-checked:bg-success 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', 'Capabilities') }}</h2>

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

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

                <div class="font-normal text-content-dimmed">
                  {{ __('Chat with PDF, Doc and other text based documents') }}
                </div>
              </div>

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

                <span
                  class="block relative w-10 h-6 rounded-3xl transition-all bg-line peer-checked:bg-success 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 gap-4 items-center cursor-pointer box hover:border-line">
              <div>
                <div class="flex gap-2 items-center text-sm">
                  {{ __('Google search') }}

                  {% if option.serper.api_key is not defined or option.serper.api_key is empty %}
                  <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                    x-tooltip.raw="{{ __('Missing Serper API key') }}"></i>
                  {% elseif option.features.tools.google_search.is_enabled is not defined or option.features.tools.google_search.is_enabled == false %}
                  <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                    x-tooltip.raw="{{ __('Feature is disabled globally') }}"></i>
                  {% endif %}
                </div>

                <div class="font-normal text-content-dimmed">
                  {{ __('Search with Serper API') }}
                </div>
              </div>

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

                <span
                  class="block relative w-10 h-6 rounded-3xl transition-all bg-line peer-checked:bg-success 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 gap-4 items-center cursor-pointer box hover:border-line">
              <div>
                <div class="flex gap-2 items-center text-sm">
                  {{ __('Web browsing') }}

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

                <div class="font-normal text-content-dimmed">
                  {{ __('Scrap web pages for information') }}
                </div>
              </div>

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

                <span
                  class="block relative w-10 h-6 rounded-3xl transition-all bg-line peer-checked:bg-success 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 gap-4 items-center cursor-pointer box hover:border-line">
              <div>
                <div class="flex gap-2 items-center text-sm">
                  {{ __('Image generation') }}

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

                <div class="font-normal text-content-dimmed">
                  {{ __('Generate images based on prompts') }}
                </div>
              </div>

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

                <span
                  class="block relative w-10 h-6 rounded-3xl transition-all bg-line peer-checked:bg-success 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 gap-4 items-center cursor-pointer box hover:border-line">
              <div>
                <div class="flex gap-2 items-center text-sm">
                  {{ __('Cohere web search') }}

                  {% if option.cohere.api_key is not defined or option.cohere.api_key is empty %}
                  <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                    x-tooltip.raw="{{ __('Missing Cohere API key') }}"></i>
                  {% elseif option.features.tools.cohere_web_search.is_enabled is not defined or option.features.tools.cohere_web_search.is_enabled == false %}
                  <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                    x-tooltip.raw="{{ __('Feature is disabled globally') }}"></i>
                  {% endif %}
                </div>

                <div class="font-normal text-content-dimmed">
                  {{ __('Feature is available only for Cohere models.') }}

                  <div class="mt-2 text-content">
                    {{ __('When enabled, only Cohere specific capabilities will be available.') }}
                  </div>
                </div>
              </div>

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

                <span
                  class="block relative w-10 h-6 rounded-3xl transition-all bg-line peer-checked:bg-success 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'">
        <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 gap-2 items-center">
                {{ 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-4o-mini">
                  GPT-4o mini
                </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-5-sonnet-20240620">
                  Anthropic / Claude 3.5 Sonnet
                </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>

                <option value="command-r-plus">
                  Cohere / Command R+
                </option>

                <option value="command-r">
                  Cohere / Command R
                </option>

                <option value="command">
                  Cohere / Command
                </option>

                <option value="command-light">
                  Cohere / Command Light
                </option>
              </select>
            </div>

            <div>
              <label class="flex gap-2 items-center">
                {{ 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-4o-mini">
                  GPT-4o mini
                </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-5-sonnet-20240620">
                  Anthropic / Claude 3.5 Sonnet
                </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>

                <option value="command-r-plus">
                  Cohere / Command R+
                </option>

                <option value="command-r">
                  Cohere / Command R
                </option>

                <option value="command">
                  Cohere / Command
                </option>

                <option value="command-light">
                  Cohere / Command Light
                </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-4o-mini">
                  GPT-4o mini
                </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-5-sonnet-20240620">
                  Anthropic / Claude 3.5 Sonnet
                </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>

                <option value="command-r-plus">
                  Cohere / Command R+
                </option>

                <option value="command-r">
                  Cohere / Command R
                </option>

                <option value="command">
                  Cohere / Command
                </option>

                <option value="command-light">
                  Cohere / Command Light
                </option>
              </select>
            </div>

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

              <select class="mt-2 input" x-model="model.config.embedding_model">
                <option value="text-embedding-ada-002">
                  OpenAI / Ada v2
                </option>

                <option value="text-embedding-3-small">
                  OpenAI / Text Embedding 3 Small
                </option>

                <option value="text-embedding-3-large">
                  OpenAI / Text Embedding 3 Large
                </option>
              </select>

              <ul class="flex flex-col gap-1 mt-3 text-xs text-content-dimmed">
                <li>
                  {{ __('Selected model will be used for File Insight capability') }}
                </li>
              </ul>
            </div>
          </div>

          {% for group in models %}
          <hr class="my-2">

          <h3 class="flex gap-2 items-center">
            {{ group.heading }}

            {# <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">
            {% for provider in group.providers %}
            {% for model in provider.models %}
            <label
              class="flex gap-4 items-center cursor-pointer box hover:border-line">
              <div>
                <div class="flex gap-2 items-center text-sm">
                  {{ model.name }}

                  {% if provider.is_available == false %}
                  <i class="text-base ti ti-alert-square-rounded-filled text-failure"
                    x-tooltip.raw="{{ provider.tooltip }}"></i>
                  {% endif %}
                </div>

                <div class="font-normal text-content-dimmed">{{ provider.name }}
                </div>
              </div>

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

                <span
                  class="block relative w-10 h-6 rounded-3xl transition-all bg-line peer-checked:bg-success 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>
            {% endfor %}
            {% endfor %}
          </div>
          {% endfor %}
        </section>
      </template>

      <template x-if="model.billing_cycle != 'one-time'">
        <section class="flex flex-col gap-6 box" data-density="comfortable"
          x-init="model.config.assistants !== null ? fetchAssistants() : null">
          <h2 class="md:col-span-2">{{ p__('heading', 'Assistants') }}</h2>

          <div class="flex gap-2 items-center p-3 rounded-lg bg-intermediate">
            {{ p__('label', 'All assistants') }}

            <template
              x-if="model.config.assistants !== null && assistants == null">
              {% include "snippets/spinner.twig" %}
            </template>

            <label
              class="inline-flex gap-2 items-center ml-auto cursor-pointer">
              <input type="checkbox" name="status" class="hidden peer"
                :checked="model.config.assistants === null"
                @change="fetchAssistants(); model.config.assistants = $el.checked ? null : []">

              <span
                class="block relative w-10 h-6 rounded-3xl transition-all bg-line peer-checked:bg-success 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>
            </label>
          </div>

          <template
            x-if="model.config.assistants != null && assistants != null">
            <div class="grid gap-6 md:grid-cols-2">
              <template x-for="assistant in assistants" :key="assistant.id">
                <label class="flex gap-3 items-center text-sm box">
                  <div class="avatar">
                    <template x-if="!assistant.avatar">
                      <span
                        x-text="assistant.name.match(/(\b\S)?/g).join('').slice(0, 2)">
                      </span>
                    </template>

                    <template x-if="assistant.avatar">
                      <img :src="assistant.avatar"
                        :alt="assistant.name.match(/(\b\S)?/g).join('').slice(0, 2)">
                    </template>
                  </div>

                  <div>
                    <div class="font-bold" x-text="assistant.name"></div>
                    <template x-if="assistant.expertise">
                      <div class="text-content-dimmed"
                        x-text="assistant.expertise"></div>
                    </template>
                  </div>

                  <input type="checkbox" class="hidden peer"
                    :value="assistant.id" x-model="model.config.assistants"
                    :checked="model.config.assistants != null && model.config.assistants.includes(assistant.id)">

                  <i
                    class="hidden ml-auto ti ti-square-rounded-check-filled peer-checked:inline"></i>

                  <i
                    class="ml-auto ti ti-square-rounded peer-checked:hidden"></i>
                </label>
              </template>
            </div>
          </template>
        </section>
      </template>

      <template x-if="model.billing_cycle != 'one-time'">
        <section class="flex flex-col gap-6 box" data-density="comfortable"
          x-init="model.config.presets !== null ? fetchPresets() : null">
          <h2 class="md:col-span-2">{{ p__('heading', 'Templates') }}</h2>

          <div class="flex gap-2 items-center p-3 rounded-lg bg-intermediate">
            {{ p__('label', 'All templates') }}

            <template x-if="model.config.presets !== null && presets == null">
              {% include "snippets/spinner.twig" %}
            </template>

            <label
              class="inline-flex gap-2 items-center ml-auto cursor-pointer">
              <input type="checkbox" name="status" class="hidden peer"
                :checked="model.config.presets === null"
                @change="fetchPresets(); model.config.presets = $el.checked ? null : []">

              <span
                class="block relative w-10 h-6 rounded-3xl transition-all bg-line peer-checked:bg-success 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>
            </label>
          </div>

          <template x-if="model.config.presets != null && presets != null">
            <div class="grid gap-6 md:grid-cols-2">
              <template x-for="preset in presets" :key="preset.id">
                <label class="flex gap-3 items-center text-sm box">
                  <div class="avatar"
                    :style="{backgroundColor: preset.color, color: '#fff'}">

                    <template x-if="!preset.image">
                      <span
                        x-text="preset.title.match(/(\b\S)?/g).join('').slice(0, 2)">
                      </span>
                    </template>

                    <template
                      x-if="preset.image && preset.image.startsWith('<svg')">
                      <div x-html="preset.image"></div>
                    </template>

                    <template
                      x-if="preset.image && !preset.image.startsWith('<svg')">
                      <i class="ti" :class='`ti-${preset.image}`'></i>
                    </template>
                  </div>

                  <div>
                    <div class="font-bold" x-text="preset.title"></div>
                    <template x-if="preset.expertise">
                      <div class="text-content-dimmed"
                        x-text="preset.category?.title"></div>
                    </template>
                  </div>

                  <input type="checkbox" class="hidden peer" :value="preset.id"
                    x-model="model.config.presets"
                    :checked="model.config.presets != null && model.config.presets.includes(preset.id)">

                  <i
                    class="hidden ml-auto ti ti-square-rounded-check-filled peer-checked:inline"></i>

                  <i
                    class="ml-auto ti ti-square-rounded peer-checked:hidden"></i>
                </label>
              </template>
            </div>
          </template>
        </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 gap-1 items-center">
                <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 gap-4 justify-end">
      <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 %}