{% extends "/layouts/main.twig" %}
{% set active_menu = 'settings' %}

{% set sections = [
  {
    heading: 'OpenAI',
    groups: [
      [
        {
          model: 'gpt-4o-input',
          label: 'gpt-4o',
          badge: __('Input token'),
          unit: __('Token'),
          info: __("1 Credit = :count tokens"),
          placeholder: '0.00000625'
        },
        {
          model: 'gpt-4o-output',
          label: 'gpt-4o',
          badge: __('Output token'),
          unit: __('Token'),
          info: __("1 Credit = :count tokens"),
          placeholder: '0.00001875'
        },
        {
          model: 'gpt-4-turbo-input',
          label: 'gpt-4-turbo',
          badge: __('Input token'),
          unit: __('Token'),
          info: __("1 Credit = :count tokens"),
          placeholder: '0.00125'
        },
        {
          model: 'gpt-4-turbo-output',
          label: 'gpt-4-turbo',
          badge: __('Output token'),
          unit: __('Token'),
          info: __("1 Credit = :count tokens"),
          placeholder: '0.00375'
        },
        {
          model: 'gpt-4-input',
          label: 'gpt-4',
          badge: __('Input token'),
          unit: __('Token'),
          info: __("1 Credit = :count tokens"),
          placeholder: '0.00375'
        },
        {
          model: 'gpt-4-output',
          label: 'gpt-4',
          badge: __('Output token'),
          unit: __('Token'),
          info: __("1 Credit = :count tokens"),
          placeholder: '0.0075'
        },
        {
          model: 'gpt-3.5-turbo-input',
          label: 'gpt-3.5-turbo',
          badge: __('Input token'),
          unit: __('Token'),
          info: __("1 Credit = :count tokens"),
          placeholder: '0.0000625'
        },
        {
          model: 'gpt-3.5-turbo-output',
          label: 'gpt-3.5-turbo',
          badge: __('Output token'),
          unit: __('Token'),
          info: __("1 Credit = :count tokens"),
          placeholder: '0.0001875'
        },
        {
          model: 'gpt-3.5-turbo-instruct-input',
          label: 'gpt-3.5-turbo-instruct',
          badge: __('Input token'),
          unit: __('Token'),
          info: __("1 Credit = :count tokens"),
          placeholder: '0.0001875'
        },
        {
          model: 'gpt-3.5-turbo-instruct-output',
          label: 'gpt-3.5-turbo-instruct',
          badge: __('Output token'),
          unit: __('Token'),
          info: __("1 Credit = :count tokens"),
          placeholder: '0.00025'
        }
      ],

      [
        {
          model: 'dall-e-3-standard-1024',
          label: 'DALL·E 3',
          badge: __('Standard, 1024×1024'),
          unit: __('Image'),
          info: __("1 Credit = :count images"),
          placeholder: '5'
        },
        {
          model: 'dall-e-3-standard-1792',
          label: 'DALL·E 3',
          badge: __('Standard, 1024x1792, 1792x1024'),
          unit: __('Image'),
          info: __("1 Credit = :count images"),
          placeholder: '10'
        },
        {
          model: 'dall-e-3-hd-1024',
          label: 'DALL·E 3',
          badge: __('HD, 1024×1024'),
          unit: __('Image'),
          info: __("1 Credit = :count images"),
          placeholder: '10'
        },
        {
          model: 'dall-e-3-hd-1792',
          label: 'DALL·E 3',
          badge: __('HD, 1024x1792, 1792x1024'),
          unit: __('Image'),
          info: __("1 Credit = :count images"),
          placeholder: '15'
        },
      ],

      [
        {
          model: 'dall-e-2-1024',
          label: 'DALL·E 2',
          badge: __('1024×1024'),
          unit: __('Image'),
          info: __("1 Credit = :count images"),
          placeholder: '2.5'
        },
        {
          model: 'dall-e-2-512',
          label: 'DALL·E 2',
          badge: __('512×512'),
          unit: __('Image'),
          info: __("1 Credit = :count images"),
          placeholder: '2.25'
        },
        {
          model: 'dall-e-2-256',
          label: 'DALL·E 2',
          badge: __('256×256'),
          unit: __('Image'),
          info: __("1 Credit = :count images"),
          placeholder: '2'
        },
      ],

      [
        {
          model: 'whisper-1',
          label: 'Whisper',
          badge: null,
          unit: __('Seconds'),
          info: __("1 Credit = :count seconds"),
          placeholder: '0.0125'
        }
      ],

      [
        {
          model: 'tts-1',
          label: 'TTS',
          badge: null,
          unit: __('Character'),
          info: __("1 Credit = :count characters"),
          placeholder: '0.001875'
        },

        {
          model: 'tts-1-hd',
          label: 'TTS',
          badge: __('HD'),
          unit: __('Character'),
          info: __("1 Credit = :count characters"),
          placeholder: '0.00375'
        }
      ]
    ]
  },
  
  {
    heading: 'Anthropic / Claude AI',
    groups: [
     [
      {
        model: 'claude-3-haiku-20240307-input',
        label: 'Haiku',
        badge: __('Input token'),
        unit: __('Token'),
        info: __("1 Credit = :count tokens"),
        placeholder: '0.00003125'
      },
      {
        model: 'claude-3-haiku-20240307-output',
        label: 'Haiku',
        badge: __('Output token'),
        unit: __('Token'),
        info: __("1 Credit = :count tokens"),
        placeholder: '0.00015625'
      },
      {
        model: 'claude-3-sonnet-20240229-input',
        label: 'Sonnet',
        badge: __('Input token'),
        unit: __('Token'),
        info: __("1 Credit = :count tokens"),
        placeholder: '0.000375'
      },
      {
        model: 'claude-3-sonnet-20240229-output',
        label: 'Sonnet',
        badge: __('Output token'),
        unit: __('Token'),
        info: __("1 Credit = :count tokens"),
        placeholder: '0.001875'
      },
      {
        model: 'claude-3-opus-20240229-input',
        label: 'Opus',
        badge: __('Input token'),
        unit: __('Token'),
        info: __("1 Credit = :count tokens"),
        placeholder: '0.001875'
      },
      {
        model: 'claude-3-opus-20240229-output',
        label: 'Opus',
        badge: __('Output token'),
        unit: __('Token'),
        info: __("1 Credit = :count tokens"),
        placeholder: '0.009375'
      },
     ] 
    ]
  },
  
  {
    heading: 'ElevenLabs',
    groups: [
     [
      {
        model: 'elevenlabs',
        label: __('All Models'),
        badge: null,
        unit: __('Character'),
        info: __("1 Credit = :count characters"),
        placeholder: '0.020625'
      }
     ] 
    ]
  },

  {
    heading: 'Google',
    groups: [
     [
      {
        model: 'google-tts-standard',
        label: __('Google TTS'),
        badge: __('Standard'),
        unit: __('Character'),
        info: __("1 Credit = :count characters"),
        placeholder: '0.0005'
      },
      {
        model: 'google-tts-studio',
        label: __('Google TTS'),
        badge: __('Studio'),
        unit: __('Byte'),
        info: __("1 Credit = :count bytes"),
        placeholder: '0.02'
      },
      {
        model: 'google-tts-premium',
        label: __('Google TTS'),
        badge: __('Premium'),
        unit: __('Byte'),
        info: __("1 Credit = :count bytes"),
        placeholder: '0.002'
      },
     ] 
    ]
  },

  {
    heading: 'Azure',
    groups: [
     [
      {
        model: 'azure-tts',
        label: __('Azure TTS'),
        badge: null,
        unit: __('Character'),
        info: __("1 Credit = :count characters"),
        placeholder: '0.001875'
      }
     ] 
    ]
  },

  {
    heading: 'StabilityAI',
    groups: [
     [
      {
        model: 'core',
        label: 'Core',
        badge: null,
        unit: __('Image'),
        info: __("1 Credit = :count images"),
        placeholder: '3.75'
      },
      {
        model: 'stable-diffusion-xl-1024-v1-0',
        label: 'SDXL 1.0',
        badge: null,
        unit: __('Image'),
        info: __("1 Credit = :count images"),
        placeholder: '0.75'
      },
      {
        model: 'stable-diffusion-v1-6',
        label: 'SD 1.6',
        badge: null,
        unit: __('Image'),
        info: __("1 Credit = :count images"),
        placeholder: '1.25'
      }
     ] 
    ]
  },

  {
    heading: 'Clipdrop',
    groups: [
     [
      {
        model: 'clipdrop',
        label: __('All Models'),
        badge: null,
        unit: __('Character'),
        info: __("1 Credit = :count characters"),
        placeholder: '62.5'
      }
     ] 
    ]
  },
] %}

{% set xdata = 'settings' %}
{% block title p__('title', 'Credit ratios')|title %}

{% block template %}
<div>
  {% include "snippets/back.twig" with {link: 'admin/settings', label: 'Settings'} %}

  <h1 class="mt-4">{{ p__('heading', 'Credit ratios') }}</h1>
</div>

<x-form>
  <form class="flex flex-col gap-8" @submit.prevent="submit" x-ref="form">
    <div class="flex flex-col gap-2">
      {% for section in sections %}
      <section class="grid grid-cols-2 gap-6 box" data-density="comfortable">
        <h2 class="col-span-2">{{ section.heading }}</h2>

        {% for group in section.groups %}
        {% if loop.index0 > 0 %}
        <hr class="col-span-2">
        {% endif %}

        {% for input in group %}
        <div x-data="{ val: {{ option.credit_rate[input.model] ?? 'null' }} }">
          <label for="{{ input.model }}">
            <span class="uppercase">
              {{ input.label }}
            </span>

            {% if input.badge %}
            <span class="text-content-dimmed">({{ input.badge }})</span>
            {% endif %}
          </label>

          <div
            class="flex mt-2 overflow-hidden text-xs font-bold uppercase border rounded-lg border-line bg bg-intermediate text-intermediate-content-dimmed">
            <div class="flex items-center justify-between px-3 w-28 shrink-0">
              <span>{{ input.unit }}</span>
              <span class="text-base">1</span>
            </div>

            <div
              class="flex items-center pl-3 border-l grow bg-main border-line">
              <span class="shrink-0">{{ p__('label', 'Credit') }}</span>

              <input type="text" id="{{ input.model }}" min="0"
                name="credit_rate[{{ input.model }}]"
                class="text-right border-none input bg-main focus:ring-0 text-content"
                autocomplete="off" placeholder="{{ input.placeholder }}"
                value="{{ option.credit_rate[input.model] ?? '' }}"
                x-mask:dynamic="$money($input, '.', '', 9)" required
                x-model="val" />
            </div>
          </div>

          <div class="h-4 mt-1 text-xs uppercase text-content-dimmed">
            <template x-if="val != 0">
              <span>
                <x-credit :data-value="1/val"
                  format="{{ input.info }}"></x-credit>
              </span>
            </template>
          </div>
        </div>
        {% endfor %}
        {% endfor %}
      </section>
      {% endfor %}
    </div>

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

      <button type="submit" class="button button-accent"
        :processing="isProcessing">
        {% include "/snippets/spinner.twig" %}

        {{ p__('button', 'Save changes') }}
      </button>
    </div>
  </form>
</x-form>
{% endblock %}