{% extends 'base.html' %}

{% block header %}
<h1>{% block title %}{{ album.name }}{% endblock %}</h1>
{% endblock %}

{% block header_actions %}
<div id="users-list">
  {% for album_user in album.users %}
  <div class="user-profile-picture" style="background-color:{{ album_user.color }};" title="{{ album_user.username }}">
    {{ album_user.username[0] | upper }}
  </div>
  {% endfor %}
</div>
<div class="dropdown">
  <button class="dropbtn"></button>
  <div class="dropdown-content">
    {% if g.user %}
    <a href="/albums/{{ album.uuid }}/add-partition">Ajouter une partition</a>
    {% endif %}
    {% if not_participant %}
    <a href="/albums/{{ album.uuid }}/join">Rejoindre</a>
    {% else %}
    <a href="/albums/{{ album.uuid }}/quit">Quitter</a>
    {% endif %}
    {% if g.user.access_level == 1 %}
    <a id="delete-album" href="/albums/{{ album.uuid }}/delete">Supprimer</a>
    {% endif %}
  </div>
</div>

{% endblock %}

{% block content %}
{% if partitions|length != 0 %}
<br/><br/>
<div id="partitions-grid">
  {% for partition in partitions | reverse %}
  <div>
  <a href="/{{ album.uuid }}/{{ partition['uuid'] }}">
    <div class="partition" id="partition-{{ partition['uuid'] }}">
      <img class="partition-thumbnail" src="/static/thumbnails/{{ partition['uuid'] }}.jpg">
      <div class="partition-description">
        <div class="partition-name">{{ partition["name"] }}</div>
        <div class="partition-author">{{ partition["author"] }}</div>
      </div>
    </div>
  </a>
  {% if partition["user_id"] == g.user.id or g.user.access_level == 1 %}
    <a href="/partition/{{ partition['uuid'] }}/edit"><div class="edit-button">✏️</div></a>
  {% endif %}
  </div>
  {% endfor %}
</div>
{% else %}
<br/>
<div id="partitions-grid" style="display: inline;">Aucune partition disponible</div>
{% endif %}
{% endblock %}