{% extends "structure/base.html" %}
{% from 'crud/_macros.html' import render_field, render_form_errors %}
{% block content %}
  <div class="fcu-card">
    <div class="fcu-card-header" style="justify-content: flex-start; gap: 12px;">
      <a href="{{ view.url }}"
         style="color: var(--fcu-text-muted); text-decoration: none; display: inline-flex; align-items: center;"
         onmouseover="this.style.color='var(--fcu-primary)'"
         onmouseout="this.style.color='var(--fcu-text-muted)'"
         up-follow
         up-target="#main-content"
         title="{{ construct.t('crud-back-button') }}">
        {{ icon("back") }}
      </a>
      <h2 class="fcu-text--h2" style="margin: 0;">{{ construct.t("crud-create-rec", {'recname': construct.t(view.name, {'count': 1}) }) }}</h2>
    </div>
    
    <form id="create-form" method="post" up-target="#main-content">
      {{ csrf_field() }}
      {% block form_body %}
        {{ render_form_errors(construct, errors) }}
        <div class="fcu-card-body">
          {% for field, type in fields %}
            {{ render_field(construct, field, type, view, data, ds, errors=errors) }}
          {% endfor %}
        </div>
      {% endblock %}

      <div class="fcu-card-footer" style="display: flex; align-items: center; gap: 16px; background-color: var(--fcu-surface-alt); border-top: 1px solid var(--fcu-border); padding: 16px;">
        {% block form_actions %}
          <button type="submit" class="fcu-btn fcu-btn--primary">
            {{ icon("check", style="font-size: 14px;") }} {{ construct.t("crud-create-button") }}
          </button>
          <a href="{{ next_url(view.url) }}"
             class="fcu-btn fcu-btn--secondary"
             up-follow
             up-target="#main-content">
            {{ icon("cancel", style="font-size: 14px;") }} {{ construct.t("crud-cancel-button") }}
          </a>
        {% endblock %}
      </div>
    </form>
  </div>
  {% block form_scripts %}{{ form_scripts | default('') | safe }}{% endblock %}
{% endblock %}