{% extends "base.html" %}
{% block title %}<h2>Tasks list</h2>{% endblock title %}
{% block content %}
    <div id="domains" class="frame">
        <nav>
            <ul>
                <li>
                    {{ domains | length }} domains,
                    {{ total_task_count }} tasks,
                    <a href="{{ url_for('get_agents_view') }}">
                        {{ agents }} agent{{ 's' if agents > 1 }}
                    </a>
                </li>
            </ul>
            {# djlint:off H021 #}
            <ul id="js-only" style="display: none; ">{# djlint:on #}
                <li>
                    <input id="domain-search"
                           type="search"
                           spellcheck="false"
                           placeholder="Filter domains list"
                           aria-label="Filter domains list"
                    />
                </li>
                <li>
                    <label for="select-status">Show domains with status:</label>
                    <select id="select-status">
                        <option value="not-ok" {{ "selected" if selected == None }}>Not OK</option>
                        <option value="ok" {{ "selected" if selected == "ok" }}>✅ OK</option>
                        <option value="warning" {{ "selected" if selected == "warning" }}>⚠️ Warning</option>
                        <option value="critical" {{ "selected" if selected == "critical" }}>❌ Critical</option>
                        <option value="unknown" {{ "selected" if selected == "unknown" }}>❔ Unknown</option>
                        <option value="all" {{ "selected" if selected == "all" }}>All</option>
                    </select>
                </li>
            </ul>
        </nav>
        <table id="domains-list" role="grid">
            <thead>
                <tr>
                    <th>Domain</th>
                    <th class="today">Severities</th>
                    <th>Last check</th>
                </tr>
            </thead>

            <tbody id="domains-body">
                {%- set lex = { "ok": "✅ OK", "warning": "⚠️ Warning", "critical": "❌ Critical", "unknown": "❔ Unknown" } -%}
                {% for (domain, statuses) in domains -%}
                    {%- set st = [] -%}
                    {%- for i in statuses -%}
                        {%- set _ = st.append(lex[i]) -%}
                    {% endfor -%}
                <tr data-domain="{{ domain }}">
                    <td>
                        <a href="{{ url_for('get_domain_tasks_view', domain=domain) }}">
                            {{ domain }}
                        </a>
                    </td>
                    <td class="status highlight">
                        {{ st | join(", ") }}
                    </td>
                    <td>{{ last_checks.get(domain) }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <script>
        function filterDomains() {
            let status = document.getElementById('select-status');
            let filter = document.getElementById('domain-search').value;
            console.log(filter)
            document.querySelectorAll('[data-domain]').forEach((item) => {
                if (filter && item.dataset.domain.indexOf(filter) == -1) {
                    item.style.display = 'none';
                } else {
                    item.style.display = null;
                }
            })
        }
        function showStatus() {
            let status = document.getElementById('select-status');
            url = new URL('{{ url_for("get_domains_view") }}');
            url.search = `?s=${status.value}`;
            window.location.href = url;
        }
        document.getElementById('domain-search').addEventListener('input', filterDomains);
        document.getElementById('select-status').addEventListener('change', showStatus);
        filterDomains()
        document.getElementById('js-only').style.display = null;
    </script>
{% endblock content %}