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

{% block title %}Hello ModelesController!{% 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>
{% include('header.html.twig') %}
<div style="display: flex ; flex-direction: row">
  <div style="align-self: flex-start">
    <img src="{{asset('images/image_lat.png')}}" style="height: 80vh;">
  </div>
    <div style="display: flex ; flex-direction: column ; border: solid; 
		">
      <div class="example-wrapper" >
	<h2>Mes modèles</h2>
      </div>

  <div style="overflow:scroll; height:65vh;"><table>
    {% for modele in modelesfb %}
    <tr data-modelid="{{modele.id}}" data-modeltype="{{modele.type}}">
      <td>{{ modele.id}}</td>
      <td>{{ modele.type}}</td>
      <td><button onClick="editModele(event);">Editer</button></td>
      <td><button onClick="deleteModele(event);">Supprimer</button></td>
      
    </tr>
    {% endfor %}
  </table></div>
  Télécharger une nouvelle image : <button onClick="window.open('/images/upload')" >Télecharger</button>
</div>
</div>

{% include('footer.html.twig') %}
{% endblock %}