{% extends 'base.html.twig' %}

{% block title %}Facebook{% endblock %}

{% block body %}
<style>
    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
    .conseil {font-size: 8pt ;}
</style>

  
<div style="display: flex ; flex-direction: column ; ">
  {{ include('header.html.twig') }}

  <!-- content -->
  {{ form_start(form) }}
  <div style="display: flex ; flex-direction: row ; justify-content: space-evenly ; align-items: center">
    <div style="width: 20%; border: solid #b40000 ; margin: 15pt;
      padding: 15pt;border-radius: 15pt" class="conseil"><h2>Conseils</h2> Le visuel
      Le visuel Pass Réflexio comporte 2 visuels que vous devrez importer ensemble
      lors de la publication.</p>
L'image testimonial doit montrer le
      jeune que vous avez accompagné, de face, tenant un panneau
blanc.</p>
Le texte << Devinez ce que je serais plus tard >>
  pourra être déplacé une fois la photo téléchargée.</p>
Titre:
      il doit comporter prénom, nom, âge, classe, établissement et
      ville du jeune. Exemple: Julien Duloup, 17 ans, en terminale au
      lycée Jules Ferry à Blois.</p>
Vous pouvez enregistrer cette matrice pour la modifier ou la réutiliser plus tard.</p>
Quand votre visuel est prêt vous pouvez l'exporter pour le publier sur le réseau concerné.
</div><!-- conseil -->  
<div style="width: 30% ; display: flex ; flex-direction: column ; justify-content: space-around ; align-self: stretch">
    <div style="align-self: center">
      {{form_widget(form.ImageSuivante)}}
    </div>
</div>
<!-- personnalisation -->
<div id="previewblock" style="width: 40% ; display: flex ; flex-direction: column ; justify-content: space-around ; align-items: center; align-self: stretch">
  <div id="preview" data-item="{{ object.id }}" data-page="{{ page }}" data-type="{{ type }}">
  </div>
  <div style="align-self: center">
    <button onclick="export_image(event);">Exporter cette image</button>
  </div>
</div><!-- previsualisation -->
</div> <!-- content -->
  {{ form_end(form) }}

{{ include('footer.html.twig') }}
</div>

<!-- The modal display an image chooser -->
<div class="modal" tabindex="-1" id="imagemodal" role="dialog" data-uid="{{user.id}}" data-oid="{{object.id}}" data-type="{{type}}">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Choisissez une image</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="modalcontent">
        <p>Modal body text goes here.</p>
	
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}