{% extends 'node--featured.html.twig' %}

{% set attributes = attributes.addClass('teaser-group') %}

{% if not content.field_group_image|render  %}
  {% set attributes = attributes.addClass('no-image') %}
{% endif %}

{% block card_hero_image %}
  <div class="img_wrapper">
    {% if content.field_group_image|render %}
      {{ content.field_group_image }}
    {% else %}
      <hr class="no-feature-image">
    {% endif %}
  </div>
{% endblock %}

{% block card_teaser_type %}
  <a href="{{ url }}" aria-hidden="true" title="{% trans %}Group: &nbsp;{% endtrans %}{{- label|render|striptags|trim -}}">
    <div class="teaser__teaser-type">
      <svg class="teaser__teaser-type-icon">
        <title>{% trans %}Group: &nbsp;{% endtrans %}{{- label|render|striptags|trim -}}</title>
        {% if group_type_icon %}
          <use xlink:href="#{{- group_type_icon -}}"></use>
        {% else %}
          <use xlink:href="#icon-group-white"></use>
        {% endif %}
      </svg>
    </div>
  </a>
{% endblock %}

{% block card_title %}

  {{ title_prefix }}
  <h4{{ title_attributes }} class="teaser__title">
    {% if closed_group_lock %}
      <svg class="icon-gray icon-small" aria-hidden="true">
        <title>{% trans %}Closed group{% endtrans %}</title>
        <use xlink:href="#icon-lock"></use>
      </svg>
    {% elseif secret_group_shield %}
      <svg class="icon-gray icon-small" aria-hidden="true">
        <title>{% trans %}Secret group{% endtrans %}</title>
        <use xlink:href="#icon-shield"></use>
      </svg>
    {% endif %}
    <a href="{{ url }}" rel="bookmark">
      <span class="sr-only">{% trans%}Group{% endtrans %}: </span>{{ label }}
    </a>
  </h4>

  {{ title_suffix }}
{% endblock %}

{% block card_body %}
  <small class="text-muted">

    <div class="teaser__content-line">
      <svg class="teaser__content-type-icon" aria-hidden="true">
        <title>{% trans %}Group type{% endtrans %}</title>
        <use xlink:href="#icon-label"></use>
      </svg>
      <span class="teaser__content-text">
        <span class="sr-only">{% trans %}The group type is{% endtrans %} </span>
        {{ group_type }}
        {{ group_settings_help }}
      </span>
    </div>

    {% if content.field_group_location|render or content.field_group_address|render %}
      <div class="teaser__content-line">
        <svg class="teaser__content-type-icon" aria-hidden="true">
          <title>{% trans %}Located at:{% endtrans %}</title>
          <use xlink:href="#icon-location"></use>
        </svg>
        <span class="teaser__content-text">
          <span class="sr-only">{% trans %}located at: {% endtrans %} </span>
          {{ content.field_group_location }}
          {% if content.field_group_location|render is not empty and content.field_group_address|render is not empty %}
            <span class="sr-only">, </span>
            <span aria-hidden="true"> &bullet; </span>
          {% endif %}
          {{ content.field_group_address }}
        </span>
      </div>
    {% endif %}

  </small>
{% endblock %}

{% block card_actionbar %}

  {% if group_members is not empty %}
    <div class="badge teaser__badge">
      <span class="badge__container">
        <svg class="badge__icon" aria-hidden="true">
          <title>{% trans %}Number of group members{% endtrans %}</title>
          <use xlink:href="#icon-group"></use>
        </svg>
        <span class="badge__label">
          {{ group_members }}
          <span class="sr-only"> {% trans %}group members{% endtrans %} </span>
        </span>
      </span>
    </div>
  {% endif %}

  {% if joined %}
    <span class="badge teaser__badge badge-default">
      {% trans with {'context': 'Is a member'} %}You have joined{% endtrans %}
    </span>
  {% endif %}

  {% if not hide_card_link %}
    <a href="{{ url }}" class="card__link" rel="bookmark">
      {{ 'Read more'|t }}
      <span class="visually-hidden">{% trans %}about {{ label }}{% endtrans %} </span>
    </a>
  {% endif %}
{% endblock %}
