{% import "macros/buttons.html" as buttons %}
{% import "macros/forms.html" as forms %}
{% import "macros/icons.html" as icons %}

{% macro preview() %}
<div id="preview" class="col-span-3 h-[75vh] flex flex-col">
  <div class="flex justify-end">
    {{
      page_preview_form.page(
        class="form-select w-1/4 mb-2",
        script="
          on change
            call htmx.ajax(
              'POST',
              `?preview=${event.target.value}`,
              {source: '#theme-form', target: '#preview'}
            )
          end
        "
      )
    }}

  </div>
  <iframe class="grow w-full border border-slate-200 shadow-sm" title="Preview" srcdoc="{{ preview_content }}"></iframe>
</div>
{% endmacro %}

{% if hx_target == "preview" %}
  {{ preview () }}
{% endif %}

{% extends layout %}

{% block head_title_content %}{{ theme.name }} · Themes · {{ super() }}{% endblock %}

{% block main %}
<form
  id="theme-form"
  hx-boost="true"
  hx-target="#main"
  method="POST"
  action="{{ url_for('dashboard.themes:update', id=theme.id) }}"
  _="on fief:closeModal go back"
>
  <div class="sm:flex sm:justify-between sm:items-center mb-8">

    <div class="mb-4 sm:mb-0">
      <h1 class="text-2xl md:text-3xl text-slate-800 font-bold">Edit {{ theme.name }} theme</h1>
    </div>

    <div class="grid grid-flow-col sm:auto-cols-max justify-start sm:justify-end gap-2">
      <a
        href="{{ url_for('dashboard.themes:list') }}"
        class="btn border-slate-200 hover:border-slate-300 text-slate-600"
      >
        {{ icons.arrow_left('w-4 h-4') }}
        <span class="hidden sm:block ml-2">Back</span>
      </a>
      {% call buttons.submit('btn') %}
        {{ icons.check('w-4 h-4') }}
        <span class="hidden sm:block ml-2">Update</span>
      {% endcall %}
    </div>

  </div>
  <div class="grid grid-cols-4 gap-4">
    <div class="space-y-4 h-[75vh] overflow-auto">
      {%
        set htmx_kwargs = {
          "script": "
            on change debounced at 1s
              call htmx.ajax(
                'POST',
                `?preview=${#page.value}`,
                {source: '#theme-form', target: '#preview'}
              )
            end
          "
        }
      %}
      {{ forms.form_field(form.name) }}
      {{ forms.form_field(form.primary_color, **htmx_kwargs) }}
      {{ forms.form_field(form.primary_color_hover, **htmx_kwargs) }}
      {{ forms.form_field(form.primary_color_light, **htmx_kwargs) }}
      {{ forms.form_field(form.input_color, **htmx_kwargs) }}
      {{ forms.form_field(form.input_color_background, **htmx_kwargs) }}
      {{ forms.form_field(form.light_color, **htmx_kwargs) }}
      {{ forms.form_field(form.light_color_hover, **htmx_kwargs) }}
      {{ forms.form_field(form.text_color, **htmx_kwargs) }}
      {{ forms.form_field(form.accent_color, **htmx_kwargs) }}
      {{ forms.form_field(form.background_color, **htmx_kwargs) }}
      {{ forms.form_field(form.font_size, **htmx_kwargs) }}
      {{ forms.form_field(form.font_family, **htmx_kwargs) }}
      {{ forms.form_field(form.font_css_url, **htmx_kwargs) }}
      {{ forms.form_csrf_token(form) }}
    </div>
    {{ preview() }}
  </div>
</form>
{% endblock %}
