{% extends "base.html.j2" %}

{% block content %}
    <h1 class="h2 mt-3">Welcome</h1>
    <p>Welcome to the Bypass Censorship portal.</p>

    <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col">
            <div class="card h-100">
                <h3 class="h4 card-header">Groups</h3>
                <div class="card-body">
                    <h5 class="card-title">Active Groups: {{ groups | count }}</h5>
                    <p class="card-text">{% for group in groups %}
                        <a href="{{ url_for("portal.group.group_edit", group_id=group.id) }}"
                           title="{{ group.description }}">{{ group.group_name }}</a>
                        {{ ", " if not loop.last else "" }}{% endfor %}</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <h3 class="h4 card-header">Proxies</h3>
                <div class="card-body">
                    <h5 class="card-title">Total proxies running: {{ proxies | count }}</h5>
                    <p class="card-text">Marked blocked:
                    <ul class="card-text">
                        <li>Last 24 hours: {{ last24 }}</li>
                        <li>Last 72 hours: {{ last72 }}</li>
                        <li>Last week: {{ lastweek }}</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <h3 class="h4 card-header">Tor Bridges</h3>
                <div class="card-body">
                    <h5 class="card-title">Total bridges running: {{ bridges | count }}</h5>
                    <p class="card-text">Marked blocked:
                    <ul class="card-text">
                        <li>Last 24 hours: {{ br_last[1] }}</li>
                        <li>Last 72 hours: {{ br_last[3] }}</li>
                        <li>Last week: {{ br_last[7] }}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="row row-cols-1 row-cols-md-3 g-4 pt-4">
        <div class="col">
            <div class="card h-100">
                <h3 class="h4 card-header">Onion Services</h3>
                <div class="card-body">
                    <h5 class="card-title">Origins with onion services:</h5>
                    {% if total_origins > 0 %}
                    <p class="card-text"><span class="display-1">{{ onionified }}</span>/{{ total_origins }}</p>
                    <div class="progress">
                        <div class="progress-bar bg-onion" role="progressbar"
                             style="width: {{ onionified / total_origins * 100 }}%"
                             aria-valuenow="{{ onionified / total_origins * 100 }}" aria-valuemin="0"
                             aria-valuemax="100">{{ (onionified / total_origins * 100) | int }}%
                        </div>
                    </div>
                    {% else %}
                    <p class="card-text">No origins configured.</p>
                    {% endif %}
                </div>
            </div>
        </div>

                <div class="col">
            <div class="card h-100">
                <h3 class="h4 card-header"><abbr title="Open Observatory of Network Interference">OONI</abbr></h3>
                <div class="card-body">
                    <h5 class="card-title">Origins with censorship detected:</h5>
                    {% if total_origins > 0 %}
                    <p class="card-text"><span class="display-1">{{ ooni_blocked }}</span>/{{ total_origins }}</p>
                    <div class="progress">
                        <div class="progress-bar bg-warning" role="progressbar"
                             style="width: {{ ooni_blocked / total_origins * 100 }}%"
                             aria-valuenow="{{ ooni_blocked / total_origins * 100 }}" aria-valuemin="0"
                             aria-valuemax="100">{{ (ooni_blocked / total_origins * 100) | int }}%
                        </div>
                    </div>
                    {% else %}
                    <p class="card-text">No origins configured.</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card h-100">
                <h3 class="h4 card-header">Alarms</h3>
                <div class="card-body">
                    <h5 class="card-title">Current status</h5>
                    <ul class="card-text">
                        <li>Critical: <span class="badge bg-danger">{{ critical }}</span></li>
                        <li>Warning: <span class="badge bg-warning">{{ warning }}</span></li>
                        <li>OK: <span class="badge bg-success">{{ ok }}</span></li>
                        <li>Unknown: <span class="badge bg-dark">{{ unknown }}</span></li>
                    </ul>
                    <a href="{{ url_for("portal.view_alarms") }}">View alarms</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col">
            <div class="card h-100">
                <h3 class="h4 card-header">Activity</h3>
                <div class="card-body">
                    <table class="table table-striped">
                        {% for a in activity %}
                            <tr>
                                <td>{{ a.text }}</td>
                                <td>{{ a.added | format_datetime }}</td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}