{% extends "musician/base.html" %}
{% load i18n %}

{% block content %}

<h1 class="service-name">{{ service.verbose_name }}</h1>
<p class="service-description">{{ service.description }}</p>

{% for saas in object_list %}
  <div class="card service-card">
    <div class="card-header">
      <div class="row">
        <div class="col-md-8">
          <strong>{{ saas.name }}</strong>
        </div>
        {% comment "Hidden until API provides this information" %}
        <div class="col-md text-right">
            {% trans "Installed on" %}: <strong>{{ saas.domain|default:"-" }}</strong>
        </div>
        {% endcomment %}
      </div>
    </div><!-- /card-header-->
    <div class="card-body row">
        <div class="col-md-4">
          <h4>{{ saas.service|capfirst }}</h4>
          <p class="text-center service-brand"><i class="fab fa-{{ saas.service }} fa-10x"></i></p>
        </div>
        <div class="col-md-3 border-left border-right">
            <h4 class="mb-3">{% trans "Service info" %}</h4>
            <label class="w-25">{% trans "active" %}:</label> <strong>{{ saas.is_active|yesno }}</strong><br/>
            {% for key, value in saas.data.items %}
            <label class="w-25">{{ key }}:</label> <strong>{{ value }}</strong><br/>
            {% endfor %}
        </div>
        <div class="col-md-5 text-right">
          <div class="service-manager-link">
            <a class="btn btn-primary" href="{{ saas.manager_url }}" target="_blank" rel="noopener noreferrer">{% trans "Open service admin panel" %} <i class="fas fa-external-link-alt"></i></a>
          </div>
        </div>
      </div>
    </div>
    {% empty %}
    <div class="row">
      <div class="col-md-4">
        <div class="card service-card shadow p-3 mb-5 bg-white rounded">
          <div class="card-body text-center">
            <p class="mb-4"><i class="fas fa-fire fa-5x"></i></p>
            {# Translators: saas page when there isn't any saas. #}
            <h5 class="card-title text-dark">{% trans "Ooops! Looks like there is nothing here!" %}</h5>
          </div>
        </div>
      </div>
    </div>
{% endfor %}

{% endblock %}
