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

{% extends "admin/user_fields/list.html" %}

{% block head_title_content %}Create User field · {{ super() }}{% endblock %}

{% set open_modal = true %}

{% block modal %}
  <form
    hx-boost="true"
    hx-target="#modal"
    method="POST"
    action="{{ url_for('dashboard.user_fields:create') }}"
    _="on fief:closeModal go back"
  >
  {% call modal.header() %}
    {% call modal.title() %}Create User field{% endcall %}
  {% endcall %}
  {% call modal.body() %}
    <div class="space-y-4">
      {{
        forms.form_field(
          form.name,
          **{
            "script": "
              on keyup
              if #" ~ form.slug.id ~ "@pristine
                call slugify(event.target.value, { replacement: '_', lower: true })
                set #" ~ form.slug.id ~ "@value to it
              end
            "
          },
        )
      }}
      {{
        forms.form_field(
          form.slug,
          **{
            "script": "
              on load set @pristine to true
              on change set @pristine to false
            "
          },
        )
      }}
      {{ forms.form_field(form.type, **{"hx-post": url_for('dashboard.user_fields:create'), "hx-trigger": "change", "hx-target": "#modal"}) }}
      {% if form.configuration %}
        {% if form.configuration.choices %}
          <div
            _="
              on mutation of anything
              for mutation in event.detail.mutationList
                if mutation.type == 'childList'
                  send fief:choicesChange to <form />
                  break
                end
              end
            "
            hx-post="{{ url_for('dashboard.user_fields:create') }}" hx-trigger="fief:choicesChange from:form" hx-target="#modal" hx-headers='{"HX-Trigger": "choicesChange"}'
          >
            {{ forms.form_field(form.configuration.choices, **{"hx-post": url_for('dashboard.user_fields:create'), "hx-trigger": "change", "hx-target": "#modal"}) }}
          </div>
        {% endif %}
        {% if form.configuration["default"] %}
          {% if form.type.data == "BOOLEAN" %}
            <label class="block text-sm font-medium mb-1" for="{{ form.configuration['default'].id }}">
              Default value
              {{ forms.form_field(form.configuration["default"]) }}
            </label>
          {% else %}
            {{ forms.form_field(form.configuration["default"]) }}
          {% endif %}
        {% endif %}
        {{ forms.form_field(form.configuration.at_registration) }}
        {{ forms.form_field(form.configuration.at_update) }}
        {{ forms.form_field(form.configuration.required) }}
      {% endif %}
      {{ forms.form_csrf_token(form) }}
    </div>
  {% endcall %}
  {% call modal.footer() %}
    <button type="button" class="btn-sm border-slate-200 hover:border-slate-300 text-slate-600" _="install CloseModalButton()">Cancel</button>
    {% call buttons.submit('btn-sm') %}
      Create
    {% endcall %}
  {% endcall %}
  </form>
{% endblock %}
