{% extends 'timeseer.html' %}

{% from 'macros.html' import alerter %}

{% block main %}
<div class="ts-section py-3 my-3">
    <h2 class="h4">Smart tagging</h2>
</div>

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

    {% if smart_taggings|count > 0 %}
    <form class="pb-3">
        {% if source_name %}
        <input type="hidden" name="sourcename" value="{{ source_name }}">
        {% endif %}
        <div class="row g-2">
            {% if smart_taggings  %}
            <div class="col-sm-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"
                                form="smarttaggingselection"
                                formmethod="POST"
                                formaction="{{ url_for('.remove_smart_taggings') }}"
                                >
                                Remove selected
                        </button>
                    </div>
                </div>
            </div>
            {% endif %}
            {% if smart_taggings|count > 1 or pattern %}
            <div class="col">
                <label class="visually-hidden" for="setFilterInput">Filter smart taggings for series sets by name</label>
                <input class="form-control" id="setFilterInput" name="seriessetpattern" value="{{ pattern }}" placeholder="Filter smart taggings by name">
            </div>
            <div class="col-sm-auto">
                <button id="clearSearch" class="btn btn-secondary" type="button">Clear</button>
            </div>
            {% endif %}
        </div>
    </form>

    <form id="smarttaggingselection">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        {% if source_name %}
        <input type="hidden" name="sourcename" value="{{ source_name }}">
        {% endif %}
        <table id="smartTaggingsTable" class="ts-table ts-table-checkbox table table-borderless mt-3" data-ts-target="selectionDropdown">
            <thead class="thead-secondary">
                <tr class="border-top border-bottom">
                    <th scope="col">
                        <input type="checkbox" class="form-check-input">
                    </th>
                    <th scope="col">Smart tagging series set name</th>
                </tr>
            </thead>
            <tbody>
                {% for smart_tagging in smart_taggings|sort(attribute='name') %}
                <tr class="border-bottom">
                    <td>
                        <input class="form-check-input" type="checkbox" name="{{ smart_tagging.db_id }}" {% if checked %}checked{% endif %}>
                    </td>
                    <td>
                        <input type="hidden" name="smarttaggingids" value="{{ smart_tagging.db_id }}">
                        <a class="ts-table-link text-decoration-none text-dark" href="{{ url_for('.display_smart_tagging', seriessetname=smart_tagging.name, sourcename=source_name) }}">
                            {{ smart_tagging.name }}
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </form>
    {% endif %}
    <p id="noTaggingsMessage" class="alert alert-info {% if smart_taggings %}d-none{% endif %}">
        No smart taggings defined.
    </p>

    <div class="card">
        <h2 class="card-header">Create a new smart tagging</h2>
        <div class="card-body">
            <form action="{{ url_for('.create_smart_tagging') }}" method="POST">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div class="mb-3">
                    <label for="seriesSetSelect" class="form-label">Select a series set</label>
                    <select name="seriessetid" id="seriesSetSelect" class="form-select">
                        {% for series_set in series_sets|sort(attribute='name') %}
                        <option value="{{ series_set.db_id }}">{{ series_set.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="mb-3">
                    <button type="submit" class="btn btn-primary">Create smart tagging</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script nonce="{{ csp_nonce }}">
    useTableFilter('#smartTaggingsTable', '#noTaggingsMessage', '#setFilterInput', '#clearSearch')
</script>

{% endblock %}
