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

{% block title %}Hello MainPageController!{% 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 ">
  <div></div>
    <div class="example-wrapper" >
    <h2>sélectionnez un support de publication à personnaliser</h2>
  </div>

    {{ form_start(form,{'attr':{'style':'display: flex ; flex-direction: column'}}) }}
      <div style="display: flex ; flex-direction: row; justify-content: center">
	<div class="facebook" style="display: flex ; flex-direction: column">
	  <img src="{{asset('images/facebook.png')}}" width="65">
	  {% set choices = form.doctype.vars.choices %}
	  {% for i in 0..3 %}
	  <div><label>{{ choices[i].label }}</label>
	    <input type="radio" name="doctype" value="{{ choices[i].value}}">
	  </div>
	  {% endfor %}
	</div><!-- end facebook -->
	<div class="linkedin" style="display: flex ; flex-direction: column">
	  <img src="{{asset('images/linkedin.png')}}" width="65">
	  {% set choices = form.doctype.vars.choices %}
	  {% for i in 4..6 %}
	  <div><label>{{ choices[i].label }}</label>
	    <input type="radio" name="doctype" value="{{ choices[i].value}}">
	  </div>
	  {% endfor %}
	</div><!-- end linkedin -->
        <div class="instagram" style="display: flex ; flex-direction: column">
	  <img src="{{asset('images/instagram.png')}}" width="65">
	  {% set choices = form.doctype.vars.choices %}
	  {% for i in 7..11 %}
	  <div><label>{{ choices[i].label }}</label>
	    <input type="radio" name="doctype" value="{{ choices[i].value}}">
	  </div>
	{% endfor %}
	</div><!-- end instagram -->
	<div class="presentation" style="display: flex ; flex-direction: column">
	  <img src="{{asset('images/tonavenir.png')}}" width="65">
	  {% set choices = form.doctype.vars.choices %}
	  {% for i in 12..12 %}
	  <div><label>{{ choices[i].label }}</label>
	    <input type="radio" name="doctype" value="{{ choices[i].value}}">
	  </div>
	  {% endfor %}
	</div>
      </div>
      <div style="align-self: center"><input type="submit" value="Étape suivante"></div>
      </form>


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

{% endblock %}