{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block page_title %}Blog da Paula Fisch{% endblock %}

{% block type_styles %}
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.post-card {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 25px;
    border-radius: 12px;
    border-left: 4px solid var(--gold);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: fit-content;
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.post-card h2 {
    margin-bottom: 10px;
    border-left: none;
    padding-left: 0;
    font-size: 1.3rem;
}

.post-card h2 a {
    text-decoration: none;
    border-bottom: none;
    color: var(--harvard-red);
}

.post-card h2 a:hover {
    color: var(--crimson);
    border-bottom: 2px solid var(--crimson);
}

.post-card .post-meta {
    font-size: 0.85rem;
    color: var(--gold);
    margin-bottom: 15px;
    text-align: left;
}

.post-card .post-excerpt {
    color: var(--dark-brown);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 15px;
}

.post-card .post-type {
    display: inline-block;
    background-color: var(--harvard-red);
    color: var(--light-beige);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.post-card .post-tags {
    margin-top: 15px;
}

.post-card .post-tags .tag {
    font-size: 0.7rem;
    padding: 2px 6px;
    margin-right: 4px;
}

.intro-section {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px;
    background-color: rgba(218, 165, 32, 0.1);
    border-radius: 15px;
    border: 2px solid var(--gold);
}

.intro-section h2 {
    color: var(--harvard-red);
    margin-bottom: 15px;
    border-left: none;
    padding-left: 0;
}

.intro-section p {
    font-size: 1.1rem;
    color: var(--dark-brown);
    margin-bottom: 0;
    text-align: center;
}

.stats-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin: 40px 0;
}

.stat-card {
    text-align: center;
    padding: 20px;
    background-color: rgba(245, 245, 220, 0.5);
    border-radius: 10px;
    border: 1px solid var(--gold);
}

.stat-card .number {
    font-size: 2rem;
    font-weight: 600;
    color: var(--harvard-red);
    display: block;
}

.stat-card .label {
    color: var(--crimson);
    font-size: 0.9rem;
    margin-top: 5px;
}

.categories-nav {
    text-align: center;
    margin: 30px 0;
    padding: 20px;
    background-color: rgba(137, 120, 78, 0.1);
    border-radius: 10px;
}

.categories-nav h3 {
    margin-bottom: 15px;
    color: var(--harvard-red);
}

.categories-nav a {
    display: inline-block;
    margin: 5px 10px;
    padding: 8px 16px;
    background-color: rgba(165, 71, 28, 0.1);
    color: var(--harvard-red);
    text-decoration: none;
    border-radius: 20px;
    border: 1px solid var(--harvard-red);
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.categories-nav a:hover {
    background-color: var(--harvard-red);
    color: var(--light-beige);
    border-bottom: 1px solid var(--harvard-red);
}

@media (max-width: 600px) {
    .posts-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .stats-section {
        grid-template-columns: 1fr 1fr;
    }
    
    .categories-nav a {
        display: block;
        margin: 5px 0;
    }
}
{% endblock %}

{% block content %}
<div class="intro-section">
    <h2>🐠✨🐚 Bem-vindos ao meu cantinho digital!</h2>
    <p>Posts sobre carreira, tecnologia, receitas fit e os gatos mais famosos da internet (Apollo, Ollie e Athena).</p>
</div>

<div class="stats-section">
    <div class="stat-card">
        <span class="number">{{ posts | length }}</span>
        <div class="label">Posts Publicados</div>
    </div>
    <div class="stat-card">
        <span class="number">{{ posts | map(attribute='type') | unique | list | length }}</span>
        <div class="label">Tipos de Conteúdo</div>
    </div>
    <div class="stat-card">
        <span class="number">{{ posts | map(attribute='category') | unique | list | length }}</span>
        <div class="label">Categorias</div>
    </div>
</div>

<div class="categories-nav">
    <h3>Navegue por Categoria</h3>
    <a href="archive.html" style="background-color: var(--gold); color: var(--light-beige); border-color: var(--gold);">📅 Arquivo Cronológico</a>
    {% set categories = posts | map(attribute='category') | unique | list %}
    {% for category in categories %}
        {% if category %}
        <a href="category-{{ category | lower | replace(' ', '-') }}.html">{{ category.title() }}</a>
        {% endif %}
    {% endfor %}
</div>

<div class="posts-grid">
    {% for post in posts %}
        {% if post.status != 'template' %}
        <div class="post-card">
            <h2><a href="{{ post.id }}.html">{{ post.title }}</a></h2>
            
            <div class="post-meta">
                {{ post.date_created | format_date('short') if post.date_created }} • 
                {{ post.content_html | reading_time }}
            </div>
            
            <div class="post-excerpt">
                {{ post.content_html | excerpt(150) }}
            </div>
            
            <div>
                <span class="post-type">{{ post.type }}</span>
            </div>
            
            {% if post.tags %}
            <div class="post-tags">
                {% for tag in post.tags[:3] %}
                <span class="tag">#{{ tag }}</span>
                {% endfor %}
                {% if post.tags | length > 3 %}
                <span class="tag">+{{ post.tags | length - 3 }}</span>
                {% endif %}
            </div>
            {% endif %}
        </div>
        {% endif %}
    {% endfor %}
</div>

{% if posts | length == 0 %}
<div class="intro-section">
    <h2>🚧 Em Construção</h2>
    <p>O blog está sendo preparado com muito carinho. Volte em breve para conferir os primeiros posts!</p>
</div>
{% endif %}
{% endblock %}