{% extends 'base.html' %}

{% block content %}
    <style>
        .blog-card {
            margin: 10px;
        }

        .blog-card img {
            width: 100%;
            height: auto;
        }
    </style>
    <div class="uk-container">
        <div class="uk-grid uk-grid-small uk-child-width-1-4@m uk-child-width-1-2@s" uk-grid>
            {% if not posts %}
                <h4 style="margin-top: 30px">작성된 포스트가 없습니다.</h4>
            {% else %}
                {% for post in posts %}
                    <div>
                        <div class="uk-card uk-card-default blog-card">
                            <div class="uk-card-media-top">
                                <img src="{{ post.thumbnail_img | default('https://via.placeholder.com/300x200', true) }}"
                                     alt="{{ post.title }}" style="max-width: 100%;max-height: 500px;">
                            </div>
                            <div class="uk-card-body">
                                <h3 class="uk-card-title">{{ post.title }}</h3>
                                <a href="{{ url_for('post', post_id=post.id) }}" class="uk-button uk-button-text">Read
                                    more</a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            {% endif %}
        </div>
    </div>
{% endblock %}