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

{% 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 %}
plansnapshot({{ plan_snapshot|json_encode }})
{% endset %}

{% block title p__('title', 'Plan snapshot details')|title %}

{% block template %}
<div class="flex flex-col gap-8">
  <div>
    {% include "snippets/back.twig" with {link: 'admin', label: 'Dashboard'} %}

    <h1 class="mt-4">
      {{ p__('heading', 'Plan snapshot') }}:

      <span class="font-normal text-intermediate-content"
        x-text="snapshot.title">
      </span>
    </h1>

    <div class="mt-2">
      <x-uuid x-text="snapshot.id"></x-uuid>
    </div>
  </div>

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

          <p class="text-sm text-content-dimmed">
            {{ __('Snapshot created on %s', '<x-time :datetime="snapshot.created_at"></x-time>')|raw }}
          </p>
        </div>

        <button type="button" class="button button-sm button-outline"
          @click="modal.open('confirm-modal')">
          {{ p__('button', 'Resync') }}
        </button>
      </div>

      <div class="flex flex-col gap-6">
        <div class="flex flex-wrap gap-6 items-center">
          <div class="w-40 min-w-min">
            <div class="label">{{ p__('label', 'Original plan') }}</div>
            <div>
              <template x-if="snapshot.plan">
                <a :href="`admin/plans/${snapshot.plan.id}`"
                  class="inline-flex gap-1 items-center group">
                  <span class="group-hover:underline"
                    x-text="snapshot.plan.title"></span>
                  <i
                    class="text-base ti ti-corner-right-up text-content-dimmed"></i>
                </a>
              </template>

              <template x-if="!snapshot.plan">
                <span class="text-content-dimmed">{{ __('Deleted') }}</span>
              </template>
            </div>
          </div>

          <div class="w-40 min-w-min">
            <div class="label">
              {{ p__('label', 'Plan type') }}
            </div>

            <template x-if="snapshot.billing_cycle == 'monthly'">
              <div>{{ __('Monthly') }}</div>
            </template>

            <template x-if="snapshot.billing_cycle == 'yearly'">
              <div>{{ __('Yearly') }}</div>
            </template>

            <template x-if="snapshot.billing_cycle == 'lifetime'">
              <div>{{ __('Lifetime') }}</div>
            </template>

            <template x-if="snapshot.billing_cycle == 'one-time'">
              <div>{{ __('Add-on credits') }}</div>
            </template>
          </div>

          <div class="w-40 min-w-min">
            <div class="label"
              x-text="snapshot.billing_cycle == 'one-time' ? `Add-on credits` : `{{ p__('label', 'Monthly credits') }}`">
            </div>

            <x-credit :data-value="snapshot.credit_count"></x-credit>
          </div>
        </div>

        <hr>

        <div>
          <div>
            <div class="label">
              {{ p__('label', 'Price') }}
            </div>

            <div>
              <span x-text="snapshot.price"></span>
            </div>

            <div class="mt-4">
              <div class="flex gap-1 items-center text-sm font-bold">
                <i class="text-lg ti ti-info-square-rounded"></i>
                {{ __('Important') }}
              </div>

              <p class="mt-2 text-sm">
                {{ __('The displayed price here is in minor units. The actual price is calculated at the time of order creation, taking into account this value and the billing currency specified in the billing settings.') }}
              </p>
            </div>
          </div>
        </div>

        <template x-if="snapshot.description">
          <hr>
        </template>

        <template x-if="snapshot.description">
          <div>
            <div class="label">{{ p__('label', 'Description') }}</div>
            <div x-text="snapshot.description">
            </div>
          </div>
        </template>
      </div>
    </section>

    <template x-if="snapshot.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-auto box">
          <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" disabled
              x-model="snapshot.config.writer.is_enabled">

            <span
              class="block relative w-10 h-6 rounded-3xl opacity-50 pointer-events-none 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:rounded-full after:bg-white peer-checked:after:left-4"></span>
          </div>
        </label>

        <label class="flex gap-4 items-center cursor-auto box">
          <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" disabled
              x-model="snapshot.config.coder.is_enabled">

            <span
              class="block relative w-10 h-6 rounded-3xl opacity-50 pointer-events-none 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:rounded-full after:bg-white peer-checked:after:left-4"></span>
          </div>
        </label>

        <label class="flex gap-4 items-center cursor-auto box">
          <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" disabled
              x-model="snapshot.config.imagine.is_enabled">

            <span
              class="block relative w-10 h-6 rounded-3xl opacity-50 pointer-events-none 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:rounded-full after:bg-white peer-checked:after:left-4"></span>
          </div>
        </label>

        <label class="flex gap-4 items-center cursor-auto box">
          <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" disabled
              x-model="snapshot.config.transcriber.is_enabled">

            <span
              class="block relative w-10 h-6 rounded-3xl opacity-50 pointer-events-none 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:rounded-full after:bg-white peer-checked:after:left-4"></span>
          </div>
        </label>

        <label class="flex gap-4 items-center cursor-auto box">
          <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" disabled
              x-model="snapshot.config.voiceover.is_enabled">

            <span
              class="block relative w-10 h-6 rounded-3xl opacity-50 pointer-events-none 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:rounded-full after:bg-white peer-checked:after:left-4"></span>
          </div>
        </label>

        <label class="flex gap-4 items-center cursor-auto box">
          <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" disabled
              x-model="snapshot.config.chat.is_enabled">

            <span
              class="block relative w-10 h-6 rounded-3xl opacity-50 pointer-events-none 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:rounded-full after:bg-white peer-checked:after:left-4"></span>
          </div>
        </label>

        <label class="flex gap-4 items-center cursor-auto box">
          <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" disabled
              x-model="snapshot.config.voice_isolator.is_enabled">

            <span
              class="block relative w-10 h-6 rounded-3xl opacity-50 pointer-events-none 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:rounded-full after:bg-white peer-checked:after:left-4"></span>
          </div>
        </label>

        <label class="flex gap-4 items-center cursor-auto box">
          <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" disabled
              x-model="snapshot.config.classifier.is_enabled">

            <span
              class="block relative w-10 h-6 rounded-3xl opacity-50 pointer-events-none 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:rounded-full after:bg-white peer-checked:after:left-4"></span>
          </div>
        </label>
      </section>
    </template>

    <template x-if="snapshot.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-auto box">
            <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="google_search"
                x-model="snapshot.config.tools['embedding_search']" disabled>

              <span
                class="block relative w-10 h-6 rounded-3xl opacity-50 pointer-events-none 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:rounded-full after:bg-white peer-checked:after:left-4"></span>
            </div>
          </label>

          <label class="flex gap-4 items-center cursor-auto box">
            <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="snapshot.config.tools['google_search']" disabled>

              <span
                class="block relative w-10 h-6 rounded-3xl opacity-50 pointer-events-none 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:rounded-full after:bg-white peer-checked:after:left-4"></span>
            </div>
          </label>

          <label class="flex gap-4 items-center cursor-auto box">
            <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="snapshot.config.tools['web_scrap']" disabled>

              <span
                class="block relative w-10 h-6 rounded-3xl opacity-50 pointer-events-none 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:rounded-full after:bg-white peer-checked:after:left-4"></span>
            </div>
          </label>

          <label class="flex gap-4 items-center cursor-auto box">
            <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="snapshot.config.tools['generate_image']" disabled>

              <span
                class="block relative w-10 h-6 rounded-3xl opacity-50 pointer-events-none 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:rounded-full after:bg-white peer-checked:after:left-4"></span>
            </div>
          </label>

          <label class="flex gap-4 items-center cursor-auto box">
            <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"
                x-model="snapshot.config.tools['cohere_web_search']"
                value="cohere_web_search" disabled>

              <span
                class="block relative w-10 h-6 rounded-3xl opacity-50 pointer-events-none 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:rounded-full after:bg-white peer-checked:after:left-4"></span>
            </div>
          </label>
        </div>
      </section>
    </template>

    <template x-if="snapshot.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="!snapshot.config.writer.is_enabled" x-cloak
                x-tooltip.raw="{{ __('Writer tool is disabled') }}"></i>
            </label>

            <select class="mt-2 input" x-model="snapshot.config.writer.model"
              disabled>
              <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="!snapshot.config.coder.is_enabled" x-cloak
                x-tooltip.raw="{{ __('Coder tool is disabled') }}"></i>
            </label>

            <select class="mt-2 input" x-model="snapshot.config.coder.model"
              disabled>
              <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="snapshot.config.titler.model"
              disabled>
              <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="snapshot.config.embedding_model"
              disabled>
              <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-auto box">
            <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"
                  disabled 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="snapshot.config.models['{{ model.value }}']">

              <span
                class="block relative w-10 h-6 rounded-3xl opacity-50 pointer-events-none 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:rounded-full after:bg-white peer-checked:after:left-4"></span>
            </div>
          </label>
          {% endfor %}
          {% endfor %}
        </div>
        {% endfor %}
      </section>
    </template>

    <template x-if="snapshot.billing_cycle != 'one-time'">
      <section class="flex flex-col gap-6 box" data-density="comfortable"
        x-init="snapshot.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="snapshot.config.assistants !== null && assistants == null">
            {% include "snippets/spinner.twig" %}
          </template>

          <label class="inline-flex gap-2 items-center ml-auto cursor-auto">
            <input type="checkbox" name="status" class="hidden peer" disabled
              :checked="snapshot.config.assistants === null">

            <span
              class="block relative w-10 h-6 rounded-3xl opacity-50 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="snapshot.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 cursor-auto 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"
                  disabled
                  :checked="snapshot.config.assistants != null && snapshot.config.assistants.includes(assistant.id)">

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

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

    <template x-if="snapshot.billing_cycle != 'one-time'">
      <section class="flex flex-col gap-6 box" data-density="comfortable"
        x-init="snapshot.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="snapshot.config.presets !== null && presets == null">
            {% include "snippets/spinner.twig" %}
          </template>

          <label class="inline-flex gap-2 items-center ml-auto cursor-auto">
            <input type="checkbox" name="status" class="hidden peer" disabled
              :checked="snapshot.config.presets === null">

            <span
              class="block relative w-10 h-6 rounded-3xl opacity-50 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="snapshot.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 cursor-auto 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"
                  disabled
                  :checked="snapshot.config.presets != null && snapshot.config.presets.includes(preset.id)">

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

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

    <template x-if="orders.length > 0">
      <section class="flex flex-col gap-6 box" data-density="comfortable">
        <div class="flex gap-2 items-center">
          <h2>{{ p__('heading', 'Latest orders') }}</h2>

          <a class="badge"
            :href="`admin/orders?plan_snapshot=${snapshot.id}&sort=created_at:desc`">
            {{ p__('button', 'View all') }}
          </a>
        </div>

        <div>
          <div
            class="hidden md:grid grid-cols-12 gap-3 items-center px-3 py-2 text-content-dimmed text-xs group-data-[state=empty]/list:hidden">
            <div class="col-span-3">{{ p__('label', 'Order') }}</div>
            <div class="col-span-2">{{ p__('label', 'Status') }}</div>
            <div class="col-span-2">{{ p__('label', 'Credits') }}</div>
            <div class="col-span-2">{{ p__('label', 'Total') }}</div>
            <div class="col-span-2">{{ p__('label', 'Created') }}</div>
            <div class="col-span-1"></div>
          </div>

          <ul
            class="text-sm flex flex-col gap-1 group-data-[state=empty]:hidden">
            <template x-for="order in orders" :key="order.id">
              <li
                class="grid relative grid-cols-12 gap-3 items-center p-3 box hover:border-line"
                x-data>
                <a :href="`admin/orders/${order.id}`"
                  class="absolute top-0 left-0 w-full h-full cursor-pointer"></a>

                <div class="flex col-span-11 gap-3 items-center md:col-span-3">
                  <div>
                    <div class="flex gap-2 items-center">
                      <div class="flex items-center">
                        <span class="font-bold"
                          x-text="order.plan.title"></span>

                        <i
                          class="ti ti-direction-horizontal text-content-dimmed"></i>

                        <template x-if="order.plan.billing_cycle == 'monthly'">
                          <span>{{ p__('billing-cycle', 'Monthly') }}</span>
                        </template>

                        <template x-if="order.plan.billing_cycle == 'yearly'">
                          <span>{{ p__('billing-cycle', 'Yearly') }}</span>
                        </template>

                        <template x-if="order.plan.billing_cycle == 'lifetime'">
                          <span>{{ p__('billing-cycle', 'Lifetime') }}</span>
                        </template>

                        <template x-if="order.plan.billing_cycle == 'one-time'">
                          <span>{{ p__('billing-cycle', 'Add-on credit') }}</span>
                        </template>
                      </div>
                    </div>

                    <div class="mt-0.5 text-xs text-content-dimmed">
                      {% set name %}
                      <a :href="`admin/workspaces/${order.workspace.id}`"
                        x-text="order.workspace.name"
                        class="relative hover:underline text-content"></a>
                      {% endset %}

                      {{ __('Workspace: :name')|replace({':name' : name})|raw }}
                    </div>
                  </div>
                </div>

                <div class="hidden md:block md:col-span-2">
                  <template x-if="order.status == 'completed'">
                    <span>{{ p__('order-status', 'Completed') }}</span>
                  </template>

                  <template x-if="order.status == 'pending'">
                    <span>{{ p__('order-status', 'Pending') }}</span>
                  </template>

                  <template x-if="order.status == 'failed'">
                    <span>{{ p__('order-status', 'Failed') }}</span>
                  </template>
                </div>

                <div class="hidden md:block md:col-span-2">
                  <x-credit :data-value="order.plan.credit_count"></x-credit>
                </div>

                <div class="hidden md:block md:col-span-2">
                  <div class="font-bold">
                    <x-money :data-value="order.total"
                      :currency="order.currency.code"
                      :minor-units="order.currency.fraction_digits"></x-money>
                  </div>

                  <div class="mt-0.5 text-xs text-content-dimmed"
                    x-text="order.plan.billing_cycle == 'monthly' ? `{{ __('per month') }}` : order.plan.billing_cycle == 'yearly' ? `{{ __('per year') }}` : `{{ __('one-time') }}`">
                  </div>
                </div>

                <div class="hidden md:block md:col-span-2">
                  <x-time :datetime="order.created_at"
                    data-type="date"></x-time>
                </div>

                <div class="col-span-1 justify-self-end">
                  <div class="relative"
                    @click.outside="$refs.context.removeAttribute('data-open')">

                    <button class="relative z-10"
                      @click="$refs.context.toggleAttribute('data-open')">
                      <i
                        class="ti ti-dots-vertical text-content-dimmed hover:text-intermediate-content"></i>
                    </button>

                    <div class="menu" x-ref="context">
                      <ul>
                        <li>
                          <a :href="`admin/orders/${order.id}`"
                            class="flex gap-2 items-center px-4 py-2 hover:no-underline hover:bg-intermediate">
                            {{ p__('button', 'Details') }}
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </li>
            </template>
          </ul>
        </div>
      </section>
    </template>
  </div>
</div>

<modal-element name="confirm-modal">
  <form class="flex flex-col gap-8 modal" @submit.prevent="resync">
    <div class="flex justify-between items-center">
      <h2 class="text-xl">{{ p__('heading', 'Confirmation') }}</h2>

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

    <div>
      <div class="flex gap-1 items-center text-sm font-bold">
        <i class="text-lg ti ti-info-square-rounded"></i>
        {{ __('Important') }}
      </div>

      <p class="mt-2 text-sm">
        {{ __('This action will resync the snapshot configuration with the latest plan configuration. All subscriptions on this plan snapshot will have their configuration updated to the latest configuration. Price and billing cycle changes will not be applied.') }}
      </p>
    </div>

    <div class="flex items-center">
      <button class="w-full button" type="submit" :processing="isProcessing">
        {% include "/snippets/spinner.twig" %}

        {{ p__('button', 'Resync configuration') }}
      </button>
    </div>
  </form>
</modal-element>
{% endblock %}