{% 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> Ce visuel
      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>
  Texte= 25 caractères maximum<br>
  {{ form_widget(form.texte) }}
  </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-type="{{ type }}">
  </div>
  <div style="align-self: center">
  {{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>

<!-- 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 %}