{% load i18n %}
{% load humanize %}

{% if notifications %}
    <div id="aa-dashboard-panel-admin-application-notifications" class="col-12 mb-3">
        <div class="card">
            <div class="card-body">
                {% translate "Announcements" as widget_title %}
                {% include "framework/dashboard/widget-title.html" with title=widget_title %}

                <div>
                    <ul class="list-group">
                        {% for notif in notifications %}
                            <li class="list-group-item">
                                <span class="badge text-bg-success me-2">{% translate "Open" %}</span>
                                <a href="{{ notif.web_url }}" target="_blank">#{{ notif.iid }} {{ notif.title }}</a>
                            </li>
                        {% empty %}
                            <div class="alert alert-primary" role="alert">
                                {% translate "No notifications at this time" %}
                            </div>
                        {% endfor %}
                    </ul>

                    <div class="text-end pt-3">
                        <a href="https://gitlab.com/allianceauth/allianceauth/issues" target="_blank" class="me-1 text-decoration-none">
                            <span class="badge text-bg-danger">
                                <i class="fab fa-gitlab" aria-hidden="true"></i>
                                {% translate 'Powered by GitLab' %}
                            </span>
                        </a>
                        <a href="https://discord.com/invite/fjnHAmk" target="_blank" class="text-decoration-none">
                            <span class="badge text-bg-info">
                                <i class="fab fa-discord" aria-hidden="true"></i>
                                {% translate 'Support Discord' %}
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endif %}

<div class="col-12 mb-3">
    <div class="card">
        <div class="card-body row">
            <div id="aa-dashboard-panel-software-version" class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                {% translate "Software Version" as widget_title %}
                {% include "framework/dashboard/widget-title.html" with title=widget_title %}

                <div>
                    <ul class="list-group list-group-horizontal w-100" role="group" aria-label="{% translate 'Software Version' %}">
                        <li class="list-group-item w-100">
                            <div class="btn h-100 w-100 cursor-default">
                                <h5 class="list-group-item-heading">{% translate "Current" %}</h5>
                                <p class="list-group-item-text">{{ current_version }}</p>
                            </div>
                        </li>

                        <li class="list-group-item text-bg-{% if latest_patch %}success{% elif latest_minor %}warning{% else %}danger{% endif %} w-100">
                            <a class="btn h-100 w-100" href="https://gitlab.com/allianceauth/allianceauth/-/releases/v{{ latest_patch_version }}">
                                <h5 class="list-group-item-heading">{% translate "Latest Stable" %}</h5>

                                <p class="list-group-item-text">
                                    <i class="fab fa-gitlab hidden-xs" aria-hidden="true"></i>
                                    {{ latest_patch_version }}
                                    {% if not latest_patch %}<br>{% translate "Update available" %}{% endif %}
                                </p>
                            </a>
                        </li>

                        {% if latest_beta %}
                            <li class="list-group-item text-bg-info w-100">
                                <a class="btn h-100 w-100" href="https://gitlab.com/allianceauth/allianceauth/-/releases/v{{ latest_beta_version }}">
                                    <h5 class="list-group-item-heading">{% translate "Latest Pre-Release" %}</h5>

                                    <p class="list-group-item-text">
                                        <i class="fab fa-gitlab hidden-xs" aria-hidden="true"></i>
                                        {{ latest_beta_version }}
                                        <br>{% translate "Pre-Release available" %}
                                    </p>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </div>
            </div>

            <div id="aa-dashboard-panel-task-queue" class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                {% translate "Task Queue" as widget_title %}
                {% include "framework/dashboard/widget-title.html" with title=widget_title %}

                <div>
                    <p>
                        {% blocktranslate with total=tasks_total|intcomma latest=earliest_task|timesince|default:"?" %}
                            Status of {{ total }} processed tasks • last {{ latest }}
                        {% endblocktranslate %}
                    </p>

                    <div
                        class="progress"
                        style="height: 21px;"
                        title="{{ tasks_succeeded|intcomma }} succeeded, {{ tasks_retried|intcomma }} retried, {{ tasks_failed|intcomma }} failed"
                    >
                        {% include "admin-status/celery_bar_partial.html" with label="suceeded" level="success" tasks_count=tasks_succeeded %}
                        {% include "admin-status/celery_bar_partial.html" with label="retried" level="info" tasks_count=tasks_retried %}
                        {% include "admin-status/celery_bar_partial.html" with label="failed" level="danger" tasks_count=tasks_failed %}
                    </div>

                    <p>
                        <span id="task-counts">?</span> {% translate 'running' %} |
                        <span id="queued-tasks-count">?</span> {% translate 'queued' %}
                    </p>
                </div>
            </div>
            <div class="text-end pt-3">
                <a href="https://gitlab.com/allianceauth/allianceauth/issues" target="_blank" class="me-1 text-decoration-none">
                            <span class="badge" style="background-color: rgb(230 83 40);">
                                <i class="fab fa-gitlab" aria-hidden="true"></i>
                                {% translate 'Powered by GitLab' %}
                            </span>
                </a>
                <a href="https://discord.com/invite/fjnHAmk" target="_blank" class="text-decoration-none">
                            <span class="badge" style="background-color: rgb(110 133 211);">
                                <i class="fab fa-discord" aria-hidden="true"></i>
                                {% translate 'Support Discord' %}
                            </span>
                </a>
            </div>
        </div>
    </div>
</div>

<script>
    const elemRunning = document.getElementById("task-counts");
    const elemQueued = document.getElementById("queued-tasks-count");

    fetch('{% url "authentication:task_counts" %}')
        .then((response) => {
            if (response.ok) {
                return response.json();
            }
            throw new Error("Something went wrong");
        })
        .then((responseJson) => {
            const running = responseJson.tasks_running;
            if (running == null) {
                elemRunning.textContent = "N/A";
            } else {
                elemRunning.textContent = running.toLocaleString();
            }

            const queued = responseJson.tasks_queued;
            if (queued == null) {
                elemQueued.textContent = "N/A";
            } else {
                elemQueued.textContent = queued.toLocaleString();
            }
        })
        .catch((error) => {
            console.log(error);
            elemRunning.textContent = "ERROR";
            elemQueued.textContent = "ERROR";
        });
</script>