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

{% load i18n %}

{% block head %}
{{ block.super }}
<style>
    img.app-icon {
        max-height: 72px;
    }
</style>
{% endblock %}

{% block content %}
<section class="pf-c-page__main-section pf-m-light">
    <div class="pf-c-content">
        <h1>
            <i class="pf-icon pf-icon-applications"></i>
            {% trans 'Applications' %}
        </h1>
    </div>
</section>
<section class="pf-c-page__main-section">
    {% if applications %}
    <div class="pf-l-gallery pf-m-gutter">
        {% for app in applications %}
        <a href="{{ app.meta_launch_url }}" class="pf-c-card pf-m-hoverable pf-m-compact" id="card-1">
            <div class="pf-c-card__head">
                {% if not app.meta_icon_url %}
                <i class="pf-icon pf-icon-arrow"></i>
                {% else %}
                <img class="app-icon pf-c-avatar" src="{{ app.meta_icon_url }}" alt="{% trans 'Application Icon' %}">
                {% endif %}
            </div>
            <div class="pf-c-card__header pf-c-title pf-m-md">
                <p id="card-1-check-label">{{ app.name }}</p>
                <div class="pf-c-content">
                    <small>{{ app.meta_publisher }}</small>
                </div>
            </div>
            <div class="pf-c-card__body">{% trans app.meta_description %}</div>
        </a>
        {% endfor %}
    </div>
    {% else %}
    <div class="pf-c-empty-state">
        <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
        <h1 class="pf-c-title pf-m-lg">{% trans 'No Applications available.' %}</h1>
        <div class="pf-c-empty-state__body">
            {% trans "Either no applications are defined, or you don't have access to any." %}
        </div>
        {% if user.is_superuser %} {# todo: use guardian permissions instead #}
        <a href="{% url 'passbook_admin:application-create' %}" class="pf-c-button pf-m-primary" type="button">
            {% trans 'Create Application' %}
        </a>
        {% endif %}
    </div>
    {% endif %}
</section>
{% endblock %}