{% with var=json.fields varwf=json.workflow.fields %}

  <div style="
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;">
    {% with img=var.detail_image %}
      {% if img %}
        {% with urlimg=img|get:"url" %}
          <img  style="max-width:100%; max-height: 600px; width: 100%; object-fit: cover" src="{% make_public_url url=urlimg %}">
        {% endwith %}
      {% endif %}
    {% endwith %}
  </div>

  <h1 style="padding:0px 20px;" >{{ var.detail_titre }}</h1>

  <div style="padding:0px 20px;" >
    <h3>{{ var.detail_chapeau|linebreaksbr  }}</h3>
    <p>{{ var.detail_description|linebreaksbr }}</p>

    {% if var.detail_lien1 or var.detail_lien2 or var.detail_lien3 %}
      <p><strong>Liens</strong></p>
      {% if var.detail_lien1 %}<p><a href="{{ var.detail_lien1 }}">{{ var.detail_lien1_libelle }}</a>{% endif %}
      {% if var.detail_lien2 %}<br><a href="{{ var.detail_lien2 }}">{{ var.detail_lien2_libelle }}</a>{% endif %}
      {% if var.detail_lien3 %}<br><a href="{{ var.detail_lien3 }}">{{ var.detail_lien3_libelle }}</a>{% endif %}
      </p>
    {% endif %}
  </div>

  {% if var.detail_encart == True %}
    <div style="padding:20px;background-color:whitesmoke;" >
      <p><strong>{{ var.titre_encart|upper }}</p>
        <p>{{ var.contenu_encart|linebreaksbr  }}</p>
        {% if var.detail_lien3 %}<p><a href="{{ var.lien_encart }}">{{ var.libelle_lien_encart }}</p>{% endif %}
      </div>
  {% endif %}



{% endwith %}


{# <pre>{{json|pprint}}</pre> #}
