{% extends 'base.html' %}

{% block content %}
    <div class="uk-container">
        <div class="grid-container masonry-grid">
            {% for post in posts %}
                <div class="blog-card uk-card uk-card-default">
                    <div class="uk-card-media-top">
                        <img src="{{ post.thumbnail_img }}" alt="{{ post.title }}">
                    </div>
                    <div class="uk-card-body">
                        <h3 class="uk-card-title">{{ post.title }}</h3>
                        <!-- Truncate the contents to 100 characters, removing any HTML tags -->
                        <p>{{ post.contents | striptags | truncate(100) }}</p>
                        <a href="#" class="uk-button uk-button-text">Read more</a>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $('.masonry-grid').masonry({
                // options...
                itemSelector: '.blog-card',
                columnWidth: '.blog-card',
                percentPosition: true
            });
        });
    </script>

{% endblock %}