<div class="modal modal-large fade" id="modal-hobby-{{item.id}}" tabindex="-1" role="dialog" aria-labelledby="{% trans %}Ouvrir les détails{% endtrans %}" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <img src="images/hobby/{{item.coverImage}}" class="lazyestload" alt="{% trans %}Image du l'activité{% endtrans %}"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="container"> <div class="modal-welcome"> <h2 class="modal-title">{{item.translate(locale).title}}</h2> <div class="outline"></div> <div class="modal-intro">{{item.translate(locale).introduction|raw}}</div> </div> <div class="modal-desc"> {% for key, area in item.areas %} {% if key is odd %} <div> <div class="modal-desc-img"> <img src="images/hobby/{{area.image}}" class="lazyestload" alt="Image"> </div> <div class="modal-desc-text"> <h3>{{area.translate(locale).title}}</h3> <div>{{area.translate(locale).content}}</div> </div> </div> {% else %} <div> <div class="modal-desc-text"> <h3>{{area.translate(locale).title}}</h3> <div>{{area.translate(locale).content}}</div> </div> <div class="modal-desc-img"> <img src="images/hobby/{{area.image}}" class="lazyestload" alt="Image"> </div> </div> {% endif %} {% endfor %} </div> </div> </div> <div class="modal-footer"> <button data-dismiss="modal" aria-label="Close" class="read-more">{% trans %}FERMER{% endtrans %}</button> </div> </div> </div></div>