{{ attach_library('socialbase/hero') }}

<div class="card__info-user">
  {{ content.field_profile_image }}
  <h2 class="card__info-user--name">
    {{ profile_name }} {{ profile_name_extra }}
  </h2>

  <div class="card__info-user--about">
    <div class="card__info-user--about-job">{{ content.field_profile_function }}</div>
    <div class="card__info-user--about-organization" translate="no">
      {% if content.field_profile_organization_reference %}
        {{ content.field_profile_organization_reference }}
      {% else %}
        {{ content.field_profile_organization }}
      {% endif %}
    </div>
    <div class="card__info-user--about-address">
      {{ content.field_profile_address }}
    </div>
  </div>
</div>

{% if content.followers or content.following %}
  <div class="follow-user--counter">
    {{ content.followers }}
    {{ content.following }}
  </div>
{% endif %}

{% if content.flag_follow_user %}
  <div class="follow-user-wrapper">
    {% if following_enabled %}
      {{ content.flag_follow_user }}
    {% endif %}
    {% if profile_contact_label == 'private_message' %}
      <div class="hero-footer__cta">
        <a href="{{ profile_contact_url }}" class="btn btn-default">
          {% trans %} Message {% endtrans %}
        </a>
      </div>
    {% elseif profile_edit_url %}
      <div class="hero-footer__cta card__link">
        <a href="{{ profile_edit_url }}" title="{% trans %}Edit profile information{% endtrans %}" class="btn btn-default">
          {% trans %} Edit profile {% endtrans %}
        </a>
      </div>
    {% endif %}
  </div>
{% else %}
  <div class="card__counter">
    <ul>
      <li>
        <span class="card__counter-quantity">{{ profile_events }}</span>
        <span class="card__counter-text">{% trans %}event{% plural profile_events %}events{% endtrans %}</span>
      </li>
      <li>
        <span class="card__counter-quantity">{{ profile_topics }}</span>
        <span class="card__counter-text">{% trans %}topic{% plural profile_topics %}topics{% endtrans %}</span>
      </li>
      <li>
        <span class="card__counter-quantity">{{ profile_groups }}</span>
        <span class="card__counter-text">{% trans %}group{% plural profile_groups %}groups{% endtrans %}</span>
      </li>
    </ul>
  </div>

  {% if profile_contact_label == 'private_message' %}
    <div class="hero-footer__cta">
      <a href="{{ profile_contact_url }}" class="btn btn-accent">
        {% trans %} Private message {% endtrans %}
      </a>
    </div>
  {% elseif profile_edit_url %}
    <div class="hero-footer__cta card__link">
      <a href="{{ profile_edit_url }}" title="{% trans %}Edit profile information{% endtrans %}" class="btn btn-default">
        {% trans %} Edit profile {% endtrans %}
      </a>
    </div>
  {% endif %}

  {% if profile_info_url %}
    <footer class="card__actionbar">
      <a href="{{ profile_info_url }}" class="card__link">
        {% trans %} See full profile {% endtrans %}
      </a>
    </footer>
  {% endif %}
{% endif %}
