{% extends 'iconolab/user_base.html' %}

{% load thumbnail %}
{% load humanize %}

{% block user_content %}
  <table class="table">
    <thead>
      <th></th>
      <th>Collection</th>
      <th>Catégorie</th>
      <th></th>
      <th></th>
    </thead>
    <tbody>
    {% for bookmark in bookmarks %}
    <tr>
      <td width="10%">
        {% thumbnail bookmark.image.media "100x100" crop=False as thumbnail %}
        <a href="{% url 'image_detail' bookmark.image.item.collection.name bookmark.image.image_guid %}">
          <img src="{{ thumbnail.url }}" width="{{ thumbnail.width }}" height="{{ thumbnail.height }}" />
        </a>
        {% endthumbnail %}
      </td>
      <td>{{ bookmark.image.item.collection.verbose_name }}</td>
      <td>
        {% if request.user.is_authenticated and profile_user == request.user %}
        <form class="bookmark-edit-form" method="post" action="{% url 'bookmark_edit' bookmark.id %}">
          {% csrf_token %}
          <select name="category">
          {% for bookmark_category in bookmark_categories %}
            <option value="{{ bookmark_category.id }}" {% if bookmark_category == bookmark.category %}selected="selected"{% endif %}>{{ bookmark_category.name }}</option>
          {% endfor %}
          </select>
        </form>
        {% else %}
        {{ bookmark.category.name }}
        {% endif %}
      </td>
      <td>{{ bookmark.created|naturaltime }}</td>
      <td class="text-right">
        {% if request.user.is_authenticated and profile_user == request.user %}
        <form method="post" action="{% url 'bookmark_delete' bookmark.id %}">
          {% csrf_token %}
          <button type="submit" class="btn btn-danger btn-xs">Supprimer</button>
        </form>
        {% endif %}
      </td>
    </tr>
    {% endfor %}
    </tbody>
  </table>
{% endblock %}

{% block footer_js %}
<script>
$('.bookmark-edit-form').find('select[name="category"]').on('change', function() {
  $(this).closest('form').trigger('submit');
});
</script>
{% endblock %}