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

{% block title %}Images{% 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; 
	      overflow:scroll; height:80vh;">
  <div class="example-wrapper" >
    <h2>Mes illustrations</h2>
  </div>
  <div><table>
    {% for image in images %}
    {% set image_path = 'images/uploaded/'~ image.imageName  %}
    <tr id="row-{{image.id}}" data-imageid="{{image.id}}">
      <td>{{ image.id}}</td>
      <td>{{ image.comment }}</td>
      <td>{{ image.updatedAt|date('Y-m-d H:i:s') }}</td>
      <td><img src="{{asset(image_path) }}" height="100"</img></td>
	       <td><button onClick="deleteImage(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 %}