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

{% set stableadapter = {
  prompt_length: null,
  negative_prompt: true,
  sizes: [
  ],
  params: [
    {
      label: p__('label', 'Style'),
      model: 'style_preset',
      options: [
        { value: '3d-model', label: p__('art-style', '3d model') },
        { value: 'analog-film', label: p__('art-style', 'Analog film') },
        { value: 'anime', label: p__('art-style', 'Anime') },
        { value: 'cinematic', label: p__('art-style', 'Cinematic') },
        { value: 'comic-book', label: p__('art-style', 'Comic book') },
        { value: 'digital-art', label: p__('art-style', 'Digital art') },
        { value: 'enhance', label: p__('art-style', 'Enhance') },
        { value: 'fantasy-art', label: p__('art-style', 'Fantasy art') },
        { value: 'isometric', label: p__('art-style', 'Isometric') },
        { value: 'line-art', label: p__('art-style', 'Line art') },
        { value: 'low-poly', label: p__('art-style', 'Low poly') },
        { value: 'modeling-compound', label: p__('art-style', 'Modeling compound') },
        { value: 'neon-punk', label: p__('art-style', 'Neon punk') },
        { value: 'origami', label: p__('art-style', 'Origami') },
        { value: 'photographic', label: p__('art-style', 'Photographic') },
        { value: 'pixel-art', label: p__('art-style', 'Pixel art') },
        { value: 'tile-texture', label: p__('art-style', 'Tile texture') }
      ]
    },
    {
      label: p__('label', 'Sampler'),
      model: 'sampler',
      options: [
        { value: 'DDIM', label: 'DDIM' },
        { value: 'DDPM', label: 'DDPM' },
        { value: 'K_DPMPP_2M', label: 'K_DPMPP_2M' },
        { value: 'K_DPMPP_2S_ANCESTRAL', label: 'K_DPMPP_2S_ANCESTRAL' },
        { value: 'K_DPM_2', label: 'K_DPM_2' },
        { value: 'K_DPM_2_ANCESTRAL', label: 'K_DPM_2_ANCESTRAL' },
        { value: 'K_EULER', label: 'K_EULER' },
        { value: 'K_EULER_ANCESTRAL', label: 'K_EULER_ANCESTRAL' },
        { value: 'K_HEUN', label: 'K_HEUN' },
        { value: 'K_LMS', label: 'K_LMS' },
      ]
    },
    {
      label: p__('label', 'Clip Guidance Preset'),
      model: 'clip_guidance_preset',
      options: [
        { value: 'NONE', label: 'NONE' },
        { value: 'FAST_BLUE', label: 'FAST_BLUE' },
        { value: 'FAST_GREEN', label: 'FAST_GREEN' },
        { value: 'SIMPLE', label: 'SIMPLE' },
        { value: 'SLOW', label: 'SLOW' },
        { value: 'SLOWER', label: 'SLOWER' },
        { value: 'SLOWEST', label: 'SLOWEST' }
      ]
    }
  ]
} %}

{% set adapters = [
  {
    is_available: option.openai.api_secret_key is defined and option.openai.api_secret_key is not empty,
    models: [
      {
        model: 'dall-e-3',
        name: 'OpenAI DALL·E 3',
        short_name: 'DALL·E 3',
        prompt_length: 4000,
        negative_prompt: false,
        is_enabled: workspace.subscription.plan.config.models['dall-e-3'] ?? false,
        is_available: option.features.imagine.models is not defined or 'dall-e-3' in option.features.imagine.models,
        sizes: [
          { width: 1024, height: 1024 },
          { width: 1792, height: 1024 },
          { width: 1024, height: 1792 }
        ],
        params: [
          {
            label: p__('label', 'Quality'),
            model: 'quality',
            options: [
              { value: '', label: __('Standard') },
              { value: 'hd', label: __('HD') }
            ]
          },
          {
            label: p__('label', 'Style'),
            model: 'style',
            options: [
              { value: 'vivid', label: __('Vivid') },
              { value: 'natural', label: __('Natural') }
            ]
          }
        ]
      },

      {
        model: 'dall-e-2',
        name: 'OpenAI DALL·E 2',
        short_name: 'DALL·E 2',
        prompt_length: 1000,
        negative_prompt: false,
        is_enabled: workspace.subscription.plan.config.models['dall-e-2'] ?? false,
        is_available: option.features.imagine.models is not defined or 'dall-e-2' in option.features.imagine.models,
        sizes: [
          { width: 256, height: 256 },
          { width: 512, height: 512 },
          { width: 1024, height: 1024 }
        ],
        params: [
        ]
      }
    ]
  },

  {
    is_available: option.stabilityai.api_key is defined and option.stabilityai.api_key is not empty,
    models: [
      stableadapter|merge(
        {
          model: 'stable-diffusion-v1-6',
          name: 'Stable Diffusion v1.6',
          short_name: 'SD 1.6',
          is_enabled: workspace.subscription.plan.config.models['stable-diffusion-v1-6'] ?? false,
          is_available: option.features.imagine.models is not defined or 'stable-diffusion-v1-6' in option.features.imagine.models,
          sizes: [
            { width: 320, height: 320 },
            { width: 640, height: 640 },
            { width: 1280, height: 1280 },
            { width: 1536, height: 1536 },

            { width: 1024, height: 1024 },
            { width: 1152, height: 896 },
            { width: 1216, height: 832 },
            { width: 1344, height: 768 },
            { width: 640, height: 1536 },
            { width: 768, height: 1344 },
            { width: 832, height: 1216 },
            { width: 896, height: 1152 },
          ]
        }
      ),

      stableadapter|merge(
        {
          model: 'stable-diffusion-xl-1024-v1-0',
          name: 'Stable Diffusion XL',
          is_enabled: workspace.subscription.plan.config.models['stable-diffusion-xl-1024-v1-0'] ?? false,
          is_available: option.features.imagine.models is not defined or 'stable-diffusion-xl-1024-v1-0' in option.features.imagine.models,
          short_name: 'SDXL',
          sizes: [
            { width: 1024, height: 1024 },
            { width: 1152, height: 896 },
            { width: 1216, height: 832 },
            { width: 1344, height: 768 },
            { width: 1536, height: 640 },
            { width: 640, height: 1536 },
            { width: 768, height: 1344 },
            { width: 832, height: 1216 },
            { width: 896, height: 1152 },
          ]
        }
      )
    ]
  },

  {
    is_available: option.clipdrop.api_key is defined and option.clipdrop.api_key is not empty,
    models: [
      {
        model: 'clipdrop',
        name: 'Clipdrop',
        short_name: 'Clipdrop',
        prompt_length: 1000,
        negative_prompt: false,
        is_enabled: workspace.subscription.plan.config.models['clipdrop'] ?? false,
        sizes: [
          { width: 1024, height: 1024 },
        ],
        params: [
        ]
      }
    ]
  }
] %}

{% set samples = [
  'With a surreal mix of elegance and eeriness, a kitsune with a glistening golden fur coat stands amidst a dusky forest in a high fashion photograph. The image captures the mystical creature\'s piercing amber eyes and sleek, shimmering tails, as it exudes an aura of ancient power and enigmatic allure. Every detail, from the intricate patterns on its fur to the hauntingly beautiful surroundings, is rendered with impeccable precision and depth, creating a mesmerizing and unforgettable visual experience.',
  'A magnificently garish sorcerer, their ostentatious costume adorned with gaudy jewels and shimmering fabrics, exudes an air of opulent tackiness mixed with undeniable power. Picture a surreal photograph capturing the sorcerer in a dramatic pose, bathed in ethereal lighting that highlights every intricate detail of their over-the-top ensemble. The image radiates with a vividness that practically leaps off the page, showcasing the intricate craftsmanship and extravagance of the subject with dazzling clarity.',
  'In the misty embrace of a moonlit forest, a bewildering bizarre centaur emerges: half man, half equine, adorned in vibrant bohemian attire. This enigmatic being is captured in a hauntingly beautiful photograph, where every detail is sharp and mesmerizing. The centaur\'s human-like torso is covered in intricate tattoos that seem to come alive in the dim light, while its equine half boasts a luxurious mane and tail that shimmer with otherworldly colors. The background is a dreamlike blur of ancient trees and ethereal wisps of fog, adding to the mystical atmosphere of the scene. Its eyes hold a spark of wild magic, inviting viewers into a world of enchantment and wonder.',
  'A mystifying and ethereal mauve-tinted dimensional drifter, appearing as a translucent entity traversing multiple planes of existence. This mesmerizing figure is captured in a stunningly detailed digital painting, showcasing intricate patterns and swirls of energy that seem to dance around the enigmatic being. The artist\'s masterful use of light and shadow creates a sense of depth and movement, making the drifter appear both otherworldly and strangely familiar. The overall composition is a breathtaking display of imagination and skill, drawing the viewer into a realm of wonder and possibility.',
  'Ethereally gliding through a celestial realm, the elysian timeless void voyager floats serenely amidst swirling nebulae and shimmering star clusters. This concept art painting captures the awe-inspiring beauty of an otherworldly being in a state of graceful motion. The colors are vivid and luminescent, creating a sense of transcendence and wonder. The intricate details of the voyager\'s celestial robes and radiant aura are rendered with exquisite precision, making the viewer feel as though they are witnessing a truly divine being. The overall atmosphere is one of pure, celestial tranquility, inviting the viewer to contemplate the mysteries of the universe.',

  'A watercolor illustration of a magical forest with glowing fireflies',
  'A sketch of a wizard riding a unicorn through a rainbow',
  'A surrealistic oil painting of a flying fish with butterfly wings',
  'A collage of vintage photographs forming the shape of a heart',
  'A charcoal drawing of a haunted house on a foggy hill',
  'A digital illustration of a cybernetic mermaid swimming among neon jellyfish',
  'A sculpture of a tree made entirely of recycled plastic bottles',
  'A graffiti mural of a phoenix rising from the ashes on a city wall',
  'A mosaic portrait of Albert Einstein made from computer keys',
  'A cartoon drawing of a superhero squirrel saving the day in a city park',
  'A pop art style painting of Marilyn Monroe using Rubik\'s cubes as pixels',
  'A steampunk-inspired illustration of a mechanical octopus guarding a sunken treasure chest',
  'A minimalist ink sketch of a teacup floating in mid-air',
  'A clay sculpture of a family of penguins sledding down an icy hill',
  'An abstract digital artwork of swirling galaxies merging together',
  'A mixed media piece featuring origami cranes flying over a city skyline at dusk',
  'A caricature drawing of famous historical figures playing poker',
  'A mural of a cosmic elephant spraying galaxies from its trunk onto a starry sky',
  'A digital painting of a futuristic cityscape with flying cars and holographic billboards',
  'A stained glass window depicting scenes from classic fairy tales',
  'A paper-cut silhouette of a jungle scene with wild animals and lush foliage',
  'A chalk drawing of a smiling sun wearing sunglasses on a chalkboard',
  'A mixed media collage of vintage postage stamps forming a map of the world',
  'A sculpture of a phoenix made entirely of melted candle wax',
  'A surrealistic painting of a clock melting over a desert landscape',
  'A watercolor portrait of a cat wearing a crown and holding a scepter',
  'An abstract sculpture representing the concept of time using clock parts',
  'A digital illustration of a cyberpunk city with towering skyscrapers and flying drones',
  'A mosaic of colorful tiles depicting a scene from under the sea',
  'A painting of a dreamy landscape with floating islands and waterfalls made of clouds',
  'A cartoon drawing of a group of animals having a picnic in the park',
  'A sculpture of a dragon made entirely of recycled metal scraps',
  'A digital artwork of a magical library where books come to life at night',
  'A graffiti mural of a giant robot battling a sea monster in the streets',
  'A surrealistic oil painting of a forest where the trees have eyes and the flowers have mouths',
  'A mosaic portrait of a famous musician made entirely of broken vinyl records',
  'A sketch of a futuristic city on Mars with domed habitats and space elevators',
  'A clay sculpture of a whimsical creature with the body of a cat and the wings of a butterfly',
  'An abstract digital artwork of geometric shapes dancing in a kaleidoscope of colors',
  'A paper-cut silhouette of a carnival scene with carousel horses and ferris wheels',
  'A chalk drawing of a magical doorway leading to a secret garden',
  'A mixed media collage of vintage comic book panels forming a city skyline',
  'A sculpture of a phoenix rising from the ashes made entirely of glass shards',
  'A surrealistic painting of a giant teapot floating in a stormy sea',
  'A watercolor portrait of a panda wearing a top hat and monocle',
  'An abstract sculpture representing the chaos of the universe using tangled wires'
] %}

{% set active_menu = 'imagine' %}
{% set xdata %}imagine(`{{ option.features.imagine.default_model ?? 'dall-e-3'}}`,
{{ adapters|json_encode }},
{{ samples|json_encode }}, {{ (image ?? null )|json_encode() }}){% endset %}
{% block title p__('title', 'Imagine')|title %}

{% block template %}
<div class="flex flex-col gap-4 grow">
  <div>
    {% include "snippets/back.twig" with {link: 'app/library/images', label: 'History', icon: 'history'} %}

    <div class="relative mt-4">
      <div
        class="absolute top-0 left-0 z-10 h-full pointer-events-none bg-gradient-to-r from-main to-transparent w-28">
      </div>

      <div class="flex">
        <div
          class="flex items-center justify-end h-16 gap-2 pr-1 overflow-hidden">
          <template x-if="history === null">
            <template x-for="i in 15" :key="i">
              <div class="size-14 shrink-0 loading">
              </div>
            </template>
          </template>

          <template x-if="history && history.length > 0">
            <template x-for="i in history" :key="i.id">
              <a :href="`app/imagine/${i.id}`"
                class="relative block overflow-hidden rounded-lg size-14 shrink-0 hover:outline focus:outline outline-2 outline-offset-2 outline-line"
                @click.prevent="select(i);">
                <template x-if="i.output_file.blur_hash">
                  <canvas is="x-blurhash"
                    class="absolute top-0 left-0 w-full h-full" width="56"
                    height="56" :hash="i.output_file.blur_hash"
                    type="color"></canvas>
                </template>

                <img :src="i.output_file.url" :alt="i.prompt"
                  class="absolute top-0 left-0 object-cover w-full h-full">
              </a>
            </template>
          </template>
        </div>
      </div>
    </div>
  </div>

  <div class="flex justify-center my-auto">
    <template x-if="!preview.image && !isProcessing">
      <div class="text-center">
        <div
          class="mx-auto w-16 h-16 flex items-center justify-center text-main bg-content bg-gradient-to-br from-[#E6C0FE] to-[#984CF8] rounded-full">
          <i class="text-4xl ti ti-palette"></i>
        </div>

        <h1 class="mt-6">{{ p__('heading', 'Imagine') }}</h1>
        <p class="mt-1 text-lg font-light text-content-dimmed">
          {{ __('Use your imagination to create awesome images.') }}</p>
      </div>
    </template>

    <template x-if="isProcessing">
      <div class="min-w-[32rem]">
        <div class="loading" :style="{'width': `${preview.width}px`}">
          <div :style="{'padding-top': `${preview.height/preview.width*100}%`}">
          </div>
        </div>

        <div class="flex items-center justify-between mt-2">
          <div class="h-4 my-1 w-72 loading"></div>

          <div class="loading size-6"></div>
        </div>

        <div class="flex items-center gap-2 mt-2">
          <div class="w-20 h-6 loading"></div>
          <div class="w-20 h-6 rounded-md loading"></div>
        </div>
      </div>
    </template>

    <template x-if="preview.image && !isProcessing">
      <div class="min-w-[32rem]" :style="{'width': `${preview.width}px`}">
        <div class="relative overflow-hidden rounded-lg bg-line-dimmed group"
          :style="{'max-width': `${preview.width}px`}">
          <div :style="{'padding-top': `${preview.height/preview.width*100}%`}">
          </div>

          <template x-if="preview.image.output_file.blur_hash">
            <canvas is="x-blurhash"
              class="absolute top-0 left-0 w-full h-full loading"
              :width="preview.width" :height="preview.height"
              :hash="preview.image.output_file.blur_hash"></canvas>
          </template>

          <img :src="preview.image.output_file.url"
            :alt="preview.image.params.prompt || ''"
            class="absolute top-0 left-0 w-full h-full"
            :width="preview.image.output_file.width"
            :height="preview.image.output_file.height">

          <div
            class="absolute top-0 left-0 w-full h-full z-10 bg-gradient-to-t from-[rgba(63,66,70,0.57)] to-[rgba(63,66,70,0)] invisible group-hover:visible">
            <div
              class="absolute left-0 flex items-center justify-center w-full gap-2 bottom-4">
              <a :href="preview.image.output_file.url" type="button"
                download="image.png" target="_blank"
                class="flex items-center justify-center scale-95 rounded-full opacity-0 size-10 bg-main text-content group-hover:delay-0 group-hover:opacity-100 group-hover:scale-100 hover:outline focus:outline outline-1 outline-offset-2 outline-main">
                <i class="text-xl transition-all ti ti-download"></i>
              </a>

              <button type="button" @click="copyImgToClipboard(preview.image)"
                class="flex items-center justify-center scale-90 rounded-full opacity-0 size-10 bg-main text-content group-hover:delay-75 group-hover:opacity-100 group-hover:scale-100 hover:outline focus:outline outline-1 outline-offset-2 outline-main">
                <i class="text-xl transition-all ti ti-copy"></i>
              </button>

              <button type="button" @click="modal.open('delete-modal');"
                class="flex items-center justify-center scale-75 rounded-full opacity-0 size-10 bg-main text-content group-hover:delay-150 group-hover:opacity-100 group-hover:scale-100 hover:outline focus:outline outline-1 outline-offset-2 outline-main">
                <i class="text-xl transition-all ti ti-trash"></i>
              </button>
            </div>
          </div>
        </div>

        <div class="flex items-center justify-between gap-2 mt-2">
          <div x-text="preview.image.params.prompt || ''"
            class="overflow-hidden text-ellipsis text-nowrap"></div>

          <button type="button" class="text-content-dimmed hover:text-content">
            <x-copy :data-copy="preview.image.params.prompt || ''"
              class="ti ti-copy"></x-copy>
          </button>
        </div>

        <div class="flex items-center gap-4 mt-2">
          <span
            class="flex items-center gap-1 text-sm text-content-dimmed whitespace-nowrap">
            <i class="text-base ti ti-cpu-2"></i>
            <span x-text="preview.image.model" class="uppercase"></span>
          </span>

          <span
            class="flex items-center gap-1 text-sm text-content-dimmed whitespace-nowrap">
            <i class="text-base ti ti-maximize"></i>

            <span>
              <span x-text="preview.image.output_file.width"></span>
              x
              <span x-text="preview.image.output_file.height"></span>
            </span>
          </span>

          <template x-if="preview.image.cost > 0">
            <span
              class="flex items-center gap-1 text-sm text-content-dimmed whitespace-nowrap">
              <i class="text-base ti ti-coins"></i>
              <x-credit :data-value="preview.image.cost"
                format="{{ __(":count credits") }}"></x-credit>
            </span>
          </template>

          {% include "snippets/audience.twig" with {ref: 'preview.image'} %}
        </div>
      </div>
    </template>
  </div>
</div>

<modal-element name="delete-modal">
  <template x-if="preview.image">
    <form class="modal" @submit.prevent="remove(preview.image);">
      <div class="p-8 rounded-xl bg-main w-[480px] shadow-2xl">
        <div class="max-w-xs mx-auto">
          <div
            class="relative flex items-center justify-center w-24 h-24 mx-auto rounded-full text-failure/25">

            <svg class="absolute top-0 left-0 w-full h-full" width="112"
              height="112" viewBox="0 0 112 112" fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <circle cx="56" cy="56" r="55.5" stroke="currentColor"
                stroke-dasharray="8 8" />
            </svg>

            <div
              class="flex items-center justify-center w-20 h-20 text-4xl transition-all rounded-full bg-failure/25 text-failure">
              <i class="text-4xl ti ti-trash"></i>
            </div>
          </div>

          <div class="mt-4 text-lg text-center">

            {{ __('Do you really want to delete the image?') }}
          </div>

          <div class="flex items-center justify-center gap-4 mt-10">
            <button class="button button-outline" @click="modal.close()"
              type="button">
              {{ p__('button', 'No, cancel') }}
            </button>

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

              {{ p__('button', 'Yes, delete') }}
            </button>
          </div>
        </div>
      </div>
    </form>
  </template>
</modal-element>
{% endblock %}

{% block footer %}
<div class="lg:sticky lg:z-40 lg:bottom-0 lg:mt-auto">
  <div class="h-4 lg:bg-gradient-to-t lg:from-main lg:to-transparent">
  </div>

  <div class="bg-main">
    <form
      @submit.prevent="{{ workspace.subscription.plan.config.imagine.is_enabled is defined and workspace.subscription.plan.config.imagine.is_enabled ? 'submit($el)' : ''   }}">
      <div class="flex items-end justify-between mb-3">
        <div>
          <div class="flex items-center gap-0 5">
            <span class="font-bold">{{ p__('heading', 'Text to image') }}</span>
            <i class="text-base ti ti-corner-right-up text-content-dimmed"></i>
          </div>

          <div class="flex items-center gap-2">
            <div class="text-sm text-content-dimmed">
              {{ __('Generate images from text') }}
            </div>

            <button type="button" class="button button-xs button-dimmed"
              @click="surprise">
              {{ p__('button', 'Surprise me') }}
            </button>
          </div>
        </div>

        <div class="relative"
          @click.outside=" $refs.context.removeAttribute('data-open')" x-data>

          <button type="button"
            class="capitalize button button-xs button-dimmed"
            @click="$refs.context.toggleAttribute('data-open')">
            <span x-text="adapter.short_name"></span>
            <i class="ti ti-chevron-down"></i>
          </button>

          <div class="menu menu-tr" x-ref="context">
            <ul>
              <template x-for="a in adapters">
                <li>
                  <button type="button"
                    class="w-full px-4 py-2 text-left blockl hover:bg-intermediate hover:text-intermediate-content"
                    @click="adapter = a; $refs.context.removeAttribute('data-open');">

                    <span x-text="a.name"></span>
                  </button>
                </li>
              </template>
            </ul>
          </div>
        </div>
      </div>

      <div
        class="relative p-1 rounded-xl bg-line-dimmed has-[textarea:focus]:bg-gradient-to-br has-[textarea:focus]:from-gradient-from has-[textarea:focus]:to-gradient-to">

        <template x-if="showSettings && adapter">
          <div
            class="absolute left-0 z-10 w-full mb-2 border bottom-full bg-main border-line-dimmed rounded-xl"
            @click.outside="showSettings = false">
            <div
              class="flex items-center justify-between p-4 border-b border-line-dimmed">
              <div class="text-sm font-bold" x-text="adapter.name">
              </div>

              <template
                x-if="JSON.stringify(original) != JSON.stringify(params)">
                <button type="button" class="text-sm hover:underline"
                  @click="reset">
                  {{ p__('button', 'Reset') }}
                </button>
              </template>
            </div>

            <div class="flex items-center gap-2 p-4">
              <template x-if="adapter.sizes && adapter.sizes.length > 0">
                <div class="relative group" x-data
                  :data-selected="params.width && params.height"
                  @click.outside=" $refs.filter.removeAttribute('data-open')">

                  <button type="button"
                    class="relative whitespace-nowrap flex items-center gap-1 px-2 h-8 text-sm border border-transparent rounded-lg text-content-dimmed group-data-[selected]:border-line hover:group-data-[selected]:border-line disabled:opacity-50"
                    @click="$refs.filter.toggleAttribute('data-open')"
                    x-tooltip.raw="{{ p__('label', 'Size') }}">

                    <i
                      class="text-xl ti ti-square-rounded-plus-filled group-data-[selected]:hidden"></i>

                    <i class="hidden text-xl text-content ti ti-square-rounded-x-filled group-data-[selected]:block transition-all hover:scale-125 hover:rotate-90"
                      @click.stop="params.width=null; params.height=null;"></i>

                    <span class="group-data-[selected]:hidden">
                      {{ p__('label', 'Size') }}
                    </span>

                    <span
                      class="hidden group-data-[selected]:flex items-center gap-0.5 text-content font-medium">
                      <span x-text="params.width"></span>
                      <i class="text-sm ti ti-x text-content-dimmed"></i>
                      <span x-text="params.height"></span>
                    </span>

                    <svg
                      class="absolute top-0 left-0 w-full h-full rounded-lg text-line-dimmed group-hover:text-line group-data-[selected]:hidden"
                      width="100%" height="100%" fill="none"
                      xmlns="http://www.w3.org/2000/svg">
                      <rect cx="56" width="100%" height="100%"
                        stroke="currentColor" stroke-dasharray="4 2" rx="8"
                        ry="8" stroke-width="2" />
                    </svg>
                  </button>

                  <div class="menu menu-tl max-h-72"
                    @click="$el.removeAttribute('data-open')" x-ref="filter">
                    <ul class="text-sm">
                      <template x-for="size in adapter.sizes">
                        <li>
                          <button type="button"
                            class="flex items-center gap-0.5  w-full px-4 py-2 text-left hover:bg-intermediate"
                            @click="params.width = size.width; params.height=size.height;">
                            <span x-text="size.width"></span>
                            <i class="text-sm ti ti-x text-content-dimmed"></i>
                            <span x-text="size.height"></span>
                          </button>
                        </li>
                      </template>
                    </ul>
                  </div>
                </div>
              </template>

              <template x-for="f in adapter.params">
                <div class="relative group" x-data
                  :data-selected="params[f.model] !== undefined &&  params[f.model] && f.options.length > 0"
                  @click.outside="$refs.filter.removeAttribute('data-open')">

                  <button type="button"
                    class="relative whitespace-nowrap flex items-center gap-1 px-2 h-8 text-sm border border-transparent rounded-lg text-content-dimmed group-data-[selected]:border-line hover:group-data-[selected]:border-line disabled:opacity-50"
                    @click="$refs.filter.toggleAttribute('data-open')"
                    x-tooltip="f.label" :disabled="f.options.length < 1">

                    <i
                      class="text-xl ti ti-square-rounded-plus-filled group-data-[selected]:hidden"></i>

                    <i class="hidden text-xl text-content ti ti-square-rounded-x-filled group-data-[selected]:block transition-all hover:scale-125 hover:rotate-90"
                      @click.stop="delete params[f.model]"></i>

                    <span x-text="f.label"
                      class="group-data-[selected]:hidden"></span>

                    <span
                      class="hidden group-data-[selected]:inline text-content font-medium"
                      x-text="f.options.find(o => o.value == params[f.model])?.label"></span>

                    <svg
                      class="absolute top-0 left-0 w-full h-full rounded-lg text-line-dimmed group-hover:text-line group-data-[selected]:hidden"
                      width="100%" height="100%" fill="none"
                      xmlns="http://www.w3.org/2000/svg">
                      <rect cx="56" width="100%" height="100%"
                        stroke="currentColor" stroke-dasharray="4 2" rx="8"
                        ry="8" stroke-width="2" />
                    </svg>
                  </button>

                  <div class="menu menu-tl max-h-72"
                    @click="$el.removeAttribute('data-open')" x-ref="filter">
                    <ul class="text-sm">
                      <template x-for="option in f.options">
                        <li>
                          <button type="button"
                            class="block w-full px-4 py-2 text-left hover:bg-intermediate"
                            x-text="option.label"
                            @click="params[f.model]=option.value;">
                          </button>
                        </li>
                      </template>
                    </ul>
                  </div>
                </div>
              </template>
            </div>

            <template x-if="adapter.negative_prompt">
              <div class="p-4">
                <label for="negative_prompt">
                  {{ p__('label', 'Negative prompt') }}
                </label>

                <input type="text" id="negative_prompt" class="mt-2 input"
                  autocomplete="off"
                  placeholder="{{ __('Type negative prompt here') }}"
                  x-model="negativePrompt" />
              </div>
            </template>
          </div>
        </template>

        <div class="flex items-end gap-2 p-2 pl-4 rounded-lg bg-main">
          <div
            class="mb-2 overflow-y-auto autogrow-textarea text-content grow max-h-36"
            :data-replicated-value="prompt">
            <textarea
              :placeholder="placeholder || `{{ __('Type a prompt here...') }}`"
              autocomplete="off" rows="1" x-model="prompt" x-ref="prompt"
              :maxlength="adapter.prompt_length" @blur="blur"
              @focus="placeholderSurprise"
              class="block p-0 text-base bg-transparent border-none focus:ring-0 placeholder:text-content-dimmed"
              @keydown.enter.prevent @keydown.tab="tab($event)"
              required></textarea>
          </div>

          <div class="flex items-center gap-2 ml-auto">
            <button type="button"
              class="relative w-10 h-10 p-0 button button-outline"
              @click.stop="showSettings = !showSettings" :class="{
                'bg-line-dimmed': showSettings,
                'border-transparent': JSON.stringify(original) === JSON.stringify(params)
              }">
              <i class="ti ti-settings"></i>

              <template
                x-if="JSON.stringify(original) != JSON.stringify(params)">
                <i
                  class="absolute text-2xl -translate-x-1/2 translate-y-1/2 ti ti-point-filled text-accent bottom-full left-full"></i>
              </template>
            </button>

            {% if workspace.subscription.plan.config.imagine.is_enabled is defined and workspace.subscription.plan.config.imagine.is_enabled %}
            <template x-if="adapter.is_enabled">
              <button type="submit" class="w-10 h-10 p-0 button button-accent"
                :disabled="!prompt || isProcessing" :processing="isProcessing">
                {% include "/snippets/spinner.twig" %}

                <template x-if="!isProcessing">
                  <i class="ti ti-arrow-up"></i>
                </template>
              </button>
            </template>

            <template x-if="!adapter.is_enabled">
              <a href="app/billing" class="w-10 h-10 p-0 button button-dimmed"
                x-tooltip.raw="{{ __('Selected model is not available in your plan. Either upgrade your plan or select another model.') }}">
                <i class="ti ti-lock-up"></i>
              </a>
            </template>
            {% else %}
            <a href="app/billing" class="w-10 h-10 p-0 button button-dimmed"
              x-tooltip.raw="{{ __('Upgrade your plan') }}">
              <i class="ti ti-lock-up"></i>
            </a>
            {% endif %}
          </div>
        </div>
      </div>
    </form>

    {% include "/sections/footer.twig" %}
  </div>
</div>
{% endblock %}