{% extends "base.html" %}

{% block title %}{{ _('home.title', current_locale) }}{% endblock %}
{% block meta_description %}{{ _('home.meta_description', current_locale) }}{% endblock %}
{% block meta_keywords %}{{ _('home.meta_keywords', current_locale) }}{% endblock %}

{% block og_type %}website{% endblock %}
{% block og_title %}{{ _('home.title', current_locale) }}{% endblock %}
{% block og_description %}{{ _('home.meta_description', current_locale) }}{% endblock %}

{% block twitter_title %}{{ _('home.title', current_locale) }}{% endblock %}
{% block twitter_description %}{{ _('home.meta_description', current_locale) }}{% endblock %}

{% block content %}
<section class="page-header" data-testid="page-header-home">
    <div class="page-header-flex">
        <div data-testid="page-header-content">
            <h1 class="page-title" data-testid="page-title-home">{{ _('home.page_title', current_locale) }}</h1>
            <p class="page-subtitle" data-testid="page-subtitle-home">{{ _('home.page_subtitle', current_locale) }}</p>
        </div>
        {% if can_create %}
        <a href="/web/posts/new" class="btn btn-primary" data-testid="btn-create-post-header">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-right: 0.5rem;">
                <path d="M8 2v12M2 8h12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            {{ _('home.write_post', current_locale) }}
        </a>
        {% endif %}
    </div>
</section>

{% if posts %}
<section class="post-list" data-testid="post-list">
    {% for post in posts %}
    <article class="card post-card" data-testid="post-card-{{ post.id }}">
        <div class="post-card-header" data-testid="post-card-header-{{ post.id }}">
            <h2 class="post-card-title" data-testid="post-title-{{ post.id }}">
                <a href="/web/posts/{{ post.slug }}" data-testid="post-title-link-{{ post.id }}">{{ post.title }}</a>
            </h2>
            {% if post.published %}
            <span class="badge badge-success" data-testid="post-status-{{ post.id }}">{{ _('home.status_published', current_locale) }}</span>
            {% else %}
            <span class="badge" data-testid="post-status-{{ post.id }}">{{ _('home.status_draft', current_locale) }}</span>
            {% endif %}
        </div>
        
        <div class="post-card-meta" data-testid="post-meta-{{ post.id }}">
            <span class="post-card-meta-item" data-testid="post-author-{{ post.id }}">
                <span class="avatar avatar-sm" data-testid="post-author-avatar-{{ post.id }}">{{ post.author_id[0]|upper }}</span>
                <span data-testid="post-author-name-{{ post.id }}">{{ post.author_id }}</span>
            </span>
            <span class="post-card-meta-item" data-testid="post-date-{{ post.id }}">
                {{ post.created_at.strftime('%B %d, %Y') }}
            </span>
            <span class="post-card-meta-item" data-testid="like-count-{{ post.id }}">
                👍 {{ post.like_count }}
            </span>
            <span class="post-card-meta-item" data-testid="comment-count-{{ post.id }}">
                💬 {{ post.comment_count }}
            </span>
        </div>
        
        <div class="post-card-content" data-testid="post-content-preview-{{ post.id }}">
            {{ post.content[:200] }}{% if post.content|length > 200 %}...{% endif %}
        </div>
        
        <div class="post-card-footer" data-testid="post-card-footer-{{ post.id }}">
            <div class="post-card-tags" data-testid="post-tags-{{ post.id }}">
                {% for tag in post.tags %}
                <span class="tag" data-testid="post-tag-{{ post.id }}-{{ loop.index }}">{{ tag }}</span>
                {% endfor %}
            </div>
            <a href="/web/posts/{{ post.slug }}" class="btn btn-sm" data-testid="btn-read-more-{{ post.id }}">
                {{ _('home.read_more', current_locale) }}
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left: 0.25rem;">
                    <path d="M6 12L10 8L6 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </a>
        </div>
    </article>
    {% endfor %}
</section>

<nav class="pagination" data-testid="pagination" aria-label="Pagination">
    {% if has_prev %}
    <a href="{{ request.url.path }}?page={{ current_page - 1 }}" class="pagination-item" data-testid="pagination-prev">{{ _('home.pagination_previous', current_locale) }}</a>
    {% else %}
    <span class="pagination-item disabled" data-testid="pagination-prev">{{ _('home.pagination_previous', current_locale) }}</span>
    {% endif %}
    
    <span class="pagination-item active" data-testid="pagination-current">{{ current_page }}</span>
    
    {% if has_next %}
    <a href="{{ request.url.path }}?page={{ current_page + 1 }}" class="pagination-item" data-testid="pagination-next">{{ _('home.pagination_next', current_locale) }}</a>
    {% else %}
    <span class="pagination-item disabled" data-testid="pagination-next">{{ _('home.pagination_next', current_locale) }}</span>
    {% endif %}
</nav>

{% else %}
<div class="empty-state" data-testid="empty-state">
    <div class="empty-state-icon" data-testid="empty-state-icon">📝</div>
    <h3 data-testid="empty-state-title">{{ _('home.empty_title', current_locale) }}</h3>
    <p data-testid="empty-state-description">{{ _('home.empty_description', current_locale) }}</p>
    <a href="/web/posts/new" class="btn btn-primary" data-testid="btn-create-first-post">{{ _('home.empty_action', current_locale) }}</a>
</div>
{% endif %}
{% endblock %}