{% extends "base.html" %}

{% block content %}
<div class="timeline-container">
    
    <div class="timeline-feed">
        {% for post in posts %}
        <article class="timeline-post">
            <div class="post-header">
                <div class="post-meta">
                    <time class="post-date">{{ post.date }}</time>
                    {% if post.language %}
                    <span class="post-lang">{{ post.language }}</span>
                    {% endif %}
                    {% if post.type == "ai" %}
                    <span class="post-ai">
                        <span class="ai-icon icon-ai"></span>
                        ai
                    </span>
                    {% endif %}
                </div>
            </div>
            
            <div class="post-content">
                <h3 class="post-title">
                    <a href="{{ post.url }}">{{ post.title }}</a>
                </h3>
                
            </div>
        </article>
        {% endfor %}
    </div>

    <!-- OAuth Comment System -->
    <section class="comment-section">
        <div id="comment-atproto"></div>
    </section>
    
    {% if posts|length == 0 %}
    <div class="empty-state">
        <p>No posts yet. Start writing!</p>
    </div>
    {% endif %}
</div>
{% endblock %}