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

    {% block subcontent %}
        <div id="alert"></div>
        <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;"><date>{{ "{:%Y-%m-%d %H:%M:%S}".format(row['last-accessed'])
                                                    if row['last-accessed'] }}</date></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({
            "createdRow": function( row, data, dataIndex ) {
                $(row).find("time").text(function (i, ms) {
                    return format_time(ms);
                });
                $(row).find("date").text(function (i, date) {
                    return format_date(date);
                });
            }
        }).order([[4, "desc"]]).draw();

        $.get( "https://pypi.org/pypi/Flask-MonitoringDashboard/json", function( data ) {

            var pypi_version = data['info']['version'];

            if (pypi_version !== "{{ version }}"){
                var alert = $('#alert');
                alert.addClass("alert alert-warning alert-dismissible");
                alert.html(
                    "<a href=\"#\" class=\"close\" data-dismiss=\"alert\" aria-label=\"close\">&times;</a>" +
                    "<strong>Warning:</strong> Version " + pypi_version + " is now available, while you " +
                    "are still using version {{ version }}.");
            }
        });

    </script>
{% endblock %}