<div class="card shadow">
  {# Card header #}
  <div class="card-header d-flex align-items-center">
    <div class="col h5 mb-0">
      <Icon value="bi-person-badge" />
      {% trans %}Identity{% endtrans %}
    </div>
    <div>
      {% set clipboard_identity -%}
        # {% trans %}Identity{% endtrans +%}
        {% trans %}Name{% endtrans %}: {{ user.name_with_title or '-' }}
        {% trans %}Email{% endtrans %}: {{ ((user.email_alias or []) | join(", ") ) or '-' }}
        {% trans %}Language{% endtrans %}: {{ user.lang or '-' }}
        {% trans %}Phone{% endtrans %}: {{ ((user.phone or []) | join(", ") ) or '-' }}
        {{- '\n' }}
        {% trans %}Function{% endtrans %}: {{ user.title or '-' }}
        {% trans %}Location{% endtrans %}: {{ user.location or '-' }}
        {%- if user.location_office -%}
          , {% trans %}Room{% endtrans %} {{ user.location_office -}}
        {%- endif +%}
        {% trans %}Section{% endtrans %}: {{ user.section or '-' }}
        {% trans %}Departement{% endtrans %}: {{ user.departement or '-' }}
      {% endset %}
      <CopyButton class="d-print-none" text={{ clipboard_identity }} label={{ _("Copy") }} />
    </div>
  </div>
  {# Card body #}
  <div class="card-body">
    <div class="row">
      <!-- Special arrengement to integrate profile picture -->
      <div class="col-lg-3 text-center order-lg-2 mb-2 d-print-none">
        <img class="ssp-profile-picture"
             src="{{ url_for('dashboard', 'img', u=user.username) }}"
             alt="{{ gettext("Portrait of %(name)s", name=user.name) }}" />
      </div>
      <div class="col-lg row mb-0">
        <!-- Column 1 -->
        <div class="col-md-6">
          <!-- Name -->
          <div class="row mb-2">
            <div class="col-4 ssp-label">{% trans %}Name{% endtrans %}</div>
            <div class="col-8 ssp-hover-zone">
              <CopyButton class="ssp-hover-show" text={{ user.name_with_title }} />
              {{ user.name_with_title }}
            </div>
          </div>
          <!-- Email -->
          <div class="row mb-2">
            <div class="col-4 ssp-label">{% trans %}Email{% endtrans %}</div>
            <div class="col-8">
              {% for email in user.email_alias %}
                {% if not loop.first %}<br />{% endif %}
                <Icon value="bi-envelope" />
                <a href="mailto:{{ email }}?subject={{ _("Enter your subject") | urlencode }}">{{ email }}</a>
              {% else %}
                &mdash;
              {% endfor %}
            </div>
          </div>
        </div>
        <!-- Column 2 -->
        <div class="col-md-6">
          <!-- Language -->
          <div class="row mb-2">
            <div class="col-4 ssp-label">{% trans %}Language{% endtrans %}</div>
            <div class="col-8 ssp-hover-zone">
              {% if user.lang %}
                <CopyButton class="ssp-hover-show" text={{ user.lang }} />
                <abbr title="{{ user.lang }}">{{ get_language_name(user.lang) }}</abbr>
              {% else %}
                &mdash;
              {% endif %}
            </div>
          </div>
          <!-- Phone -->
          <div class="row mb-2">
            <div class="col-4 ssp-label">{% trans %}Phone{% endtrans %}</div>
            <div class="col-8">
              {% for phone in user.phone %}
                {% if not loop.first %}<br />{% endif %}
                <Icon value="bi-telephone" />
                <a href="tel:{{ phone }}">{{ phone }}</a>
              {% else %}
                &mdash;
              {% endfor %}
            </div>
          </div>
        </div>
        <!-- Separator -->
        <div class="col-12">
          <hr />
        </div>
        <!-- Column 1 -->
        <div class="col-md-6">
          <!-- Function -->
          <div class="row mb-2">
            <div class="col-4 ssp-label">{% trans %}Function{% endtrans %}</div>
            <div class="col-8 ssp-hover-zone">
              {% if user.title %}
                <CopyButton class="ssp-hover-show" text={{ user.title }} />
                {{ user.title }}
              {% else %}
                &mdash;
              {% endif %}
            </div>
          </div>
          <!-- Location -->
          <div class="row mb-2">
            <div class="col-4 ssp-label">{% trans %}Location{% endtrans %}</div>
            <div class="col-8 ssp-hover-zone">
              {% if user.location %}
                <CopyButton class="ssp-hover-show" text={{ user.location }} />
                <address class="mb-0">
                  <a href="https://www.google.com/maps/search/?api=1&amp;query={{ user.location | urlencode | replace('/', '%2F') }}"
                     target="_blank"
                     title="{% trans %}View on Google Maps{% endtrans %}">{{ user.location }}</a>
                  {% if user.location_office %}
                    <br />
                    {% trans %}Room{% endtrans %}
                    {{ user.location_office }}
                  {% endif %}
                </address>
              {% else %}
                &mdash;
              {% endif %}
            </div>
          </div>
        </div>
        <!-- Column 2 -->
        <div class="col-md-6">
          <!-- Section -->
          <div class="row mb-2">
            <div class="col-4 ssp-label">{% trans %}Section{% endtrans %}</div>
            <div class="col-8 ssp-hover-zone">
              {% if user.section %}
                <CopyButton class="ssp-hover-show" text={{ '%s %s' % (user.organisational_unit, user.section) }} />
                <abbr title="{{ user.organisational_unit }}">{{ user.section }}</abbr>
              {% else %}
                &mdash;
              {% endif %}
            </div>
          </div>
          <!-- Departement -->
          <div class="row mb-2">
            <div class="col-4 ssp-label">{% trans %}Departement{% endtrans %}</div>
            <div class="col-8 ssp-hover-zone">
              {% if user.departement %}
                <CopyButton class="ssp-hover-show" text={{ user.departement }} />
                {{ user.departement }}
              {% else %}
                &mdash;
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
