{% load static wagtailcore_tags wagtailimages_tags %}
<div class="fr-container fr-my-6w cmsfr-block-image-and-text">
  <div class="fr-grid-row fr-grid-row--gutters">
    {% if value.image_side == "left" or value.image_side == "left_below" %}
      <div class="fr-col-12 fr-col-sm-{{ value.image_ratio }}{% if value.image_side == "left_below" %} cmsfr-order-mobile__2{% endif %}">
        <div class="bordered fr-px-2w">
          {% include "sites_conformes_content_manager/blocks/image_svg_or_raster.html" with extra_classes="fr-responsive-img" %}
        </div>
      </div>
      <div class="fr-col-12 fr-col-sm{{ -12|add:value.image_ratio }}">
        {{ value.text|richtext }}

        {% if value.link is not None and value.link.url %}
          {% include_block value.link %}
        {% elif value.page and value.link_label %}
          <a class="fr-link fr-fi-arrow-right-line fr-link--icon-right"
             href="{{ value.page.url }}">{{ value.link_label }}</a>
        {% elif value.link_url and value.link_label %}
          <a class="fr-link fr-fi-arrow-right-line fr-link--icon-right"
             href="{{ value.link_url }}">{{ value.link_label }}</a>
        {% endif %}
      </div>
    {% else %}
      <div class="fr-col-12 fr-col-sm{{ -12|add:value.image_ratio }}{% if value.image_side == "right_above" %} cmsfr-order-mobile__2{% endif %}">
        {{ value.text|richtext }}

        {% if value.link is not None and value.link.url %}
          {% include_block value.link %}
        {% elif value.page and value.link_label %}
          <a class="fr-link fr-fi-arrow-right-line fr-link--icon-right"
             href="{{ value.page.url }}">{{ value.link_label }}</a>
        {% elif value.link_url and value.link_label %}
          <a class="fr-link fr-fi-arrow-right-line fr-link--icon-right"
             href="{{ value.link_url }}">{{ value.link_label }}</a>
        {% endif %}
      </div>
      <div class="fr-col-12 fr-col-sm-{{ value.image_ratio }}">
        <div class="bordered fr-px-2w">
          {% include "sites_conformes_content_manager/blocks/image_svg_or_raster.html" with extra_classes="fr-responsive-img" %}
        </div>
      </div>
    {% endif %}
  </div>
</div>
