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

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

{% block content %}

<div class="row">
    <div class="col-lg-12">
        <h1>{{ object.title }}</h1>
        <p>{{object.date_added| date:"F d, Y"}}</p>
    </div>
</div>

{% if object.photos or object.videos %}
            <div class="grid">
            {% for photo in object.photos.all %}
                <div class="grid-item">
                    <a href="{{ photo.get_absolute_url }}" >
                        <img src="{{photo.get_thumbnail_url}}" class="img-thumbnail" width="200" /></li>
                    </a>
                </div>
            {% endfor %}
            {% for video in object.videos.all %}
             {% if video.thumbnail %}
             <div class="grid-item "><a href="{{video.get_absolute_url }}" ><img src="{{video.thumbnail.url }}" class="img-thumbnail" width="200" /></a></div>
                {% endif %}
            {% 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 %}