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

<div class="col-sm-12">
    <div class="row vertical-flexbox-row2">
        <div class="col-sm-6">
            <div class="panel panel-primary" style="height:100%;position:relative;">
                <div class="panel-heading text-center"><h3 class="panel-title">{% translate "Alliance Auth Notifications" %}</h3></div>
                <div class="panel-body">
                    <ul class="list-group">
                        {% for notif in notifications %}
                        <li class="list-group-item">
                            {% if notif.state == 'opened' %}
                                <span class="label label-success">{% translate "Open" %}</span>
                            {% else %}
                                <span class="label label-danger">{% translate "Closed" %}</span>
                            {% endif %}
                            <a href="{{ notif.web_url }}" target="_blank">#{{ notif.iid }} {{ notif.title }}</a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>

                <div class="text-right" style="position: absolute; bottom: 5px; right: 5px;">
                    <a href="https://gitlab.com/allianceauth/allianceauth/issues" target="_blank" style="margin-right: 0.5rem;">
                        <span class="label" style="background-color: #e65328;">
                            <i class="fab fa-gitlab" aria-hidden="true"></i>
                            {% translate 'Powered by GitLab' %}
                        </span>
                    </a>

                    <a href="https://discord.com/invite/fjnHAmk" target="_blank">
                        <span class="label" 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 class="col-sm-6">
            <div class="panel panel-primary" style="height:50%;">
                <div class="panel-heading text-center"><h3 class="panel-title">{% translate "Software Version" %}</h3></div>
                <div class="panel-body flex-center-horizontal">
                    <ul class="list-group list-group-horizontal" style="margin-bottom: 0;">
                        <li class="list-group-item">
                            <h5 class="list-group-item-heading">{% translate "Current" %}</h5>
                            <p class="list-group-item-text">
                                {{ current_version }}
                            </p>
                        </li>
                        <li class="list-group-item list-group-item-{% if latest_patch %}success{% elif latest_minor %}warning{% else %}danger{% endif %}">
                            <h5 class="list-group-item-heading">{% translate "Latest Stable" %}</h5>
                            <p class="list-group-item-text">
                                <a href="https://gitlab.com/allianceauth/allianceauth/tags" style="color:#000">
                                    <i class="fab fa-gitlab hidden-xs" aria-hidden="true"></i>
                                    {{ latest_patch_version }}
                                </a>
                                {% if not latest_patch %}<br>{% translate "Update available" %}{% endif %}
                            </p>
                        </li>
                        {% if latest_beta %}
                        <li class="list-group-item list-group-item-info">
                            <h5 class="list-group-item-heading">{% translate "Latest Pre-Release" %}</h5>
                            <p class="list-group-item-text">
                                <a href="https://gitlab.com/allianceauth/allianceauth/tags" style="color:#000">
                                    <i class="fab fa-gitlab hidden-xs" aria-hidden="true"></i>
                                    {{ latest_beta_version }}
                                </a>
                                <br>{% translate "Pre-Release available" %}
                            </p>
                        </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
            <div class="panel panel-primary" style="height:50%;">
                <div class="panel-heading text-center"><h3 class="panel-title">{% translate "Task Queue" %}</h3></div>
                <div class="panel-body flex-center-horizontal">
                    <p>
                    {% blocktranslate with total=tasks_total|intcomma latest=earliest_task|timesince|default_if_none:"?" %}
                    Status of {{ total }} processed tasks • last {{ latest }}</p>
                    {% endblocktranslate %}
                    <div class="progress" style="height: 21px;">
                        {% include "allianceauth/admin-status/celery_bar_partial.html" with label="suceeded" level="success" tasks_count=tasks_succeeded %}
                        {% include "allianceauth/admin-status/celery_bar_partial.html" with label="retried" level="info" tasks_count=tasks_retried %}
                        {% include "allianceauth/admin-status/celery_bar_partial.html" with label="failed" level="danger" tasks_count=tasks_failed %}
                    </div>
                    <p>
                        {% blocktranslate with queue_length=task_queue_length|default_if_none:"?"|intcomma %}
                        {{ queue_length }} queued tasks
                        {% endblocktranslate %}
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
</div>
