{% extends "granadilla/base.html" %}
{% load granadilla_tags %}
{% load i18n %}

{% block subtitle %}{{ group }}{% endblock %}

{% block breadcrumbs %}
{% if home %}
{% granadilla_title %}
{% else %}
<a href="{% url "granadilla.views.index" %}">{% granadilla_title %}</a> &rsaquo; <a href="{% url "granadilla.views.groups" %}">{% trans "Groups" %}</a> &rsaquo; {{ group }}
{% endif %}
{% endblock %}

{% block content %}
<h2>{{ group }}</h2>

{% if members %}

{% if printable %}

<table class="phonebook">
  <thead>
    <tr>
      <th></th>
      <th>{% trans "phone" %}</th>
      <th>{% trans "mobile phone" %}</th>
      <th>{% trans "internal phone" %}</th>
    </tr>
  </thead>
  <tbody>
{% for member in members %}
    <tr>
      <td class="name"><a href="{% url "granadilla.views.user" member.pk %}">{{ member }}</a></td>
      <td class="phone">{{ member.phone|default_if_none:"-" }}</td>
      <td class="phone">{{ member.mobile_phone|default_if_none:"-" }}</td>
      <td class="phone">{{ member.internal_phone|default_if_none:"-" }}</td>
    </tr>
{% endfor %}
  </tbody>
</table>

{% else %}

{% for member in members %}
<div class="card">
  <div class="name">
    <a href="{% url "granadilla.views.user" member.pk %}">{{ member }}</a>
  </div>
  <div class="photo">
    <div class="centering">
      <a href="{% url "granadilla.views.user" member.pk %}"><img src="{% if member.photo %}{% url "granadilla.views.photo" member.pk %}{% else %}{% granadilla_media 'img/unknown.png' %}{% endif %}" alt="{{ member }}" /></a>
    </div>
  </div>
  {% if member.mobile_phone %}
  <div class="mobile">{{ member.mobile_phone }}</div>
  {% endif %}
</div>
{% endfor %}

<div class="clear"></div>

{% endif %}

{% else %}
<p>{% trans "There are no users in this group." %}</p>
{% endif %}

{% endblock %}

{% block links %}
<li class="phonebook-image">
{% if printable %}
  <a href="{% url "granadilla.views.group" group.name %}">{% trans "Show photos" %}</a>
{% else %}
  <a href="{% url "granadilla.views.group_print" group.name %}">{% trans "Show list" %}</a>
{% endif %}
</li>
{% endblock %}
