{#
/**
 * @file
 * Default theme implementation to display an Apigee Edge App.
 *
 * Available variables:
 * - entity: The Apigee Edge App entity.
 * - content: All app items. Use {{ content }} to print them all,
 * - attributes: HTML attributes for the containing element.
 *
 * @ingroup themeable
 */
#}
{%
  set classes = [
  'app',
  'app--type-' ~ entity.getEntityTypeId|clean_class,
  view_mode ? 'app--view-mode-' ~ view_mode|clean_class,
]
%}

{% set tab_suffix = entity.name|clean_class %}

<div{{ attributes.addClass(classes) }}>
  <ul class="nav nav-tabs--secondary mb-4">
    {% if content.callbackUrl or content.credentials.primary_wrapper %}
      <li class="nav-item">
        <a class="nav-link active" id="keys-tab-{{ tab_suffix }}" data-toggle="tab" href="#keys-{{ tab_suffix }}">
          {{ "Keys"|t }}
        </a>
      </li>
    {% endif %}

    {% if content.credentials.secondary_wrapper %}
      <li class="nav-item">
        <a class="nav-link" id="products-tab-{{ tab_suffix }}" data-toggle="tab" href="#products-{{ tab_suffix }}">
          {{ "Products"|t }}
        </a>
      </li>
    {% endif %}

    <li class="nav-item">
      <a class="nav-link" id="details-tab-{{ tab_suffix }}" data-toggle="tab" href="#details-{{ tab_suffix }}">
        {{ "Details"|t }}
      </a>
    </li>
  </ul>

  <div class="tab-content">
    {% if content.callbackUrl or content.credentials.primary_wrapper %}
      <div class="tab-pane show active" id="keys-{{ tab_suffix }}">
        {{ content.status }}
        {{ content.callbackUrl }}
        {{ content.credentials.primary_wrapper }}
      </div>
    {% endif %}

    {% if content.credentials.secondary_wrapper %}
      <div class="tab-pane" id="products-{{ tab_suffix }}">
        {{ content.credentials.secondary_wrapper|without('title') }}
      </div>
    {% endif %}

    <div class="tab-pane" id="details-{{ tab_suffix }}">
      {{ content|without('status', 'callbackUrl', 'credentials') }}
    </div>
  </div>
</div>

