{% extends 'base.html' %}

{% block body %}

{% set iconstyle = 'style="width: 1.8em;"'|safe %}

{% if not user %}
<div class="alert alert-warning" role="alert">{{_("Some services may not be publicly listed! Log in to see all services you have access to.")}}</div>
{% endif %}

{% if banner %}
<div class="card">
  <div class="card-body">
    {{ banner|safe }}
  </div>
</div>
{% endif %}

{% macro service_card(service) %}
  <div class="col mb-4">
    <div class="card h-100 {{ 'text-muted' if not service.has_access }}">
      <div class="card-body">
				{% if service.logo_url %}
					{% if service.url and service.has_access %}<a href="{{ service.url }}" class="text-reset">{% endif %}
						<img alt="Logo for {{ service.title }}" src="{{ service.logo_url }}" style="width: 100%; height: 10em; object-fit: contain; {{ 'filter: grayscale(100%);' if not service.has_access }}">
					{% if service.url and service.has_access %}</a>{% endif %}
				{% endif %}
        <h5 class="card-title">
					{% if service.url and service.has_access %}
						<a href="{{ service.url }}" class="text-reset">{{ service.title }}</a>
					{% else %}
						{{ service.title }}
					{% endif %}
				</h5>
				{% if service.subtitle %}
					<h6 class="card-subtitle mb-2 text-muted">{{ service.subtitle }}</h6>
				{% endif %}
				{% if service.description %}
					<p class="card-text">{{ service.description }}</p>
				{% endif %}
      </div>
			<div class="list-group list-group-flush">
				{% if not service.has_access %}
					<div class="list-group-item"><i class="fas fa-shield-alt" {{ iconstyle }}></i> {{_("No access")}}</div>
				{% elif service.permission %}
					<div class="list-group-item"><i class="fas fa-shield-alt" {{ iconstyle }}></i> {{ service.permission }}</div>
				{% endif %}
				{% for group in service.groups %}
					<div class="list-group-item"><i class="fas fa-users" {{ iconstyle }}></i> {{ group.name }}</div>
				{% endfor %}
				{% for info in service.infos %}
					<a href="#" class="list-group-item list-group-item-action" data-toggle="modal" data-target="#info-modal-{{ info.id }}"><i class="fas fa-info-circle" {{ iconstyle }}></i> {{ info.button_text }}</a>
				{% endfor %}
				{% for link in service.links %}
					<a href="{{ link.url }}" class="list-group-item list-group-item-action"><i class="fas fa-external-link-alt" {{ iconstyle }}></i> {{ link.title }}</a>
				{% endfor %}
			</div>
    </div>
  </div>
{% endmacro %}

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 mt-2">
	{% for service in services if service.has_access %}
		{{ service_card(service) }}
	{% endfor %}
	{% for service in services if not service.has_access %}
		{{ service_card(service) }}
	{% endfor %}
</div>

{% for service in services %}
{% for info in service.infos %}
<div class="modal" tabindex="-1" id="info-modal-{{ info.id }}">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">{{ info.title }}</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="{{_("Close")}}">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				{{ info.html|safe }}
			</div>
		</div>
	</div>
</div>
{% endfor %}
{% endfor %}

{% endblock %}
