{% extends "administration/base.html" %}

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

{% block head %}
{{ block.super }}
<style>
.pf-m-success {
    color: var(--pf-global--success-color--100);
}
.pf-m-danger {
    color: var(--pf-global--danger-color--100);
}
</style>
{% endblock %}

{% block content %}
<section class="pf-c-page__main-section pf-m-light">
    <div class="pf-c-content">
        <h1>
            <i class="fas fa-map-marker"></i>
            {% trans 'Outposts' %}
        </h1>
        <p>{% trans "Outposts are deployments of passbook components to support different environments and protocols, like reverse proxies." %}</p>
    </div>
</section>
<section class="pf-c-page__main-section pf-m-no-padding-mobile">
    <div class="pf-c-card">
        {% if object_list %}
        <div class="pf-c-toolbar">
            <div class="pf-c-toolbar__content">
                <div class="pf-c-toolbar__bulk-select">
                    <a href="{% url 'passbook_admin:flow-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
                </div>
                {% include 'partials/pagination.html' %}
            </div>
        </div>
        <table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid">
            <thead>
                <tr role="row">
                    <th role="columnheader" scope="col">{% trans 'Name' %}</th>
                    <th role="columnheader" scope="col">{% trans 'Providers' %}</th>
                    <th role="columnheader" scope="col">{% trans 'Health' %}</th>
                    <th role="cell"></th>
                </tr>
            </thead>
            <tbody role="rowgroup">
                {% for outpost in object_list %}
                <tr role="row">
                    <th role="columnheader">
                        <a href="{% url 'passbook_outposts:setup' outpost_pk=outpost.pk %}">{{ outpost.name }}</a>
                    </th>
                    <td role="cell">
                        <span>
                            {{ outpost.providers.all.select_subclasses|join:", " }}
                        </span>
                    </td>
                    <td role="cell">
                        {% with health=outpost.health %}
                        {% if health %}
                            <i class="fas fa-check pf-m-success"></i> {{ health|naturaltime }}
                        {% else %}
                            <i class="fas fa-times pf-m-danger"></i> Unhealthy
                        {% endif %}
                        {% endwith %}
                    </td>
                    <td>
                        <a class="pf-c-button pf-m-secondary" href="{% url 'passbook_admin:outpost-update' pk=outpost.pk %}?back={{ request.get_full_path }}">{% trans 'Edit' %}</a>
                        <a class="pf-c-button pf-m-danger" href="{% url 'passbook_admin:outpost-delete' pk=outpost.pk %}?back={{ request.get_full_path }}">{% trans 'Delete' %}</a>
                        <a href="https://passbook.beryju.org/outposts/outposts/#deploy">{% trans 'Deploy' %}</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        <div class="pf-c-toolbar" id="page-layout-table-simple-toolbar-bottom">
            {% include 'partials/pagination.html' %}
        </div>
        {% else %}
        <div class="pf-c-empty-state">
            <div class="pf-c-empty-state__content">
                <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
                <h1 class="pf-c-title pf-m-lg">
                    {% trans 'No Outposts.' %}
                </h1>
                <div class="pf-c-empty-state__body">
                    {% trans 'Currently no outposts exist. Click the button below to create one.' %}
                </div>
                <a href="{% url 'passbook_admin:outpost-create' %}?back={{ request.get_full_path }}" class="pf-c-button pf-m-primary" type="button">{% trans 'Create' %}</a>
            </div>
        </div>
        {% endif %}
    </div>
</section>
{% endblock %}