{% extends "base.html" %}

{% block title %}首页 - 个人博客{% endblock %}

{% block content %}
<div class="add-post-wrapper">
    <a href="{{ url_for('editor') }}" class="add-post-btn">+ 添加文章</a>
    {% if logged_in %}
        <a href="{{ url_for('logout') }}" class="add-post-btn">登出</a>
    {% else %}
        <a href="{{ url_for('login') }}" class="add-post-btn">登录</a>
    {% endif %}
</div>
<div class="waterfall">
    {% if posts %}
        {% for post in posts %}
        <article class="card">
            {% if post.thumbnail %}
            <div class="card-image">
                <img src="{{ post.thumbnail }}" alt="{{ post.title }}" loading="lazy" />
            </div>
            {% endif %}
            <div class="card-body">
                <h2 class="card-title">
                    <a href="{{ url_for('view_post', post_id=post.id) }}">{{ post.title }}</a>
                </h2>
                <time class="card-date" datetime="{{ post.date }}">{{ post.date[:16] | replace('T', ' ') }}</time>
                <div class="card-summary">{{ post.content | safe }}</div>
                <a href="{{ url_for('view_post', post_id=post.id) }}" class="card-link">阅读全文 →</a>
            </div>
        </article>
        {% if not loop.last %}
        <hr class="post-separator">
        {% endif %}
        {% endfor %}
    {% else %}
        <div class="empty-state">
            <p>还没有文章，快去 <a href="{{ url_for('editor') }}">编辑</a> 第一篇吧！</p>
        </div>
    {% endif %}
</div>

<div class="next-article-btn" id="nextArticleBtn" title="下一篇文章">↓</div>
{% endblock %}