<div>
    <script>$("#browser-warning").hide();</script>

    <nav class="navbar navbar-main navbar-expand navbar-dark fixed-top bg-dark shadow flex-fill">
        <a href="" class="navbar-brand">Grond Report</a>
        <input
                class="form-control form-control-dark"
                type="text"
                placeholder="Search"
                aria-label="Search"
                ng-model="keyword" />
        <a
                class="btn btn-primary ml-3"
                href=""
                ng-if="rl.get_selected().length > 1"
                ng-click="toggle_compare_mode()">
            {{ compare_mode ? 'Compare off' : 'Compare' }}
        </a>
        <a
                class="btn btn-primary ml-3"
                href=""
                ng-click="open_modal()">
            Open
        </a>
        <div ng-controller="InfoController">
            <a
                    ng-if="have_archive()"
                    class="btn btn-primary ml-3"
                    href="grond-reports.tar.gz"
                    role="button">
                Download
            </a>
        </div>
    </nav>

    <nav style="top:3.5rem" class="navbar navbar-tabs navbar-expand fixed-top bg-dark shadow align-items-end p-0">
        <div class="col-2">
        </div>
        <div class="{{ compare_mode ? 'col-5' : 'col-10' }}">
            <ul class="nav nav-tabs">
                <li ng-if="get_selected().length > (compare_mode ? 2 : 4)" class="nav-item ml-2">
                    <a
                            ng-click="set_primary_problem(get_offset_problem_name(primary_problem, -1, true))"
                            class="nav-link {{ get_offset_problem_name(primary_problem, -1, false) ? '' : 'disabled' }}"
                            href="">◀</a>
                </li>
                <li
                        class="nav-item ml-2 {{ tab_col_width() }}"
                        ng-repeat="problem_name in get_selected()"
                        ng-if="(problem_name == primary_problem) || get_selected().length <= (compare_mode ? 2 : 4)">
                    <a
                            ng-click="set_primary_problem(problem_name)"
                            class="nav-link {{ (problem_name == primary_problem) ? 'active' : '' }}"
                            href="">
                        {{ problem_name }}
                    </a>
                </li>
                <li ng-if="get_selected().length > (compare_mode ? 2 : 4)" class="nav-item ml-2">
                    <a
                            ng-click="set_primary_problem(get_offset_problem_name(primary_problem, 1, true))"
                            class="nav-link {{ get_offset_problem_name(primary_problem, 1, false) ? '' : 'disabled' }}"
                            href="">▶</a>
                </li>
            </ul>
        </div>
        <div class="col-5" ng-if="compare_mode">
            <ul class="nav nav-tabs">
                <li ng-if="get_selected().length > (compare_mode ? 2 : 4)" class="nav-item ml-2">
                    <a
                            ng-click="set_secondary_problem(get_offset_problem_name(secondary_problem, -1, true))"
                            class="nav-link {{ get_offset_problem_name(secondary_problem, -1, false) ? '' : 'disabled' }}"
                            href="">◀</a>
                </li>
                <li
                        class="nav-item ml-2 {{ tab_col_width() }}"
                        ng-repeat="problem_name in get_selected()"
                        ng-if="(problem_name == secondary_problem) || get_selected().length <= (compare_mode ? 2 : 4)">
                    <a
                            ng-click="set_secondary_problem(problem_name)"
                            class="nav-link {{ (problem_name == secondary_problem) ? 'active' : '' }}"
                            href="">
                        {{ problem_name }}
                    </a>
                </li>
                <li ng-if="get_selected().length > (compare_mode ? 2 : 4)" class="nav-item ml-2">
                    <a
                            ng-click="set_secondary_problem(get_offset_problem_name(secondary_problem, 1, true))"
                            class="nav-link {{ get_offset_problem_name(secondary_problem, 1, false) ? '' : 'disabled' }}"
                            href="">▶</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="row no-gutters">
        <nav class="col-2 bg-light sidebar">
            <div class="sidebar-sticky ng-cloak">
                <ul class="nav flex-column">
                  <li class="nav-item" style="margin-bottom: 1em">
                    <a href="" ng-click="select_groups_none()" class="nav-link">
                        <span data-feather="home"></span>
                        Overview
                    </a>
                  </li>
                  <li ng-if="have_groups_avail()" class="nav-item">
                    <a href="" ng-click="select_groups_all()" class="nav-link">
                        <span data-feather="book-open"></span>
                        All
                    </a>
                  </li>
                  <li class="nav-item plot-title" ng-repeat="group in get_groups_avail()">
                    <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted clickable"
                            ng-if="group.first_in_section"
                            ng-click="select_group_by_section_name(group.section)">
                        <span>{{ group.section }}</span>
                    </h6>
                    <a href="" ng-click="select_group_by_name_variant(group.name, group.variant)" class="nav-link {{ (group.can_compare && group_matches_keyword(group)) ? '' : 'disabled' }}">
                        <span data-feather="{{ group.feather_icon }}"></span>
                        {{ group.pri.title | nounderscore }} {{ group.variant == 'default' ? '' : '(' + group.variant + ')' }}
                    </a>
                  </li>
                </ul>
            </div>
        </nav>

        <main role="main" class="col-10 ml-auto mt-5">
            <div ng-show="groups_selected().length == 0 || all_groups_selected()" ng-controller="InfoController" ng-cloak>
                <div class="row m-3">
                    <div class="col">
                        <h1 class="plot-title">{{ get_info().title }}</h1>
                        <div ng-bind-html="get_info().description | pformat"></div>
                    </div>
                </div>

            </div>
            <div ng-repeat="group in groups_selected()">
                <group-plots ng-if="group.template == 'group-plots'"></group-plots>
                <parameter-table ng-if="group.template == 'parameter-table'"></parameter-table>
                <config-file ng-if="group.template == 'config-file'"></config-file>
                <problem-info ng-if="group.template == 'problem-info'"></problem-info>
            </div>
        </main>
    </div>

    <report-list-modal></report-list-modal>

</div>

