{% extends "blueimp_base_t.html" %}

{% block navbar %}
<div class="navbar navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="/index">{{ title }}</a>
        </div>

        <ul class="nav navbar-nav navbar-left">
            <li class="dropdown">
                <a href='#' class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                    Albums
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" role="menu">
                    {% for album in albums %}
                        <li role="presentation" class="dropdown">
                            <a role="menuitem" tabindex="-1" href="/album/{{ album.url_part }}">
                                {{ album.album_name }}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </li>
        </ul>
    </div>
</div>
{% endblock navbar %}

{% block mainpage %}
<div class="container">
    <h1>{{ current_album.album_name }}</h1>
    <blockquote>
        <p>{{ current_album.album_description }}</p>
    </blockquote>
    <br>

    <div id="links"></div>
    {% for picture in pictures %}
        <a href="{{ picture.path_to_image }}"
           title="{{ picture.name }}"
           data-gallery>
            <img src="{{ picture.path_to_thumbnail }}"
                 alt="{{ picture.name }}"
                 title="{{ picture.name }} - {{ picture.description }}">
        </a>
    {% endfor %}
    <br>
</div>

{{ super() }}
{% endblock mainpage %}

<script src="/static/js/albums.js"></script>
