{% extends "base.html" %}
{% block content %}
<div class="home-container">
    <div class="sidebar">
        <h3 class="sidebar-title">[categorias]</h3>
        <div class="categories-list">
            {% if available_tags %}
                {% set tag_pages = namespace(counts={}) %}
                {% for page in pages %}
                    {% if page.meta.get('tags') %}
                        {% for tag in page.meta['tags'].split('/') %}
                            {% set tag_clean = tag.strip() %}
                            {% if tag_clean not in tag_pages.counts %}
                                {% set tag_pages.counts = tag_pages.counts | default({}, true) %}
                                {% set _ = tag_pages.counts.update({tag_clean: 0}) %}
                            {% endif %}
                            {% set _ = tag_pages.counts.update({tag_clean: tag_pages.counts[tag_clean] + 1}) %}
                        {% endfor %}
                    {% endif %}
                {% endfor %}
                
                {% for tag in available_tags | sort %}
                    <a href="{{ url_for('tag_view', tag=tag) }}" class="category-item">
                        <span class="category-name">{{ tag }}</span>
                        <span class="category-count">({{ tag_pages.counts.get(tag, 0) }})</span>
                    </a>
                {% endfor %}
            {% endif %}
        </div>
        
        <hr class="sidebar-divider">
        
        <h3 class="sidebar-title">[utilitários]</h3>
        <div class="utilities">
            <a href="{{ url_for('index') }}" class="utility-item">início</a>
            <a href="{{ url_for('portfolio') }}" class="utility-item">portfólio</a>
        </div>
    </div>

    <div class="main-content">
        <h2 class="content-header">/posts</h2>
        {% set ns = namespace(ultimo_ano="") %}
        
        {% for page in pages | sort(attribute='meta.date', reverse=True) %}
            {# Lógica para identificar o ano (aceita datetime ou string) #}
            {% set ano_atual = page.meta.date.strftime('%Y') if page.meta.date is datetime else page.meta.date[:4] %}
            
            {% if ano_atual != ns.ultimo_ano %}
                <h3 class="year-divider">{{ ano_atual }}</h3>
                {% set ns.ultimo_ano = ano_atual %}
            {% endif %}

            <div class="post-entry">
                <a href="{{ url_for('page', path=page.path) }}" class="post-link">
                    <span class="post-day">[{{ page.meta.date.strftime('%d %b') if page.meta.date is datetime else "?? ???" }}]</span>
                    <span class="post-title">{{ page.meta.title }}</span>
                </a>
            </div>
        {% endfor %}
    </div>
</div>

<style>
.home-container {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 3rem;
    max-width: 900px;
    margin: 0 auto;
}

.sidebar {
    border-right: 2px solid var(--border-color);
    padding-right: 2rem;
}

.sidebar-title {
    color: var(--accent-color);
    font-size: 1rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sidebar-divider {
    border: none;
    border-top: 1px dashed var(--border-color);
    margin: 2rem 0;
}

.categories-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    color: var(--text-color);
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: 0.5rem;
    transition: 0.2s;
    font-size: 0.9rem;
}

.category-item:hover {
    border-left-color: var(--accent-color);
    color: var(--accent-color);
}

.category-name {
    flex: 1;
}

.category-count {
    color: var(--border-color);
    font-size: 0.85rem;
}

.utilities {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.utility-item {
    padding: 0.5rem 0;
    color: var(--text-color);
    border-left: 2px solid transparent;
    padding-left: 0.5rem;
    transition: 0.2s;
    text-decoration: none;
    font-size: 0.9rem;
}

.utility-item:hover {
    border-left-color: var(--accent-color);
    color: var(--accent-color);
}

.main-content {
    min-height: 100vh;
}

.content-header {
    color: var(--accent-color);
    font-size: 1.3rem;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

@media (max-width: 768px) {
    .home-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .sidebar {
        border-right: none;
        border-bottom: 2px solid var(--border-color);
        padding-right: 0;
        padding-bottom: 2rem;
    }
}
</style>
{% endblock %}