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