{% macro iframe(tab_empty='No tab selected!',tabs=[('Home','/')],active=0) %}
<div class="nav navbar navbar-expand-lg navbar-white navbar-light border-bottom p-0">
  <div class="nav-item dropdown">
    <a class="nav-link bg-danger dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Close</a>
    <div class="dropdown-menu mt-0">
      <a class="dropdown-item" href="#" data-widget="iframe-close" data-type="all">Close All</a>
      <a class="dropdown-item" href="#" data-widget="iframe-close" data-type="all-other">Close All Other</a>
    </div>
  </div>
    <a class="nav-link bg-light" href="#" data-widget="iframe-scrollleft"><i class="fas fa-angle-double-left"></i></a>
    <ul class="navbar-nav" role="tablist">
      {% for t in tabs %}
        {%set on_active='active' if active == loop.index-1 else '' %}
        <li class="nav-item {{on_active}}" role="presentation">
          <a class="nav-link {{on_active}}" data-toggle="row" id="tab-{{loop.index}}" href="#panel-index-{{loop.index}}" 
              role="tab" aria-controls="panel-index-{{loop.index}}" aria-selected="true">{{t.0}}</a>
        </li>
      {%endfor%}
    </ul>
    <a class="nav-link bg-light" href="#" data-widget="iframe-scrollright"><i class="fas fa-angle-double-right"></i></a>
    <a class="nav-link bg-light" href="#" data-widget="iframe-fullscreen"><i class="fas fa-expand"></i></a>
  </div>
  <div class="tab-content">
    {% for t in tabs %}
    {%set on_active = 'active show' if active == loop.index-1 else '' %}
    <div class="tab-pane fade {{on_active}}" id="panel-index-{{loop.index}}" role="tabpanel" aria-labelledby="tab-index-{{loop.index}}">
      <iframe src="{{t.1}}" style="height: 671px;"></iframe>
    </div>
    {%endfor%}
    <div class="tab-empty">
      <h2 class="display-4">{{tab_empty}}</h2>
    </div>
    <div class="tab-loading">
      <div>
        {{caller()}}
      </div>
    </div>
  </div>
{% endmacro %}

{% extends config.BASE_TEMPLATE %}

{% block content_class %}{{super()}} iframe-mode {%endblock%}
{% block content_attrs %}{{super()}} data-widget="iframe" data-loading-screen="750" data-use-navbar-items=false data-auto-iframe-mode=false {% endblock %}

{%block content_header%}{%endblock%}

{% block content_wrapper %}
<div class="">
{% set tabs=[('Users','/admin/user'),('Roles','/admin/role')] %}
{% set tabs=[]%}
    {% call iframe(tab_empty='Choose an App',tabs=tabs) %}
    <h2 class="display-4">Starting App... <i class="fa fa-sync fa-spin"></i></h2>
    {% endcall %}

</div>
{%endblock%}