{% extends "fmd_base.html" %}
{% block content %}

    {% block subcontent %}
        <div class="card mb-3">
            <div class="card-header"><h4>{{ title }}</h4></div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"
                           data-page-length="10">
                        <thead>
                        <tr>
                            <th colspan="2"></th>
                            <th colspan="3" style="text-align: center; font-size: large;">Number of hits</th>
                            <th colspan="3" style="text-align: center; font-size: large;">Median request duration
                            </th>
                            <th></th>
                        </tr>
                        <tr>
                            <th></th>
                            <th>Endpoint</th>
                            <th>Today</th>
                            <th>Last 7 days</th>
                            <th>Overall</th>
                            <th>Today</th>
                            <th>Last 7 days</th>
                            <th>Overall</th>
                            <th>Last requested</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for row in result %}
                            <tr style="cursor: pointer"
                                onclick="window.location='{{ url_for('dashboard.endpoint_hourly_load',
                                endpoint_id=row['id']) }}';">
                                <td style="background-color: {{ row.color }}"></td>
                                <td style="max-width: 200px;">{{ row.name }}</td>
                                <td style="text-align: right;">{{ "{:,d}".format(row['hits-today']) }}</td>
                                <td style="text-align: right;">{{ "{:,d}".format(row['hits-week']) }}</td>
                                <td style="text-align: right;">{{ "{:,d}".format(row['hits-overall']) }}</td>
                                <td style="text-align: right;"><time>{{ row['median-today'] }}</time></td>
                                <td style="text-align: right;"><time>{{ row['median-week'] }}</time></td>
                                <td style="text-align: right;"><time>{{ row['median-overall'] }}</time></td>
                                <td style="text-align: center;">{{ "{:%Y-%m-%d %H:%M:%S }".format(row['last-accessed'])
                                                    if row['last-accessed'] }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {% if is_admin %}
            <div class="card mb-3">
                <div class="card-header"><h4>Export data</h4></div>
                <div class="card-body">
                    <div class="panel-heading">
                        <a href="{{ url_for('dashboard.download_csv') }}"
                           class="btn btn-primary btn-sm">Download CSV</a>
                        <a href="{{ url_for('dashboard.view_csv') }}"
                           class="btn btn-primary btn-sm">View CSV</a>
                    </div>
                </div>
            </div>
        {% endif %}

    {% endblock %}
{% endblock %}

{% block script %}
    <script type="text/javascript">
        $('#dataTable').DataTable().order([[4, "desc"]]).draw();
    </script>
{% endblock %}