{% load i18n %}
{#<div class="col-sm-12">#}
<div>
    <div class="row vertical-flexbox-row2">
        <div class="col-sm-6">
            <div class="panel panel-primary" style="height: 100%;">
                <div class="panel-heading">
                    <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:relative;bottom:5px;right:5px;">#}
{#                    <a href="https://gitlab.com/allianceauth/allianceauth/issues"><span class="label" style="background-color:rgb(230,83,40);">#}
{#                        <i class="fab fa-gitlab" aria-hidden="true"></i> Powered by GitLab</span>#}
{#                    </a>#}
{#                </div>#}
            </div>
        </div>

        <div class="col-sm-6">
            <div class="panel panel-primary" style="height:50%;">
                <div class="panel-heading"><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:rgb(0,0,0)">
                                    <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:rgb(0,0,0)">
                                        <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">
                    <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>
