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

{% set cover_classes = [
  'cover hero__group',
  group_hero_styled_image_url ? 'cover-img cover-img-gradient',
] %}

<div{{ attributes.addClass(cover_classes) }} {% if group_hero_styled_image_url %} style="background-image: url('{{ group_hero_styled_image_url }}');" {% endif %}>
  <div class="hero__bgimage-overlay"></div>
  {% if group_edit_url %}
    <div class="hero-action-button">
      <a href="{{ group_edit_url }}" title="{% trans %}Edit group{% endtrans %}" class="btn btn-default btn-floating">
        <svg class="icon-gray icon-medium">
          <title>{% trans %}Edit group{% endtrans %}</title>
          <use xlink:href="#icon-edit"></use>
        </svg>
      </a>
    </div>
  {% endif %}
  <div class="cover-wrap">
    <header class="page-title">
      {% if group_type %}
        <div class="teaser__tag">
          {{ group_type }}
        </div>
      {% endif %}
      <h1>{{ content.label }}</h1>
      {% if group_settings_help %}
        <span>
          {{ group_settings_help }}
        </span>
      {% endif %}
    </header>
    <footer class="hero-footer">
      <div class="hero-footer__text">
        {% if content.field_group_location|render is not empty and content.field_group_address|render is not empty %}
          <svg class="hero-footer-icon">
            <title>{% trans %}Located at: {% endtrans %}</title>
            <use xlink:href="#icon-location"></use>
          </svg>
        {% endif %}
        <span class="inline-center">
          {{ content.field_group_location }}
          {% if content.field_group_location|render is not empty and content.field_group_address|render is not empty %} &bullet;{% endif %}
          {{ content.field_group_address }} </span>
      </div>
    </footer>
  </div> {# cover-wrap #}
</div> {# cover #}
