{% 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 %}{{ user_field.name }} · {{ super() }}{% endblock %}

{% set open_modal = true %}

{% block modal %}
  <form
    hx-boost="true"
    hx-target="#modal"
    method="POST"
    action="{{ url_for('dashboard.user_fields:update', id=user_field.id) }}"
    _="on fief:closeModal go back"
  >
  {% call modal.header() %}
    {% call modal.title() %}Edit User field {{ user_field.name }}{% endcall %}
  {% endcall %}
  {% call modal.body() %}
    <div class="space-y-4">
      {{ forms.form_field(form.name) }}
      {{ forms.form_field(form.slug) }}
      {% 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:update', id=user_field.id) }}" 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:update', id=user_field.id), "hx-trigger": "change", "hx-target": "#modal"}) }}
        </div>
      {% endif %}
      {% if form.configuration["default"] %}
        {% if user_field.type == "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) }}
      {{ 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') %}
      Update
    {% endcall %}
  {% endcall %}
  </form>
{% endblock %}
