{% extends "structure/base.html" %}
{% from 'themes/whitelabel/crud/_macros.html' import render_field, render_form_errors %}
{% block content %}
  <div class="fcu-card">
    {% if tab_actions %}
      <div style="border-bottom: 1px solid var(--fcu-border);">
        <nav class="fcu-tabs-nav" style="padding: 0 var(--fcu-layout-padding); border-bottom: none;" aria-label="Tabs">
          <a href="{{ view.url }}"
             class="fcu-tab-link"
             style="display: inline-flex; align-items: center; justify-content: center; padding: 12px 8px;"
             up-follow
             up-target="#main-content"
             title="{{ construct.t('crud-back-button') }}">
            {{ icon("back", style="font-size: 16px;") }}
          </a>
          <a href="{{ url_for(view.endpoint + '.get', id=data[primary_key]) }}"
             class="fcu-tab-link active"
             style="display: inline-flex; align-items: center; gap: 8px;"
             up-follow
             up-target="#main-content">
            {{ icon("edit", style="font-size: 16px;") }} {{ construct.t(view.name, {'count': 1}) }}
          </a>
          {% for action in tab_actions %}
            <a href="{{ url_for(view.endpoint + '.' + action.endpoint, id=data[primary_key]) }}"
               class="fcu-tab-link"
               style="display: inline-flex; align-items: center; gap: 8px;"
               up-follow
               up-target="#main-content">
              {{ icon(action.icon, style="font-size: 16px;") }} {{ construct.t(action.name) }}
            </a>
          {% endfor %}
        </nav>
      </div>
      <div class="fcu-card-body">
        {% if edit_actions %}
          <div style="display: flex; gap: 8px; margin-bottom: 16px;">
            {% for action in edit_actions %}
              <a href="{{ url_for(view.endpoint + '.' + action.endpoint, id=data[primary_key]) }}"
                 class="fcu-btn"
                 up-follow
                 up-target="#main-content">
                {{ icon(action.icon, style="font-size: 14px;") }} {{ construct.t(action.name) }}
              </a>
            {% endfor %}
          </div>
        {% endif %}
        <form id="edit-form" method="post" up-target="#main-content">
          {{ csrf_field() }}
      {{ render_form_errors(construct, errors) }}
          {% for field, type in fields %}
            {{ render_field(construct, field, type, view, data, ds, errors=errors) }}
          {% endfor %}
          <div style="display: flex; align-items: center; gap: 16px; margin-top: 32px;">
            <button type="submit" class="fcu-btn fcu-btn--primary">
              {{ icon("save", style="font-size: 14px;") }} {{ construct.t("crud-save-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>
          </div>
        </form>
      </div>
    {% else %}
      <div class="fcu-card-header" style="display: flex; justify-content: space-between; align-items: center;">
        <div style="display: flex; align-items: center; 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-edit-rec',{'recname': construct.t(view.name, {'count': 1}) }) }}</h2>
        </div>
        {% if edit_actions %}
          <div style="display: flex; gap: 8px;">
            {% for action in edit_actions %}
              <a href="{{ url_for(view.endpoint + '.' + action.endpoint, id=data[primary_key]) }}"
                 style="color: var(--fcu-text-muted); text-decoration: none; display: inline-flex; align-items: center; padding: 4px;"
                 onmouseover="this.style.color='var(--fcu-primary)'"
                 onmouseout="this.style.color='var(--fcu-text-muted)'"
                 title="{{ construct.t(action.name) }}"
                 up-follow
                 up-target="#main-content">
                {{ icon(action.icon) }}
              </a>
            {% endfor %}
          </div>
        {% endif %}
      </div>
      
      <form id="edit-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("save", style="font-size: 14px;") }} {{ construct.t("crud-save-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>
    {% endif %}
  </div>
  {% block form_scripts %}{{ form_scripts | default('') | safe }}{% endblock %}
{% endblock %}