{% extends "structure/base.html" %}
{% block content %}
  <div class="fcu-card">
    <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=id) }}"
           class="fcu-tab-link {% if active_tab == 'edit' %}active{% endif %}"
           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=id) }}"
             class="fcu-tab-link {% if active_tab == action.endpoint %}active{% endif %}"
             style="display: inline-flex; align-items: center; gap: 8px;"
             up-alias="{{ url_for(view.endpoint + '.' + action.endpoint, id=id) }}*"
             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 tab_content_id %}id="{{ tab_content_id }}"{% endif %}>
      {% if tab_content %}{{ tab_content|safe }}{% endif %}
      {% block tab_content %}{% endblock %}
    </div>
  </div>
{% endblock %}