{% extends "base.html" %}

{% block content %}

<script>
    function LogButton() {
        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", 'Chiadog Log', 'resizeable=yes,scrollbars=yes,height=' + height + ',width=' + width + ',top=' + top + ',left=' + left).focus();
    }
</script>

<div class="position-relative">
    <div class="position-absolute top-0 end-0">
        <a href="#" title="View Logs" onclick='LogButton();return false;'>
            <i class="fs-4 bi-text-indent-left"></i>
        </a>
    </div>
</div>

<header class="pb-3 mb-4 border-bottom">
    <span class="fs-4">Notifications: Chiadog Alerts</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 }}
        </div>
        {% endfor %}
        {% endif %}
        {% endwith %}
    </div>

    <form method="POST" id="chiadog-form" style="padding-bottom: 10px;">
        {% if not chiadog_running %}
        <fieldset>
            <input type="hidden" id="action" name="action" value="start" />
            <button type="submit" class="btn btn-outline-success" id="btnStart"
                title="chiadog is currently stopped.">Start Monitoring</button>
        </fieldset>
        {% else %}
        <fieldset>
            <input type="hidden" id="action" name="action" value="stop" />
            <button type="submit" class="btn btn-outline-success" id="btnStop"
                title="chiadog is currently running.">Stop Monitoring</button>
        </fieldset>
        {% endif %}
    </form>

    {% if notifications|length > 0 %}
    <div class="table-responsive">
        <table class="table table-dark">
            <thead>
                <tr>
                    <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 %}
                <tr>
                    <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>
    {% elif chiadog_running %}
    <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.</h6>
    </div>
    {% else %}
    <div class="text-center" style="padding-top:50 px; padding-bottom: 50px">
        <h6>No notifications found and Chiadog monitoring is off.</h6>
        <h6>Please configure "Settings | Alerts" and then Start Chiadog</h6>
    </div>
    {% endif %}

    <script>
        $(document).ready(function () {
            $("#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();
            });
        })
    </script>

    {% endblock %}