{% extends 'base.html' %}

{% block header %}
<h1>{% block title %}Albums{% endblock %}</h1>
{% endblock %}

{% block header_actions %}
<a href="create-album">
  <button id="new-album">Nouvel Album</button>
</a>
{% endblock %}

{% block content %}
<form action="/albums/search" method="post" id="search-form">
  <input id="search-bar" type="search" name="query" placeholder="Rechercher" required>
  <br/>
  <input type="checkbox" id="online-search" name="online-search" value="online-search" checked="on">
    <label for="online-search" id="online-search-label">Recherche en ligne</label>
</form>
{% if albums|length != 0 %}
  {% for album in albums %}
  <a href="{{ album['uuid'] }}">
      <div class="album-cover" id="album-{{ album['id'] }}">
          {{ album["name"] }}
      </div>
  </a>
  {% endfor %}
{% else %}
  <div>Aucun album disponible</div>
{% endif %}
{% endblock %}