{#
/**
 * @file
 * Template do bloco de cabeçalho do microsite.
 *
 * Variáveis:
 * - photo_url: URL absoluta da foto padrão (string|null).
 * - photo_alt: Texto alternativo da foto (string).
 * - name: Nome completo do usuário (string).
 * - roles: Array de rótulos das roles do usuário (string[]).
 * - bio: Biografia (string|null).
 * - phone: Telefone (string|null).
 * - email: E-mail (string|null).
 */
#}
<div class="msite-header-block">

  <div class="msite-header-block__photo-wrap">
    {% if photo_url %}
      <img
        class="msite-header-block__photo"
        src="{{ photo_url }}"
        alt="{{ photo_alt }}"
      />
    {% else %}
      <div class="msite-header-block__photo msite-header-block__photo--initials" aria-hidden="true">
        {{ name|first|upper }}
      </div>
    {% endif %}
  </div>

  <div class="msite-header-block__info">

    <h1 class="msite-header-block__name">{{ name }}</h1>

    {% if bio %}
      <div class="msite-header-block__bio">{{ bio|raw }}</div>
    {% endif %}

    {% if phone or email %}
      <ul class="msite-header-block__contact">
        {% if phone %}
          <li class="msite-header-block__contact-item">
            <span class="msite-header-block__contact-label">{{ 'Telefone'|t }}:</span>
            <a href="tel:{{ phone }}">{{ phone }}</a>
          </li>
        {% endif %}
        {% if email %}
          <li class="msite-header-block__contact-item">
            <span class="msite-header-block__contact-label">{{ 'E-mail'|t }}:</span>
            <a href="mailto:{{ email }}">{{ email }}</a>
          </li>
        {% endif %}
      </ul>
    {% endif %}

  </div>

</div>