<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header pull-left">
        <ul class="nav navbar-nav {{dialogNavigationClass}}" role="tablist">
            <li class="active">
                <a role="tab" data-toggle="tab" data-name="infoSummary" href="#{{dialogSummaryContainerId}}">
                    <i class="fa fa-info fa-fw"></i>&nbsp;Info
                </a>
            </li>
            <li class="">
                <a role="tab" data-toggle="tab" data-name="infoUsers" href="#{{dialogUsersContainerId}}">
                    <i class="fa fa-plane fa-fw"></i>&nbsp;Activity
                </a>
            </li>
        </ul>
    </div>

    <div class="navbar-header pull-right">
        <ul class="nav navbar-nav {{dialogNavigationClass}}">
            <li class="">
                <a id="{{dialogRefreshContainerId}}" href="javascript:void(0);" data-action="refresh">
                    <i class="fa fa-refresh fa-fw"></i>&nbsp;Refresh
                </a>
            </li>
        </ul>
    </div>
</nav>

<div class="tab-content">

    {{! "summary" tab ------------------------------------------------------ }}
    <div role="tabpanel" class="tab-pane fade in active" id="{{dialogSummaryContainerId}}">
        <div class="alert alert-info fade in hidden-md hidden-lg">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><i class="fa fa-close"></i></button>
            <span class="txt-color txt-color-information">Info</span>
            <small> Your browser window is to small. Resize it to obtain more columns.</small>
        </div>

        <h4><i class="fa fa-code-fork fa-lg fa-fw"></i> Map</h4>

        <div id="{{mapInfoId}}" class="pf-dynamic-area">
        </div>

        <h4><i class="fa fa-sun-o fa-lg fa-fw"></i> Systems</h4>

        <div id="{{mapInfoSystemsId}}" class="pf-dynamic-area">
        </div>

        <h4><i class="fa fa-chain fa-lg fa-fw"></i> Connections</h4>

        <div id="{{mapInfoConnectionsId}}" class="pf-dynamic-area">
        </div>
    </div>

    {{! "users" tab -------------------------------------------------------- }}
    <div role="tabpanel" class="tab-pane fade" id="{{dialogUsersContainerId}}">
        <h4><i class="fa fa-male fa-lg fa-fw"></i> Active pilots</h4>

        <div id="{{mapInfoUsersId}}" class="pf-dynamic-area">
        </div>
    </div>
</div>

