{% block content %}


<section class="Pin">

    {% for pin in object_list %}
        <article class="Pin-container">
            <figure class="Pin-item">
                <a class="pincontainer" href="{% url "Pin:pin_detail" pin.id %}">
                    <img class="Pin-image" src="/static/img/{{ pin.pic }}.jpg" alt="">
                    <div  class="{{ pin.unique_id }} pinclock"></div>
                </a>
                <figcaption class="Pin-user">
                    By {{ pin.user.username}}
                    {{ pin.created }}

                    <br>
                    <!--{{ pin.unique_id }}
                    {{ pin.countdown_time }}-->

                    <script type="text/javascript">
                        var date = new Date("{{ pin.countdown_time }}");
                        var now = new Date();
                        var diff = (date.getTime()/1000) - (now.getTime()/1000);

                        var clock = $('.{{ pin.unique_id }}').FlipClock(diff,{
                            clockFace: 'DailyCounter',
                            countdown: true
                        });
                    </script>
                </figcaption>
            </figure>
        </article>
    {% endfor %}
</section>
{% endblock content %}