{% extends "themes/whitelabel/crud/tab_view.html" %}
{% block tab_content %}
  <div id="{{ nested_content_id }}">
    <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="Nested tabs">
          <a href="{{ url_for(view.endpoint + '.' + edit_ep, id=id, child_id=child_id) }}"
             class="fcu-tab-link {% if nested_active_tab == 'edit' %}active{% endif %}"
             style="display: inline-flex; align-items: center; gap: 8px; margin-right: 16px;"
             up-follow
             up-target="{{ nested_content_target }}"
             up-history="true">
            {{ icon("edit", style="font-size: 16px;") }} {{ construct.t(child_entity_name_key, {'count': 1}) }}
          </a>
          {% for action in child_tab_actions %}
            <a href="{{ url_for(view.endpoint + '.' + action.endpoint, id=id, child_id=child_id) }}"
               class="fcu-tab-link {% if nested_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, child_id=child_id) }}*"
               up-follow
               up-target="{{ nested_content_target }}"
               up-history="true">
              {{ icon(action.icon, style="font-size: 16px;") }} {{ construct.t(action.name) }}
            </a>
          {% endfor %}
        </nav>
      </div>
      <div class="fcu-card-body">
        {{ nested_content|safe }}
      </div>
    </div>
  </div>
{% endblock %}