{% 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 %}
                </div>
            </div>
            
            <div class="post-content">
                <h3 class="post-title">
                    <a href="{{ post.url }}">{{ post.title }}</a>
                </h3>
                
                {% if post.excerpt %}
                <p class="post-excerpt">{{ post.excerpt }}</p>
                {% endif %}
                
                <div class="post-actions">
                    <a href="{{ post.url }}" class="read-more">Read more</a>
                    {% if post.markdown_url %}
                    <a href="{{ post.markdown_url }}" class="view-markdown" title="View Markdown">.md</a>
                    {% endif %}
                    {% if post.translation_url %}
                    <a href="{{ post.translation_url }}" class="view-translation" title="View Translation">🌐</a>
                    {% endif %}
                </div>
            </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 %}