{% extends "_layout.html" %}

{% block content %}

    <div>
        <h2>{{ hawat_current_view.get_view_title() }}</h2>
        <hr>

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
    {%- for chartgkey, chartlist in chartdict.items() %}
            <li role="presentation" class="nav-item">
                <a href="#tab-group-{{ chartgkey }}" aria-controls="tab-group-{{ chartgkey }}" role="tab" data-bs-toggle="tab" class="nav-link {% if loop.first %} active{% endif %}">
                    {{ chartlist[0]['legend'] }}
                </a>
            </li>
    {%- endfor %}
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">

    {%- for chartgkey, chartlist in chartdict.items() %}

            <div role="tabpanel" class="tab-pane fade{% if loop.first %} in show active{% endif %}" id="tab-group-{{ chartgkey }}">
                <!--<h3 title="{{ chartlist[0]['legend'] }}">{{ chartlist[0]['legend'] }}</h3>-->
                <ul id="dt-nav" class="nav nav-tabs" role="tablist">
        {%- for chart in chartlist %}
                    <li role="presentation" class="nav-item">
                        <a href="#tab-item-{{ chart['chid'] }}" aria-controls="tab-item-{{ chart['chid'] }}" role="tab" data-bs-toggle="tab" class="nav-link{% if loop.first %} active{% endif %}">
                            <span title="{{ chart['title'] }}" data-bs-toggle="tooltip" data-bs-placement="top">
                                {{ chart['link'] }}<br>
            {%- if check_file_exists(chart['path_schart']) %}
                                <img src="{{ url_for('performance.data', filename=chart['file_schart']) }}" width="75" height="25" alt="Link to performance data in the database.">
            {%- endif %}
                            </span>
                        </a>
                    </li>
        {%- endfor %}
                </ul>
                <div id="dt-content" class="tab-content">
        {%- for chart in chartlist %}
                    <div role="tabpanel" class="tab-pane fade{% if loop.first %} in show active{% endif %}" id="tab-item-{{ chart['chid'] }}">
                        <br>
                        <!--<h4>{{ chart['title'] }}</h4>-->
            {%- if check_file_exists(chart['path_chart']) %}
                        <div class="clearfix">
                            <div class="btn-group-vertical rrd-button-group" role="group" aria-label="...">
                                <a class="btn btn-secondary" href="{{ url_for('performance.data', filename=chart['file_meta']) }}" role="button" title="{{ _('Download chart metadata') }}" data-bs-toggle="tooltip" data-bs-placement="top">
                                    RRD Meta
                                </a>
                                <a class="btn btn-secondary" href="{{ url_for('performance.data', filename=chart['file_xport']) }}" role="button" title="{{ _('Download chart data export') }}" data-bs-toggle="tooltip" data-bs-placement="top">
                                    RRD Xport
                                </a>
                            </div>
                            <div class="float-start">
                                <img src="{{ url_for('performance.data', filename=chart['file_chart']) }}" alt="{{ chart['title'] }}">
                            </div>
                        </div>
            {%- else %}
                        <img src="{{ url_for('performance.static', filename='chart-missing.png') }}" alt="{{ _('Unable to find chart image file') }}">
            {%- endif %}

                    </div>
        {%- endfor %}
                </div>

            </div>

    {%- endfor %}

        </div>

    </div>
{% endblock content %}
