{% extends "layout.html" %}

{% block content %}
    <h1>Audio Archiv</h1>
    
    {% if error is defined and error == true %}
    <div id="box-wrapper">
        <div class="error">{{ errorMessage }}</div>
    </div>
    {% endif %}
    
    <div id="archive">
        {% if albums is defined %}
        {% for album in albums %}
        <a href="{{ url('archive-detail', {albumID: album.albumID}) }}">
            <div class="album-thumb">
                <img alt="" src="{{ album.coversmall }}" />
                <h3 class="album-title">{{ album.albumTitle|slice(0,22) }}{% if album.albumTitle|length > 22 %}...{% endif %}</h3>
                <h4 class="artist">{{ album.artist|slice(0,15) }}{% if album.artist|length > 15 %}...{% endif %}</h4>
            </div>  
        </a>
        {% endfor %}
        {% endif %}
    </div>
{% endblock %}