{% load i18n %}
<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">
                    <div class="progress" style="height: 21px;">
                        <div class="progress-bar
                            {% if task_queue_length > 500 %}
                                progress-bar-danger
                            {% elif task_queue_length > 100 %}
                                progress-bar-warning
                            {% else %}
                                progress-bar-success
                            {% endif %}
                            " role="progressbar" aria-valuenow="{% widthratio task_queue_length 500 100 %}"
                                aria-valuemin="0" aria-valuemax="100"
                                style="width: {% widthratio task_queue_length 500 100 %}%;">
                        </div>
                    </div>
                    {% if task_queue_length < 0 %}
                        {% translate "Error retrieving task queue length" %}
                    {% else %}
                        {% blocktrans trimmed count tasks=task_queue_length %}
                        {{ tasks }} task
                        {% plural %}
                        {{ tasks }} tasks
                        {% endblocktrans %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
</div>
