{% extends "admin/base.html" %}
{% block title %}{% if is_new %}{{ t('add_short') }}{% else %}{{ t('change_short') }}{% endif %} {{ model_name }} | {{ site_header }}{% endblock %}
{% block content %}
{% macro field_attrs(field) -%}
{%- if field.required %} required{% endif -%}
{%- if field.step and 'step' not in field.attrs %} step="{{ field.step }}"{% endif -%}
{%- for key, val in field.attrs.items() %} {{ key }}="{{ val }}"{% endfor -%}
{%- endmacro %}
<main class="base-card admin-main change-form">
  <nav class="base-breadcrumbs breadcrumbs" aria-label="Breadcrumb">
    <a href="{{ prefix }}/">{{ t('home') }}</a> &rsaquo;
    <a href="{{ prefix }}/{{ collection }}/">{{ model_name }}</a> &rsaquo;
    {% if is_new %}{{ t('add_short') }}{% else %}{{ t('change_short') }}{% endif %}
  </nav>
  <h1 class="base-heading-1">{% if is_new %}{{ t('add_model', model=model_name) }}{% else %}{{ t('change_model', model=model_name) }}{% endif %}</h1>

  {% if errors %}
  <ul class="base-banner base-banner--negative errorlist" role="alert">
    {% for error in errors %}
    <li>{{ error }}</li>
    {% endfor %}
  </ul>
  {% endif %}

  <form method="post" class="admin-form">
    <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
    {% for fieldset in fieldsets %}
    <fieldset class="module aligned">
      {% if fieldset.title %}<h2 class="base-heading-2">{{ fieldset.title }}</h2>{% endif %}
      {% for field in fieldset.fields %}
      <div class="base-form-field form-row{% if field.errors %} errors{% endif %}{% if field.widget == 'checkbox' %} base-form-field--checkbox{% endif %}">
        <label class="base-form-field__label" for="id_{{ field.name }}">{{ field.label }}{% if field.required %}<span aria-hidden="true"> *</span>{% endif %}</label>
        {% if field.readonly %}
        <p class="readonly base-text-secondary">{% if field.widget == 'tags' and field.value %}{{ field.value | join(', ') }}{% else %}{{ field.value }}{% endif %}</p>
        {% elif field.widget == 'checkbox' %}
        <input type="checkbox" class="base-checkbox" name="{{ field.name }}" id="id_{{ field.name }}" value="on"{% if field.value %} checked{% endif %}{{ field_attrs(field) }}>
        {% elif field.widget == 'related_select' %}
        <div class="related-select" data-lookup-url="{{ field.attrs.get('data-related-lookup', '') }}" data-min-chars="{{ field.attrs.get('data-min-chars', '2') }}">
          <input type="hidden" name="{{ field.name }}" id="id_{{ field.name }}" value="{{ field.value | default('', true) }}"{% if field.required %} required{% endif %}>
          <input type="text" class="base-input related-select__search" id="id_{{ field.name }}_search" value="{% if field.choices %}{{ field.choices[0][1] }}{% endif %}" placeholder="{{ t('related_search_placeholder') }}" autocomplete="off" role="combobox" aria-expanded="false" aria-controls="id_{{ field.name }}_listbox" aria-autocomplete="list">
          <ul class="related-select__results" id="id_{{ field.name }}_listbox" role="listbox" hidden></ul>
        </div>
        {% elif field.widget == 'select' %}
        <select class="base-select" name="{{ field.name }}" id="id_{{ field.name }}"{{ field_attrs(field) }}>
          {% if not field.required %}
          <option value="">---------</option>
          {% endif %}
          {% for val, label in field.choices %}
          <option value="{{ val }}"{% if field.value is not none and field.value|string == val|string %} selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
        {% elif field.widget == 'tags' %}
        <div class="tag-input" data-field="{{ field.name }}" data-initial='{{ field.attrs.get("data-initial", "[]") }}'>
          <div class="tag-input__tags" id="id_{{ field.name }}_tags"></div>
          <input type="text" class="base-input tag-input__entry" id="id_{{ field.name }}_entry" placeholder="{{ t('tags_placeholder') }}" autocomplete="off">
          <input type="hidden" name="{{ field.name }}" id="id_{{ field.name }}" value='{{ field.attrs.get("data-initial", "[]") }}'>
        </div>
        {% elif field.widget == 'json' %}
        <textarea class="base-textarea" name="{{ field.name }}" id="id_{{ field.name }}"{{ field_attrs(field) }}>{{ field.value | default('{}', true) }}</textarea>
        {% elif field.widget == 'textarea' %}
        <textarea class="base-textarea" name="{{ field.name }}" id="id_{{ field.name }}"{{ field_attrs(field) }}>{{ field.value | default('', true) }}</textarea>
        {% elif field.widget == 'number' %}
        <input type="number" class="base-input" name="{{ field.name }}" id="id_{{ field.name }}" value="{{ field.value | default('', true) }}"{{ field_attrs(field) }}>
        {% elif field.widget == 'date' %}
        <input type="date" class="base-input" name="{{ field.name }}" id="id_{{ field.name }}" value="{{ field.value | default('', true) }}"{{ field_attrs(field) }}>
        {% elif field.widget == 'datetime-local' %}
        <input type="datetime-local" class="base-input" name="{{ field.name }}" id="id_{{ field.name }}" value="{{ field.value | default('', true) }}"{{ field_attrs(field) }}>
        {% else %}
        <input type="{{ field.widget }}" class="base-input" name="{{ field.name }}" id="id_{{ field.name }}" value="{{ field.value | default('', true) }}"{{ field_attrs(field) }}>
        {% endif %}
      </div>
      {% endfor %}
    </fieldset>
    {% endfor %}
    <div class="submit-row">
      <input type="submit" value="{{ t('save') }}" class="base-btn base-btn--primary default">
      {% if not is_new %}
      <a href="{{ prefix }}/{{ collection }}/{{ obj_id }}/delete/" class="deletelink">{{ t('delete') }}</a>
      {% endif %}
      <a href="{{ prefix }}/{{ collection }}/" class="base-btn base-btn--tertiary">{{ t('cancel') }}</a>
    </div>
  </form>
</main>
{% endblock %}