{% 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; }
</style>

  
<div style="display: flex ; flex-direction: column ;">
  {{ include('header.html.twig') }}
  {{ 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>
      <h3>Témoignage:</h3> il doit inclure, le ou les métiers envisagés, ainsi que les formations suggérées.</br>
      Ex: Je serais magistrat ou expert-comptable. Formations envisagées: licence de droit, double licence droit-économie-gestion. Diplôme de comptabilité gestion (DCG).</p>
      
      <h3>Signature:</h3> il doit inclure, prénom du jeune et nom du conseiller.</p>
Ex: Julien a été accompagné par Sophie Jordan, Conseillère d'orientation Nantes 44.</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é.</p></div><!-- conseil -->  
<div style="width: 30%; display: flex ; flex-direction: column ; justify-content: space-around ; align-self: stretch">
  <div>
  Témoignage= 150 caractères maximum<br>
  {{ form_widget(form.temoignage1) }}
  <br>
  Signature= 80 caractères maximum<br>
  {{ form_widget(form.signature1) }}
  </div>
  <div style="align-self: center">
  {{form_widget(form.ImagePrecedente)}}
  </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>
    {{form_widget(form.save)}}
    <button onclick="export_image(event);">Exporter cette image</button>
  </div>
</div><!-- previsualisation -->
</div> <!-- content -->
{{ form_end(form) }}
{{ include('footer.html.twig') }}
</div>


{% endblock %}