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

{% block title %}{{ object.title }}{% endblock %}

{% block content %}

<div class="row">
    <div class="col-lg-12">
        <h1>{{ object.title }}</h1>
            {% if user.is_staff %}
        <h6><a href="{% url 'medialogue:ml-album-edit' slug=object.slug %}">Edit Album</a></h4>
            {% endif %}
        <p>{{object.date_added| date:"F d, Y"}}</p>
    </div>
</div>

{% if object.media %}
            <div class="grid">
            {% for media in object.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 %}
{% else %}
    <div class="row">
        <div class="col-lg-12"><h1>Nothing here...</h1></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 %}