{% load i18n wagtailcore_tags wagtailimages_tags %}
{# Uses value instead of block.value because it is also used #}
{# to display Person items #}

<div class="fr-card {% if value.enlarge_link %}fr-enlarge-link{% endif %} fr-card--grey">
  <div class="fr-card__body">
    <div class="fr-card__content">
      {# djlint: off #}
      <{{ value.heading_tag | default:"h3" }} class="fr-card__title">
        {% if value.link and value.link.url %}
          <a href="{{ value.link.url }}" {% if value.link.url.0 != '/' and request.get_host not in value.link.url %}target="_blank" rel="noopener noreferrer"{% endif %}>
            {{ value.display.name }}
            {% if value.link.url.0 != '/' and request.get_host not in value.link.url %}
            <span class="fr-sr-only">{% translate "Opens a new window" %}</span>
            {% endif %}
          </a>
        {% elif value.url %}
          <a href="{{ value.url }}">{{ value.display.name }}</a>
        {% elif value.document %}
          <a href="{{ value.document.url }}">{{ value.display.name }}</a>
        {% else %}
          {{ value.display.name }}
        {% endif %}
      </{{ value.heading_tag | default:"h3" }}>
      {# djlint: on #}
      <p class="fr-card__desc">{{ value.display.role }} – {{ value.display.organization }}</p>

      {% if value.contact_info or value.tags %}
        <div class="fr-card__end">
          {% if value.tags %}
            <ul class="fr-tags-group">
              {% for tag in value.tags %}
                <li>{% include_block tag %}</li>
              {% endfor %}
            </ul>
          {% endif %}

          {% if value.contact_info %}<p class="fr-card__detail">{{ value.contact_info|safe }}</p>{% endif %}
        </div>
      {% endif %}
    </div>
  </div>
  <div class="fr-card__header">
    <div class="fr-card__img">
      <div class="cmsfr-vertical_contact_card__header fr-py-2w">
        {% image value.display.image fill-200x200 as contact_image %}
        <img class="cmsfr-vertical_contact_card-img fr-py-2w"
             src="{{ contact_image.url }}"
             width="4.5em"
             height="4.5em"
             alt="" />
      </div>
    </div>
  </div>
</div>
