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

{% load i18n %}

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

{% block content %}
<div class="container">
  <div class="row row-cards-pf">
    {% for app in applications %}
    <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="card-pf card-pf-accented card-pf-aggregate-status">
        <h2 class="card-pf-title">
          <span class="fa fa-shield"></span> {{ app.name }}
        </h2>
        <div class="card-pf-body">
          <p class="card-pf-aggregate-status-notifications">
            <span class="card-pf-aggregate-status-notification">
              <a href="{{ app.launch_url }}" class="add" data-toggle="tooltip" data-placement="top" title="{% trans 'Open App...' %}">
                {% if not app.icon_url %}
                <span class="pficon pficon-arrow"></span>
                {% else %}
                <img class="app-icon" src="{{ app.icon_url }}" alt="{% trans 'Application Icon' %}">
                {% endif %}
              </a>
            </span>
          </p>
        </div>
      </div>
    </div>
    {% endfor %}
  </div><!-- /row -->
</div>
{% endblock %}