<div class="row">
    <div class="col-12">
        <div class="card card-shadow">
            <div class="card-body">
            <div class="card-footer">
                <div class="d-flex align-items-center">
                    <label class="mb-0">{{ i18n("sites_page.time_range") }}</label>
                    <select class="form-select ms-2" id="select-granularity" style="width: 16rem">
                        {% for key, value in pairsByField(sites.granularities, 'order', rev) do %}
                            <option {{ (sites.default_granularity == key and 'selected' or '') }} value="{{ key }}">{{ value.label }}</option>
                        {% end %}
                    </select>
                </div>
            </div>
                <table id="table-sites" class="table table-striped table-hover table-bordered w-100">
                    <thead>                
                        <tr>
                            <th>{{ i18n("sites_page.current_sites") }}</th>
                            <th>{{ i18n("sites_page.contacts") }}</th> 
                            <th>{{ i18n("percentage") }}</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="notes bg-light border">
    <b>{{ i18n('notes') }}</b>
    <ul>
        <li>{* i18n('top_host_sites.note_protocol_used') *}</li>
        <li>{* i18n('top_host_sites.note_tot_entries') *}</li>
        <li>{* i18n('top_host_sites.note_time_range') *}</li>
        <li>{* i18n('top_host_sites.note_yesterday_data') *}</li>
    </ul>
</div>
<script type="text/javascript">
    i18n_ext.warning ="{{ i18n('warning', {}) }}";
    i18n_ext.showing_x_to_y_rows = "{{ i18n('showing_x_to_y_rows', {x='_START_', y='_END_', tot='_TOTAL_'}) }}";
    i18n_ext.search = "{{ i18n('search') }}";
    i18n_ext.edit = "{{ i18n('edit') }}";
    i18n_ext.remove = "{{ i18n('remove') }}";
    i18n_ext.all = "{{ i18n('all') }}";
</script>
<script type="text/javascript">
$(document).ready(function() {

    const topSitesEndpoint = "{* sites.endpoint *}"
    
    let dtConfig = DataTableUtils.getStdDatatableConfig();
    dtConfig = DataTableUtils.setAjaxConfig(dtConfig, `${topSitesEndpoint}&hour={{ sites.default_granularity }}`, 'rsp');
    dtConfig = DataTableUtils.extendConfig(dtConfig, {
        order: [[1,'desc']],
        columns: [
            {data: "site"},
            {data: "contacts", render: function (data, type) {
                    if (type === "display") return NtopUtils.fint(data);
                    return data;
            }}, 
            {data: "percentage" , render: $.fn.dataTableExt.showProgress}
        ]
    })

    const $sitesDatatable = $(`#table-sites`).DataTable(dtConfig);

    $(`#select-granularity`).on('change', function(event) {
        const value = $(this).val();
        $sitesDatatable.ajax.url(`${topSitesEndpoint}&hour=${value}`).load();
    });

});
</script>
