{% extends 'timeseer.html' %}

{% from 'macros.html' import alerter, bootstrap_icon, info_popover %}
{% from 'resources.html' import resource_breadcrumb, resource_menu with context %}

{% block menu %}
{{ resource_menu('Data sets') }}
{% endblock %}

{% block styles %}
<style nonce="{{ csp_nonce }}">
  #description-toggle[aria-expanded="true"] {
    display: none;
  }
</style>
{% endblock %}

{% block breadcrumb %}
{{
    resource_breadcrumb(["Data sets"])
}}
{% endblock %}

{% block main %}
<div class="ts-section pb-3 mb-3">
    <div class="row justify-content-between">
        <h2 class="col-sm-6 h4">Manage Data sets</h2>
        <div class="col-sm-auto">
            <a
                class="btn btn-primary"
                data-bs-toggle="offcanvas" data-bs-target="#createDataSetOffCanvas"
                >
                Create new
            </a>
        </div>
    </div>
</div>

<div class="my-3 py-3">
    {{ alerter() }}

    <form class="pb-3">
        {% if source_name %}
        <input type="hidden" name="sourcename" value="{{ source_name }}">
        {% endif %}
        <div class="row g-2">
            {% if data_sets and data_sets|count > 0 %}
            <div class="col-sm-auto">
                {% if data_sets|selectattr('origin.value', '==', 'ui')|list|count > 0 %}
                <div class="btn-group ts-dropdown-select-button">
                    <a class="btn border border-secondary dropdown-toggle"
                       href="#"
                       role="button"
                       id="selectionDropdown"
                       data-bs-toggle="dropdown"
                       aria-haspopup="true"
                       aria-expanded="false">
                    </a>
                    <div class="dropdown-menu" aria-labelledby="selectionDropdown">
                        <button type="submit"
                                class="dropdown-item ts-dropdown-action"
                                form="datasetselection"
                                formmethod="POST"
                                formaction="{{ url_for('.remove_multiple_data_sets', sourcename=source_name) }}"
                                >
                                Remove selected
                        </button>
                    </div>
                </div>
                {% endif %}
            </div>
            {% endif %}
            {% if data_sets|count > 1 or pattern %}
            <div class="col">
                <div class="input-group">
                    <label class="visually-hidden" for="setFilterInput">Filter data sets by name</label>
                    <input class="form-control" id="setFilterInput" name="datasetpattern" value="{{ pattern }}" placeholder="Filter data sets by name">
                    <button id="clearSearch" class="btn btn-secondary" type="button">{{ bootstrap_icon('x-lg') }}</button>
                </div>
            </div>
            {% endif %}
        </div>
    </form>

    {% if data_sets|count > 0 %}
    <form id="datasetselection">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        {% if source_name %}
        <input type="hidden" name="sourcename" value="{{ source_name }}">
        {% endif %}
        <table class="ts-table ts-table-checkbox table table-borderless mt-3" data-ts-target="selectionDropdown" id="dataSetTable">
            <thead class="thead-secondary">
                <tr class="border-top border-bottom">
                    <th scope="col">
                        {% if data_sets|selectattr('origin.value', '==', 'ui')|list|count > 0 %}
                        <input type="checkbox" class="form-check-input">
                        {% endif %}
                    </th>
                    <th scope="col">Data set name</th>
                    <th scope="col">Start date</th>
                    <th scope="col">End date</th>
                </tr>
            </thead>
            <tbody>
                {% for set in data_sets|sort(attribute='name') %}
                <tr class="border-bottom">
                    <td>
                      {% if set.origin.value == 'ui' %}
                      <input class="form-check-input" type="checkbox" name="{{ set.name }}" {% if checked %}checked{% endif %}>
                      {% else %}
                      {{ info_popover('Generated by Timeseer or created in the configuration.', 'lock', 'text-muted', placement="top") }}
                      {% endif %}
                    </td>
                    <td>
                        <input type="hidden" name="datasetnames" value="{{ set.name }}">
                        <a class="ts-table-link text-decoration-none text-dark" href="{{ url_for('data_sets.series_management', datasetid=set.db_id, sourcename=source_name) }}">
                            {{ set.name }}
                        </a>
                    </td>
                    <td>
                        {{ set.start_date|ts_datetime }}
                    </td>
                    <td>
                        {{ set.end_date|ts_datetime }}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </form>
    {% endif %}
    <div id="noDataSetsMsg" class="alert alert-info {% if data_sets|length %}d-none{% endif %}">
        No data sets found.
    </div>
</div>

{% if data_sets|count > 0 %}
<script nonce="{{ csp_nonce }}">
    console.log('123')
    window.useTableFilter('#dataSetTable', '#noDataSetsMsg', '#setFilterInput', '#clearSearch')
</script>
{% endif %}
<div class="offcanvas offcanvas-end" tabindex="-1" id="createDataSetOffCanvas">
    <div class="offcanvas-header ts-section bg-light">
        <h4 class="offcanvas-title">Create data set</h4>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div id="define-data-set">
            <form id="createdataset" method="POST">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div class="mb-3">
                    <label class="form-label" for="datasetName">Name</label>
                    <input class="form-control" id="datasetName" name="name" autofocus required>
                </div>
                <a
                  id="description-toggle"
                  data-bs-toggle="collapse"
                  href="#descriptionSection"
                  role="button"
                  aria-expanded="false"
                  aria-controls="descriptionSection"
                >+ Add description
                </a>
                <div class="collapse" id="descriptionSection">
                    <label class='form-label' for='description'>
                      Description
                    </label>
                    <textarea
                      class='form-control'
                      name='description'
                      id='description'
                      rows='10'></textarea>
                    <div class='form-text'>
                      The description will appear as help text wherever the flow is used.
                      For maximum effect,
                      use a one-liner with a general description,
                      followed by a blank line,
                      followed by longer explanation of why the flow is important.
                      The longer explanation can contain HTML markup.
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm">
                        <label for="startDateInput" class="col-form-label">Start date</label>
                        <input type="datetime-local" step="1" class="form-control" id="startDateInput" name="startdate" data-ts-datetime-value="{{default_start_date}}" required>
                    </div>
                    <div class="col-sm">
                        <label for="endDateInput" class="col-form-label">End date</label>
                        <input type="datetime-local" step="1" class="form-control" id="endDateInput" name="enddate" data-ts-datetime-value="{{default_end_date}}" required>
                    </div>
                </div>
                <div class="mt-3">
                    <button
                        class="btn btn-primary me-2"
                        form="createdataset"
                        type="submit"
                        formmethod="POST"
                        formaction="{{ url_for('.list_data_sets') }}"
                        >
                          Create
                    </button>
                    <a data-bs-dismiss="offcanvas" class="btn btn-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}
