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

{% set active_menu = 'writer' %}

{% set xdata %}
writer({{ (preset ?? null )|json_encode() }},
{{ (document ?? null )|json_encode() }})
{% endset %}

{% block title (preset is defined ? preset.title : p__('title', 'Writer'))|title %}

{% block template %}
<div class="flex flex-col gap-4">
  {% include "snippets/back.twig" with {link: 'app/presets', label: p__('button', 'Templates')} %}

  <div class="flex flex-col gap-2">
    <h1>
      {{ preset is defined ? preset.title : p__('heading', 'Writer') }}
    </h1>

    {% if preset is defined %}
    <p class="text-content-dimmed">{{ preset.description }}</p>
    {% endif %}
  </div>
</div>

<div class="flex flex-col gap-4">
  <section class="box" data-density="comfortable" x-show="showForm">
    <h2>{{ p__('heading', 'Prompts') }}</h2>

    <x-form>
      <form class="grid grid-cols-1 gap-6 mt-4" x-ref="form"
        @submit.prevent="{{ workspace.subscription.plan.config.writer.is_enabled is defined and workspace.subscription.plan.config.writer.is_enabled ? 'submit(null)' : ''   }}">
        {% for p in placeholders %}
        {% set id = "i#{random()}" %}

        {% if p.type.value is defined and p.type.value == 'text' %}
        <div>
          <label for="{{ id }}">
            {{ p.label }}

            {% if p.info %}
            <i class="ti ti-help-square-rounded-filled help"
              x-tooltip.raw="{{ p.info }}" data-tooltip></i>
            {% endif %}
          </label>

          {% if p.multiline %}
          <textarea cols="5" id="{{ id }}" name="{{ p.name }}"
            placeholder="{{ p.placeholder }}" class="mt-2 input"
            autocomplete="off" rows="3"
            {{ p.required ? 'required' : '' }}>{{ p.value }}</textarea>
          {% else %}
          <input type="text" id="{{ id }}" name="{{ p.name }}"
            placeholder="{{ p.placeholder }}" class="mt-2 input"
            autocomplete="off" rows="3" value="{{ p.value }}"
            {{ p.required ? 'required' : '' }}>
          {% endif %}
        </div>
        {% endif %}

        {% if p.type.value is defined and p.type.value == 'enum' %}
        <div>
          <label for="{{ id }}">
            {{ p.label }}

            {% if p.info %}
            <i class="ti ti-help-square-rounded-filled help"
              x-tooltip.raw="{{ p.info }}" data-tooltip></i>
            {% endif %}
          </label>

          <select id="{{ id }}" name="{{ p.name }}" class="mt-2 input"
            {{ p.required ? 'required' : '' }}>
            {% for o in p.options %}
            <option value="{{ o.value }}"
              {{ o.value == p.value ? 'seleected' : '' }}>{{ o.label }}</option>
            {% endfor %}
          </select>
        </div>
        {% endif %}

        {% if p.type == 'language' %}
        <div>
          <label for="language">
            {{ p__('label', 'Language') }}
          </label>

          <select id="language" name="language" class="mt-2 input">
            {% set languages = ["Albanian (Shqip)", "Arabic (العربية)", "Armenian (Հայերեն)", "Awadhi (अवधी)", "Azerbaijani (Azərbaycanca)", "Bashkir (Башҡорт)", "Basque (Euskara)", "Belarusian (Беларуская)", "Bengali (বাংলা)", "Bhojpuri (भोजपुरी)", "Bosnian (Bosanski)", "Brazilian Portugu (português brasileiro)", "Bulgarian (български)", "Cantonese (Yue) (粵語)", "Catalan (Català)", "Chhattisgarhi (छत्तीसगढ़ी)", "Chinese (中文)", "Croatian (Hrvatski)", "Czech (Čeština)", "Danish (Dansk)", "Dogri (डोगरी)", "Dutch (Nederlands)", "English", "Estonian (Eesti)", "Faroese (Føroyskt)", "Finnish (Suomi)", "French (Français)", "Galician (Galego)", "Georgian (ქართული)", "German (Deutsch)", "Greek (Ελληνικά)", "Gujarati (ગુજરાતી)", "Haryanvi (हरियाणवी)", "Hindi (हिंदी)", "Hungarian (Magyar)", "Indonesian (Bahasa Indonesia)", "Irish (Gaeilge)", "Italian (Italiano)", "Japanese (日本語)", "Javanese (Basa Jawa)", "Kannada (ಕನ್ನಡ)", "Kashmiri (कश्मीरी)", "Kazakh (Қазақша)", "Konkani (कोंकणी)", "Korean (한국어)", "Kyrgyz (Кыргызча)", "Latvian (Latviešu)", "Lithuanian (Lietuvių)", "Macedonian (Македонски)", "Maithili (मैथिली)", "Malay (Bahasa Melayu)", "Maltese (Malti)", "Mandarin (普通话)", "Mandarin Chinese (中文)", "Marathi (मराठी)", "Marwari (मारवाड़ी)", "Min Nan (閩南語)", "Moldovan (Moldovenească)", "Mongolian (Монгол)", "Montenegrin (Crnogorski)", "Nepali (नेपाली)", "Norwegian (Norsk)", "Oriya (ଓଡ଼ିଆ)", "Pashto (پښتو)", "Persian (Farsi) (فارسی)", "Polish (Polski)", "Portuguese (Português)", "Punjabi (ਪੰਜਾਬੀ)", "Rajasthani (राजस्थानी)", "Romanian (Română)", "Russian (Русский)", "Sanskrit (संस्कृतम्)", "Santali (संताली)", "Serbian (Српски)", "Sindhi (سنڌي)", "Sinhala (සිංහල)", "Slovak (Slovenčina)", "Slovene (Slovenščina)", "Slovenian (Slovenščina)", "Spanish (Español)", "Turkish (Türkçe)", "Ukrainian (Українська)", "Urdu (اردو)", "Uzbek (Ўзбек)", "Vietnamese (Việt Nam)", "Welsh (Cymraeg)", "Wu (吴语)" ] %}
            {% for language in languages %}
            <option value="{{ language }}"
              {{ option.features.writer.default_language|default('English') == language ? 'selected' : '' }}>
              {{ language }}
            </option>
            {% endfor %}
          </select>
        </div>
        {% endif %}

        {% if p.type == 'tone' %}
        <div>
          <label for="tone">
            {{ p__('label', 'Tone of voice') }}
          </label>

          <div class="flex flex-wrap items-center gap-2 mt-2">
            {% set tones = ['Professional', 'Funny', 'Casual', 'Excited', 'Witty', 'Sarcastic', 'Dramatic', 'Feminine', 'Masculine', 'Grumpy', 'Bold', 'Secretive'] %}

            {% for tone in tones %}
            <label>
              <input type="radio" name="tone" value="{{ tone }}"
                class="radio-button" />

              <span>{{ tone }}</span>
            </label>
            {% endfor %}
          </div>
        </div>
        {% endif %}
        {% endfor %}

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

          <div class="flex flex-wrap items-center gap-2 mt-2">
            {% set levels = {
              "0.0": "Minimal",
              "0.1": "Subtle",
              "0.2": "Basic",
              "0.3": "Modest",
              "0.4": "Adequate",
              "0.5": "Balanced",
              "0.6": "Intermediate",
              "0.7": "Enriched",
              "0.8": "Expressive",
              "0.9": "Imaginative",
              "1.0": "Creative",
              "1.1": "Innovative",
              "1.2": "Inspired",
              "1.3": "Visionary",
              "1.4": "Inventive",
              "1.5": "Pioneering",
              "1.6": "Artistic",
              "1.7": "Radical",
              "1.8": "Genius",
              "1.9": "Transcendent",
              "2.0": "Boundless",
            } %}

            {% for level, label in levels %}
            <label>
              <input type="radio" name="temperature" value="{{ level }}"
                class="radio-button" />

              <span>
                {{ label }}
              </span>
            </label>
            {% endfor %}
          </div>
        </div>

        <div>
          {% if workspace.subscription.plan.config.writer.is_enabled is defined and workspace.subscription.plan.config.writer.is_enabled %}
          <button type="submit" class="w-full button button-accent"
            :processing="isProcessing">

            <svg width="24" height="24" viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg" class="spinner">
              <style>
                .spinner_S1WN {
                  animation: spinner_MGfb .8s linear infinite;
                  animation-delay: -.8s
                }

                .spinner_Km9P {
                  animation-delay: -.65s
                }

                .spinner_JApP {
                  animation-delay: -.5s
                }

                @keyframes spinner_MGfb {

                  93.75%,
                  100% {
                    opacity: .2
                  }
                }
              </style>
              <circle class="spinner_S1WN" cx="4" cy="12" r="3" />
              <circle class="spinner_S1WN spinner_Km9P" cx="12" cy="12" r="3" />
              <circle class="spinner_S1WN spinner_JApP" cx="20" cy="12" r="3" />
            </svg>

            <span class="inline-flex items-center gap-1" x-show="!isProcessing">
              <i class="ti ti-sparkles"></i>

              {{ p__('button', 'Generate') }}
            </span>
          </button>
          {% else %}
          <a href="app/billing" class="w-full button button-dimmed">
            <i class="ti ti-lock-up"></i>

            {{ p__('button', 'Upgrade plan') }}
          </a>
          {% endif %}
        </div>
      </form>
    </x-form>
  </section>

  <template x-if="docs.length > 0 && docs[index]">
    <div class="relative">
      <div
        class="py-0 transition-all duration-500 scale-90 border-b-0 rounded-b-none opacity-0 box"
        :class="docs.length > 2 ? 'h-4 opacity-100' : 'h-0 opacity-0'">
      </div>

      <div
        class="py-0 transition-all duration-500 scale-95 border-b-0 rounded-b-none opacity-0 box"
        :class="docs.length > 1 ? 'h-4 opacity-100' : 'h-0 opacity-0'">
      </div>

      <div class="flex flex-col gap-4 box" data-density="comfortable">
        <template x-if="docs.length > 1">
          <div class="flex items-center gap-1 text-xs text-content-dimmed">
            <button type="button" :disabled="index==0" @click="index--" ;
              class="hover:text-content">
              <i class="text-xs ti ti-chevron-left"></i>
            </button>

            <span>
              <span x-text="index+1"></span>
              <span>/</span>
              <span x-text="docs.length"></span>
            </span>

            <button type="button" :disabled="index+1 >= docs.length"
              @click="index++" ; class="hover:text-content">
              <i class="text-xs ti ti-chevron-right"></i>
            </button>
          </div>
        </template>

        <div class="flex items-start justify-between gap-4">
          <template x-if="docs[index].id">
            <div class="grow">
              <div class="text-xl autogrow-textarea font-editor-heading"
                :data-replicated-value="docs[index].title">
                <textarea placeholder="{{ __('Untitled document') }}"
                  autocomplete="off" x-model="docs[index].title" rows="1"
                  @input.debounce.750ms="saveDocument(docs[index])"
                  class="block w-full px-0 py-0 transition-colors bg-transparent border-0 appearance-none resize-none focus:ring-0 placeholder:text-content-dimmed placeholder:opacity-50 read-only:text-content-dimmed"
                  name="title"></textarea>
              </div>

              <div class="mt-1">
                <x-uuid x-text="docs[index].id"></x-uuid>
              </div>
            </div>
          </template>

          <template x-if="!docs[index].id">
            <div class="flex flex-col gap-3 grow">
              <div class="w-2/3 h-6 loading">
              </div>

              <div class="mb-1">
                <div class="w-64 h-4 loading"></div>
              </div>
            </div>
          </template>

          <div class="flex items-center gap-2 shrink-0">
            <button type="button" @click="showForm = !showForm"
              :class="{'text-content-dimmed': showForm}"
              x-tooltip.raw="{{ __("Toggle form") }}">
              <i class="ti ti-section"></i>
            </button>

            {% if workspace.subscription.plan.config.writer.is_enabled is defined and workspace.subscription.plan.config.writer.is_enabled %}
            <button type="button" @click="submit(docs[index].params)"
              x-tooltip.raw="{{ __("Regenerate") }}" :disabled="isProcessing">
              <i class="ti ti-rotate"></i>
            </button>
            {% endif %}
          </div>
        </div>

        <hr>

        <template x-if="docs[index].content">
          <div class="editor" x-html="format(docs[index].content)">
          </div>
        </template>

        <template x-if="!docs[index].content">
          <div class="flex flex-col gap-2 my-1">
            <div class="h-4 loading"></div>
            <div class="h-4 loading"></div>
            <div class="w-2/3 h-4 loading"></div>
          </div>
        </template>

        <template x-if="docs[index].id">
          <div class="flex items-center gap-4 mt-4">
            <div class="flex items-center gap-4 mr-auto">
              <template x-if="docs[index].cost > 0">
                <span
                  class="flex items-center gap-1 text-sm text-content-dimmed">
                  <i class="text-base ti ti-coins"></i>
                  <x-credit :data-value="docs[index].cost"
                    format="{{ __(":count credits") }}"></x-credit>
                </span>
              </template>

              {% include "snippets/audience.twig" with {ref: 'docs[index]'} %}
            </div>

            <div class="flex items-center gap-4">
              <button @click="copyDocumentContents(docs[index])"
                class="transition-all text-content-dimmed hover:text-content">
                <i class="text-xl ti ti-copy"></i>
              </button>

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

                <button
                  @click="$refs.downloadOptions.toggleAttribute('data-open')"
                  class="transition-all text-content-dimmed hover:text-content">
                  <i class="text-xl ti ti-download"></i>
                </button>

                <div class="menu menu-tr" x-ref="downloadOptions"
                  @click="$el.removeAttribute('data-open')">

                  <ul class="text-sm">
                    <li>
                      <button
                        class="flex items-center w-full gap-2 px-4 py-2 text-left hover:bg-intermediate"
                        @click="download(docs[index], 'word')">
                        <i
                          class="text-lg text-content-dimmed ti ti-letter-w"></i>

                        {{ p__('button', 'Word document') }}
                      </button>
                    </li>

                    <li>
                      <button
                        class="flex items-center w-full gap-2 px-4 py-2 text-left hover:bg-intermediate"
                        @click="download(docs[index], 'html')">
                        <i
                          class="text-lg text-content-dimmed ti ti-brand-html5"></i>
                        {{ p__('button', 'HTML file') }}
                      </button>
                    </li>

                    <li>
                      <button
                        class="flex items-center w-full gap-2 px-4 py-2 text-left hover:bg-intermediate"
                        @click="download(docs[index], 'markdown')">
                        <i
                          class="text-lg text-content-dimmed ti ti-markdown"></i>
                        {{ p__('button', 'Markdown') }}
                      </button>
                    </li>

                    <li>
                      <button
                        class="flex items-center w-full gap-2 px-4 py-2 text-left hover:bg-intermediate"
                        @click="download(docs[index], 'text')">
                        <i class="text-lg text-content-dimmed ti ti-txt"></i>
                        {{ p__('button', 'Text') }}
                      </button>
                    </li>
                  </ul>
                </div>
              </div>

              <button @click="deleteDocument(docs[index])"
                class="transition-all text-content-dimmed hover:text-content">
                <i class="text-xl ti ti-trash group-hover:text-failure"></i>
              </button>
            </div>
          </div>
        </template>
      </div>
    </div>
  </template>
</div>
{% endblock %}