{% load i18n wagtailimages_tags wagtailcore_tags dsfr_tags wagtail_dsfr_tags %}
<div class="fr-card fr-card--horizontal {% if value.image_ratio %}{{ value.image_ratio }}{% endif %} {% if value.enlarge_link %}fr-enlarge-link{% endif %} {% if value.grey_background %}fr-card--grey{% elif value.no_background %}fr-card--no-background{% endif %} {% if value.no_border %}fr-card--no-border{% endif %} {% if value.shadow %}fr-card--shadow{% endif %} {% if value.document or value.link.document %}fr-card--download{% endif %}">
  <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 %}
        {{ 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.title }}
            {% 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>
        {% else %}
          {{ value.title }}
        {% endif %}
      </{{ value.heading_tag | default:"h3" }}>
      {# djlint: on #}
      {% if value.description %}{{ value.description | richtext_p_add_class:"fr-card__desc" }}{% endif %}
      {% if value.top_detail_badges_tags or value.top_detail_text %}
        <div class="fr-card__start">
          {% if value.top_detail_badges_tags %}
            {% for block in value.top_detail_badges_tags %}
              {% include_block block %}
            {% endfor %}
          {% endif %}
          {% if value.top_detail_text %}
            <p class="fr-card__detail{% if value.top_detail_icon %} {{ value.top_detail_icon }}{% endif %}">
              {{ value.top_detail_text }}
            </p>
          {% endif %}
        </div>
      {% endif %}
      {% if value.bottom_detail_text %}
        <div class="fr-card__end">
          <p class="fr-card__detail{% if value.bottom_detail_icon %} {{ value.bottom_detail_icon }}{% endif %}">
            {{ value.bottom_detail_text }}
          </p>
        </div>
      {% elif value.link.document %}
        <div class="fr-card__end">
          <p class="fr-card__detail{% if value.bottom_detail_icon %} {{ value.bottom_detail_icon }}{% endif %}">
            {% include "sites_conformes_content_manager/blocks/download_info.html" with document=value.link.document %}
          </p>
        </div>
      {% endif %}
    </div>
    {% if value.call_to_action and not value.bottom_detail_text %}
      <div class="fr-card__footer">
        {% for block in value.call_to_action %}
          {% include_block block %}
        {% endfor %}
      </div>
    {% endif %}

  </div>
  {% if value.image %}
    <div class="fr-card__header">
      <div class="fr-card__img">{% image value.image width-1200 class="fr-responsive-img" alt="" %}</div>
      {% if value.image_badge %}
        <ul class="fr-badges-group">
          {% for badge in value.image_badge %}
            <li>{% include_block badge %}</li>
          {% endfor %}
        </ul>
      {% endif %}
    </div>
  {% endif %}
</div>
