{% 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 | length }} agent{{ 's' if agents | length > 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>Not OK</option>
                        <option value="ok">✅ OK</option>
                        <option value="warning">⚠️ Warning</option>
                        <option value="critical">❌ Critical</option>
                        <option value="unknown">❔ Unknown</option>
                        <option value="all">All</option>
                    </select>
                </li>
            </ul>
        </nav>
        <table id="domains-list" role="grid">
            <thead>
                <tr>
                    <th>Domain</th>
                    <th class="today">Current status</th>
                    <th>Last check</th>
                </tr>
            </thead>

            <tbody id="domains-body">
                {% for (domain, status) in domains %}
                <tr data-status="{{ status }}"
                    data-domain="{{ domain }}">
                    <td>
                        <a href="{{ url_for('get_domain_tasks_view', domain=domain) }}">
                            {{ domain }}
                        </a>
                    </td>
                    <td class="status highlight">
                        {% if status == "ok" %}
                            ✅ OK
                        {% elif status == "warning" %}
                            ⚠️ Warning
                        {% elif status == "critical" %}
                            ❌ Critical
                        {% elif status == "unknown" %}
                            ❔ Unknown
                        {% endif %}
                    </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)
            if (status.value === 'all') {
                document.querySelectorAll('[data-status]').forEach((item) => {
                    if (filter && item.dataset.domain.indexOf(filter) == -1) {
                        item.style.display = 'none';
                    } else {
                        item.style.display = null;
                    }
                })
            } else if (status.value === 'not-ok') {
                document.querySelectorAll('[data-status]').forEach((item) => {
                    if (item.dataset.status !== 'ok') {
                        if (filter && item.dataset.domain.indexOf(filter) == -1) {
                            item.style.display = 'none';
                        } else {
                            item.style.display = null;
                        }
                    } else {
                        item.style.display = 'none';
                    }
                })
            } else {
                document.querySelectorAll('[data-status]').forEach((item) => {
                    if (item.dataset.status === status.value) {
                        if (filter && item.dataset.domain.indexOf(filter) == -1) {
                            item.style.display = 'none';
                        } else {
                            item.style.display = null;
                        }
                    } else {
                        item.style.display = 'none';
                    }
                })
            }
        }
        document.getElementById('select-status').addEventListener('change', filterDomains);
        document.getElementById('domain-search').addEventListener('input', filterDomains);
        filterDomains()
        document.getElementById('js-only').style.display = null;
    </script>
{% endblock content %}
