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

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

{% block user_content %}
  {% if bookmarks_by_category|length == 0 %}
  <div class="alert alert-warning">Aucun favori pour le moment.</div>
  {% else %}

    {% for bookmarks_category in bookmarks_by_category %}
    <h4>{{ bookmarks_category.category.name }}</h4>
    <table class="table">
      <thead>
        <th></th>
        <th>Collection</th>
        <th>Catégorie</th>
        <th></th>
        <th></th>
      </thead>
      <tbody>
      {% for bookmark in bookmarks_category.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>
    {% endfor %}
  {% endif %}
{% endblock %}

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