{% extends "default.html" %}
{% block title %}{{ app.name }} | Echo Tracker{% endblock %}
{% block content %}
    <main>
        <h1>{{ app.name }}</h1>
        <h2 class="subtitle">
            {% if is_ok(all_results) %}
                Operational
            {% elif is_partial(all_results) %}
                Unstable
            {% else %}
                Down
            {% endif %}
            (last {{ app.stability_threshold }} minutes)
        </h2>
        <p>Owner: {{ app.owner_name }}</p>
        {% if session.get("username") == app.owner_name %}
            <a class="button" style="width:100%; margin: 1em 0;" tabindex="0" href="/app/{{ app.id }}/edit">
                <iconify-icon icon="mdi:pencil"></iconify-icon>
                Manage endpoints
            </a>
        {% endif %}
        <form style="margin-bottom: 1em;" class="horizontal-form">
            <label class="extend">
                Interval duration (minutes)
                <input type="number" name="bar_duration" step="1" value="{{ bar_duration }}">
            </label>
            <label class="extend">
                Time period (minutes)
                <input type="number" name="time_period" step="1" value="{{ time_period }}">
            </label>
            <button type="submit">Change</button>
        </form>
        <div id="endpoint-list">
            {% for endpoint in app.endpoints %}
                <div class="endpoint-card">
                    <div class="endpoint-header">
                        <h2>{{ endpoint.name }}</h2>
                        <div class="action-buttons">
                            {% if not endpoint.buggy %}
                                <a href="/app/{{ app.id }}/report/{{ endpoint.id }}" class="button">
                                    <iconify-icon icon="mdi:bug"></iconify-icon>
                                    Report malfunction
                                </a>
                            {% elif app.owner_name == session.get("username") %}
                                <a href="/app/{{ app.id }}/fix/{{ endpoint.id }}" class="button">
                                    <iconify-icon icon="mdi:tools"></iconify-icon>
                                    Mark as fixed
                                </a>
                            {% endif %}
                            <a href="{{ endpoint.address }}" class="button">
                                <iconify-icon icon="mdi:send"></iconify-icon>
                                Access
                            </a>
                        </div>
                    </div>
                    {% if endpoint.buggy %}
                        <p class="endpoint-info endpoint-info-down">
                            Malfunctioning
                        </p>
                    {% elif is_ok(slices[endpoint.id][-1][0]) %}
                        Operational
                    {% elif is_partial(slices[endpoint.id][-1][0]) %}
                        Unstable
                    {% else %}
                        Down
                    {% endif %}
                    <p>{{ endpoint.comment }}</p>
                    <div class="app-uptime">
                        {% for slice in slices[endpoint.id] %}
                            {% if not slice[0] %}
                                <div class="uptime-bar
                            {% elif is_ok(slice[0]) %}
                                <div class="uptime-bar uptime-bar-ok
                            {% else %}
                                <div class="uptime-bar uptime-bar-down
                            {% endif %}
                            {% if bugs(slice[0]) %}
                                uptime-bar-buggy
                            {% endif %}
                            " title="{{ slice[1][0].strftime('%Y-%m-%d %H:%M:%S') }} – {{ slice[1][1].strftime('%Y-%m-%d %H:%M:%S') }}"></div>
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </main>
{% endblock %}