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

{% block title %}Albums{% endblock %}

{% block content %}

<div class="row">
    <div class="col-lg-12">
        <h1>Albums</h1>
    </div>
</div>

{% if object_list %}
{% for album in object_list.all %}
<div class="row">
    <div class="col-lg-12 album-sample">
        <h2><a href="{{album.get_absolute_url}}">{{album.title}}</a></h2>
        <p>{{album.date_added | date:"F d, Y"}}</p>
        <div class="grid">
        {% for media in album.media.all %}
            <div class="grid-item ">
                <a href="{{media.get_absolute_url }}" >
                    <img src="{% thumbnail media.preview 200x200 crop %}" class="img-thumbnail" />
                </a>
            </div>
         {% endfor %}
    </div>
{% endfor %}
{% else %}
<div class="row">
    <div class="col-lg-12">No albums were found.</div>
</div>
{% endif %}
{% endblock %}
{% block extra_scripts %}
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<script>
$(function(){
$('.grid').masonry({
  // options
    itemSelector: '.grid-item',
      columnWidth: 210
      });
});
</script>
{% endblock %}
