{% extends "base.html" %}
{% load static %}


<!-- Title -->
{% block title %} Gallery : Albums : {{ album.name }} {% endblock %}

<!-- Parallax -->
{% block parallax %}
    {% if album.cover %}
    <div class="uk-inline uk-height-medium uk-background-cover uk-light uk-flex" uk-parallax="bgy: -300" style="background-image: url('{{ album.cover.photo_bg.url }}');">
    {% else %}
    <div class="uk-inline uk-height-medium uk-background-cover uk-light uk-flex" uk-parallax="bgy: -300" style="background-image: url('{% static 'img/placeholder.png' %}');">
    {% endif %}
        <div class="uk-overlay-primary uk-position-cover"></div>
        <div class="uk-overlay uk-position-center uk-light uk-text-center">
            <h1 class="uk-text-light">{{ album.name }}</h1>
            <p class="uk-text-light uk-text-lead">{{ album.location }}</p>
            <p class="uk-text-lighter">{{ album.album_date|date:"d.m.Y" }} &bull;  {{ album.photos_in_album }} photos </p>
        </div>
    </div>
{% endblock %}


<!-- Content -->
{% block content %}

    <div class="uk-grid-small uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-child-width-1-5@l" uk-grid="masonry: true">
        {% for photo in photos %}
            <a href="{{ photo.get_absolute_url }}">
                <img 
                    loading="lazy" 
                    src="{{ photo.photo_sm.url }}" 
                    srcset="
                        {{ photo.photo_sm.url }} 320w, 
                        {{ photo.photo_md.url }} 720w, 
                        {{ photo.photo_bg.url }} 1920w
                    " 
                    sizes="(max-width: 640px) 320px, 
                           (max-width: 960px) 720px, 
                           1920px" 
                    alt="{{ photo.album.name }} - {{ photo.slug }}">
            </a>
        {% endfor %}
    </div>
    
    {% include "./partials/pagination.html" %}

{% endblock %}