{% extends "layouts/app.html" %}

{% block title %}{% lisp (title! "Entry images") %}{% endblock %}

{% block content %}
<h1>{% lisp (title!) %}</h1>
<h2>{{ entry.title }}</h2>

<ul class="toolbar">
  <a href="/entries/{{entry.id}}">Go back entry</a>
  <a href="/entries/{{entry.id}}/images/new">Add image</a>
</ul>

{% if images %}
<table class="list">
  <thead>
    <tr>
      <th>Number</th>
      <th>Image</th>
      <th>Alt text</th>
      <th>Operation</th>
    </tr>
  </thead>
  <tbody>
    {% for (image . index) in images %}
    <tr>
      <td>{{index}}</td>
      <td>
        <img src="/storage/{{user.id}}/entry{{entry.id}}/{{image.filename}}?CONTENT-TYPE={{image.content-type}}&SIZE=100x100" alt="{{image.alt-text}}">
      </td>
      <td>{{image.alt-text}}</td>
      <td>
        <div>
          <a href="/entries/{{entry.id}}/images/{{image.id}}/edit">Edit</a>
          <form action="/entries/{{entry.id}}/images/{{image.id}}" method="post">
            <input type="hidden" name="AUTHENTICITY-TOKEN" value="{{token}}">
            <input type="hidden" name="METHOD" value="delete">
            <input type="submit" value="Delete">
          </form>
        </div>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% else %}
<p>No images</p>
{% endif %}
{% endblock %}