{% extends "base.html" %}

{% block content %}

<div class="position-relative">
    <div class="position-absolute top-0 end-0" style="z-index: 2000; margin-top: -18px; margin-right: -3px;">
        <a href="https://github.com/guydavis/machinaris/wiki/Chiadog" target="_blank">
        <i class="fs-4 bi-question-circle"></i>
        </a>
    </div>
    </div>

<header class="pb-3 mb-4 border-bottom">
    <span class="fs-4">Alerts: Recent Notifications</span>
</header>

<div>
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    {% for category, message in messages %}
    {% if category == 'message' %}
    <div class="alert alert-warning" role="alert">
        {% else %}
        <div class="alert alert-{{ category }}" role="alert">
            {% endif %}
            {{ message|safe }}
        </div>
        {% endfor %}
        {% endif %}
        {% endwith %}
    </div>


    <form method="POST" id="chiadog-form" style="padding-bottom: 10px;">
        <fieldset>
            {% for farmer in farmers %}
            <div class="btn-group">
                <button type="button" class="btn btn-outline-success dropdown-toggle" data-bs-toggle="dropdown"
                    aria-expanded="false" id="{{ farmer.hostname }}_btn">
                    {{ farmer.displayname }}: {{farmer.monitoring_status()}}
                </button>
                <ul class="dropdown-menu bg-dark btn-outline-success">
                    {% for worker in farmer.workers %}
                    <li>
                        <a class="dropdown-item text-white text-decoration-none" href="#"
                            onclick='MonitoringLogs("{{ farmer.hostname }}", "{{worker.blockchain}}");return false;'>
                            {% if worker.monitoring_status == 'running' %}
                                <i class="fs-4 bi-check-circle text-success"></i>
                            {% else %}
                                <i class="fs-4 bi-exclamation-triangle text-warning"></i>
                            {% endif %} &nbsp;
                            <span class="align-text-bottom" style="padding-right:5px">{{worker.blockchain|capitalize}}</span>
                        </a>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            {% endfor %}
        </fieldset>
    </form>


    {% if notifications.rows|length > 0 %}
    <form method="POST" id="alerts-form">
        <div class="table-responsive">
            <table id="data" class="table table-dark">
                <thead>
                    <tr>
                        <th scope="col" class="text-success text-center">
                            <input type="checkbox" name="unique_id_master" onclick="checkPage(this)"/>
                        </th>
                        <th scope="col" class="text-success">Worker</th>
                        <th scope="col" class="text-success">Blockchain</th>
                        <th scope="col" class="text-success">Service</th>
                        <th scope="col" class="text-success">Notification</th>
                        <th scope="col" class="text-success">Recorded At</th>
                        <th scope="col" class="text-success">Priority</th>
                    </tr>
                </thead>
                <tbody>
                    {% for notification in notifications.rows %}
                    <tr>
                        <td class="text-center"><input type="checkbox" name="unique_id"
                                value="{{ notification.unique_id }}" /></td>
                        <td>{{notification.worker}}</td>
                        <td>{{notification.blockchain}}</td>
                        <td>{{notification.service}}</td>
                        <td style="white-space: pre-wrap;">{{notification.message}}</td>
                        <td>{{notification.created_at | datetimefilter}}</td>
                        <td>{{notification.priority}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </form>
    <fieldset>
        <button form="alerts-form" type="submit" name="action" value="remove" class="btn btn-outline-success"
            id="btnRemove">Remove Selected</button>
        <button form="alerts-form" type="submit" name="action" value="purge" class="btn btn-outline-success"
            id="btnPurge">Remove All</button>
    </fieldset>
    {% else %}
    <div class="text-center" style="padding-top:50 px; padding-bottom: 50px">
        <h6>No notifications from Chiadog yet... so check back soon.</h6>
        <h6>Expect at least a summary notification once daily as long as running above.</h6>
    </div>
    {% endif %}

    {% endblock %}

    {% block scripts %}
    <script>
        function MonitoringLogs(hostname, blockchain) {
            var d = new Date();
            var height = 600;
            var width = 900;
            var top = (screen.height - height) / 2;
            var left = (screen.width - width) / 2;
            window.open("{{ url_for('logs') }}?log=alerts&hostname=" + hostname + "&blockchain=" + blockchain, 'Chiadog Log on ' + hostname, 'resizeable=yes,scrollbars=yes,height=' + height + ',width=' + width + ',top=' + top + ',left=' + left).focus();
        }
        function MonitoringAction(hostname, service, action, status) {
            $("#" + hostname + "_btn").prop("disabled", true);
            $("#" + hostname + "_btn").html(
                '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> ' + hostname + ': ' + status + '...'
            );
            $('#chiadog-form').append('<input type="hidden" id="action" name="action" value="' + action + '" />');
            $('#chiadog-form').append('<input type="hidden" id="service" name="service" value="' + service + '" />');
            $('#chiadog-form').append('<input type="hidden" id="hostname" name="hostname" value="' + hostname + '" />');
            $("#chiadog-form").submit();
        }
        $(document).ready(function () {
            $('#data').DataTable({
                "order": [[5, "desc"]],
                "columnDefs": [{ "orderable": false, targets: [0] }],
            });
            $("#btnStart").click(function () {
                $(this).prop("disabled", true);
                $(this).html(
                    `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Starting...`
                );
                $("#chiadog-form").submit();
            });
            $("#btnStop").click(function () {
                $(this).prop("disabled", true);
                $(this).html(
                    `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Stopping...`
                );
                $("#chiadog-form").submit();
            });
            $("#btnRemove").click(function () {
                $('#btnRemove').prop("disabled", true);
                $('#btnRemove').html(
                    `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Removing...`
                );
                $('#alerts-form').append('<input type="hidden" id="action" name="action" value="remove" />');
                $("#alerts-form").submit();
            });
            $("#btnPurge").click(function () {
                $('#btnPurge').prop("disabled", true);
                $('#btnPurge').html(
                    `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Purging...`
                );
                $('#alerts-form').append('<input type="hidden" id="action" name="action" value="purge" />');
                $("#alerts-form").submit();
            });
        });
        function checkPage(bx) {
            for (var tbls = document.getElementsByTagName("table"), i = tbls.length; i--;)
                for (var bxs = tbls[i].getElementsByTagName("input"), j = bxs.length; j--;)
                    if (bxs[j].type == "checkbox")
                        bxs[j].checked = bx.checked;
        }
    </script>
    {% endblock %}