<div class="container-fluid">
    <div class="row mb-3">
        <div class="col-12">
            <table class="table w-100 table-bordered table-striped table-hover my-3" id="datasources-list">
                <thead>
                    <tr>
                        <th>{{ i18n("name") }}</th>
                        <th>{{ i18n("key") }}</th>
                        <th>{{ i18n("datasources.scope") }}</th>
                        <th>{{ i18n("datasources.origin") }}</th>
                        <th>{{ i18n("datasources.retention") }}</th>
                        <th>{{ i18n("actions") }}</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

<template id="ds-source-tag">
        <div class="col-6">
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text"></span>
                </div>
                <input required name="tag[]" type="text" class="form-control tag">
            </div>
        </div>
    </div>
</template>
<template id='ds-source'>
    <div class="card my-1">
        <div class="card-header">
            <a data-toggle="collapse" class="text-dark" href="#" >
                <b>{{ i18n("datasources.new_source") }}</b>
            </a>
            <a class='btn-remove-source text-secondary float-right' href="#">
                <i class="fas fa-trash"></i>
            </a>
        </div>
        <div class="collapse show">
            <div class="card-body">
                <fieldset>
                    <div class="form-row">
                        <div class="col-6">
                            <label>{{ i18n("datasources.families") }}:</label>
                            <select name="family[]" required class="form-control family">
                                <option selected disabled>{{ i18n("datasources.select_family") }}</option>
                                {% for key, value in pairsByKeys(datasources_list.timeseries, asc) do %}
                                    <option value="{{ key }}">{{ key }}</option>
                                {% end %}
                            </select>
                        </div>
                        <div class="col-6">
                            <div class="step step-1" style="display: none;">
                                <label>{{ i18n("datasources.schema") }}:</label>
                                <select name="schema[]" required class="form-control schema">
                                    <option selected disabled>{{ i18n("datasources.select_schema") }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-row my-2">
                        <div class="col-12">
                            <div class="step step-2" style="display: none;">
                                <label>{{ i18n("datasources.metrics") }}:</label>
                                <select name="metric[]" class="form-control metric">
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="step step-2" style="display: none;">
                        <label>Tags:</label>
                        <div class="form-row my-2 tags-container">

                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</template>

{* template_utils.gen("pages/modals/datasources/add.template", datasources_list) *}
{* template_utils.gen("pages/modals/datasources/remove.template", datasources_list) *}
{* template_utils.gen("pages/modals/datasources/edit.template", datasources_list) *}

<link href="{{ ntop.getHttpPrefix() }}/datatables/datatables.min.css" rel="stylesheet"/>
<script type="text/javascript">

i18n.warning ="{{ i18n('warning', {}) }}";
i18n.expired_csrf = "{{ i18n('expired_csrf') }}";
i18n.showing_x_to_y_rows = "{{ i18n('showing_x_to_y_rows', {x='_START_', y='_END_', tot='_TOTAL_'}) }}";
i18n.search = "{{ i18n('search') }}";
i18n.source_exists = "{{ i18n('datasources.source_exists') }}";
const ds_csrf = "{{ csrf }}";

const timeseriesFamilies = {* json.encode(datasources_list.timeseries) *};

</script>
<script type="text/javascript" src="{{ ntop.getHttpPrefix() }}/js/pages/datasource_list.js"></script>
