{% extends 'timeseer.html' %}
{% from 'macros.html' import info_popover, bootstrap_icon %}

{% block main %}
<div class="ts-section py-3 my-3">
    <div class="row justify-content-between">
        <h2 class="col-sm-6 h4">Flows</h2>
        <div class="col-sm-auto">
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createFlowModal">
                Create flow
            </button>
        </div>
    </div>
</div>

{% if flows|count == 0 %}
    <div class="row justify-content-center mt-3">
    {{ bootstrap_icon('shuffle', 'text-secondary', size=32) }}
    </div>
    <h4 class="col text-center">You haven't created a flow</h4>
    <div class="row justify-content-center mt-3">
        <div class="col-sm-6 text-center">Timeseer's logic is presented in blocks, which can be evaluated in a specific order defined by flows.</div>
    </div>
    <div class="row justify-content-center mt-3">
        <button class="btn btn-primary col-sm-auto" data-bs-toggle="modal" data-bs-target="#createFlowModal">
            Create flow
        </button>
    </div>
{% endif %}

<div class="pt-3 my-3">
    <form >
        <div class="row align-items-center gx-2">
            {% if flows and flows|selectattr('origin.value', 'in', ['ui', 'control loop'])|list|count > 0 %}
            <div class="col-md-auto">
                <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"
                                formmethod="POST"
                                formaction="{{ url_for('.remove_multiple_flows', sourcename=source_name) }}"
                                >
                                Remove selected
                        </button>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
        <table class="ts-table ts-table-checkbox table table-borderless mt-3" data-ts-target="selectionDropdown">
            <thead class="thead-secondary">
                <th scope="col">
                    {% if flows|count > 0 and flows|selectattr('origin.value', 'in', ['ui', 'control loop'])|list|count > 0 %}
                    <input class="form-check-input" type="checkbox">
                    {% endif %}
                </th>
                <th scope="col">Flow name</th>
                <th scope="col">Flow type</th>
            </thead>
            <tbody>
                {% for flow in flows|sort(attribute='name') %}
                <tr class="border-bottom">
                    <td>
                        {% if flow.origin.value in ['ui', 'control loop'] %}
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" name="{{ flow.name }}">
                        </div>
                        {% else %}
                        {{ info_popover('Generated by Timeseer or created in the configuration.', 'lock', 'text-muted', placement="top") }}
                        {% endif %}
                    </td>
                    <td>
                        <input type="hidden" name="flownames" value="{{ flow.name }}">
                        <a class="ts-table-link text-dark text-decoration-none" href="{{ url_for('.display_flow', flowname=flow.name, sourcename=source_name) }}">
                        {{ flow.name }}
                        {% if scheduled_flows.get(flow.db_id) is not none %}
                            {{ info_popover('Scheduled to run every ' + scheduled_flows.get(flow.db_id).schedule_interval, 'clock') }}
                        {% endif %}
                        </a>
                    </td>
                    {% if flow.origin.value in ['ui', 'control loop'] %}
                    <td class="text-muted">Custom</td>
                    {% elif flow.origin.value == 'resource' %}
                    <td class="text-muted">Configuration</td>
                    {% else %}
                    <td class='text-muted align-text-bottom'><img src="{{ url_for('static', filename='icon.png') }}" width="16"> <span class="align-middle">Default</span></td>
                    {% endif %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </form>
</div>

<div class="modal fade" id="createFlowModal" tabindex="-1" aria-labelledby="createFlowLabel" aria-hidden="true" data-bs-focus="false">
    <div class="modal-dialog modal-dialog-centered modal-xl modal-fullscreen-md-down">
        <div class="modal-content">
                <div id="define-flow"
                    data-relative-dates='{{ relative_dates|tojson|safe }}'
                    data-univariate-module-types='{{ univariate_module_types|tojson|safe }}'
                    data-default-univariate-module-types='{{ default_univariate_module_types|tojson|safe }}'
                    data-multivariate-module-types='{{ multivariate_module_types|tojson|safe }}'
                    data-analyze-url="{{ url_for('.save_flow', sourcename=source_name) }}"
                    data-series-sets='{{ series_sets|sort(attribute="name")|tojson|safe }}'
                    data-series-set-templates='{{ series_set_templates|sort(attribute="name")|tojson|safe}}'>
                </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts_bottom %}
<script src="{{ url_for('static', filename='dist/define-flow.js') }}"></script>
{% endblock %}
