{% extends "base.html" %}

{% block type_styles %}
.diary-post {
    max-width: 650px;
    margin: 0 auto;
}

.diary-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background-color: rgba(218, 165, 32, 0.1);
    border-radius: 12px;
    border: 2px solid var(--gold);
}

.diary-date {
    font-size: 1.4rem;
    color: var(--harvard-red);
    font-weight: 600;
    margin-bottom: 15px;
}

.diary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.diary-stat {
    text-align: center;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
}

.diary-stat strong {
    display: block;
    color: var(--crimson);
    font-size: 0.9rem;
}

.diary-stat span {
    color: var(--harvard-red);
    font-weight: 500;
}

.diary-section {
    margin: 25px 0;
    padding: 20px;
    background-color: rgba(245, 245, 220, 0.3);
    border-radius: 10px;
    border-left: 4px solid var(--gold);
}

.diary-section h2 {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    border-left: none;
    padding-left: 0;
}

.diary-section h2 .emoji {
    margin-right: 10px;
    font-size: 1.5rem;
}

.diary-timeline {
    list-style: none;
    padding: 0;
    position: relative;
}

.diary-timeline:before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--gold);
}

.diary-timeline li {
    position: relative;
    padding-left: 50px;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.diary-timeline li:before {
    content: '';
    position: absolute;
    left: 14px;
    top: 5px;
    width: 12px;
    height: 12px;
    background-color: var(--harvard-red);
    border-radius: 50%;
    border: 2px solid var(--light-beige);
}

.diary-time {
    font-weight: bold;
    color: var(--harvard-red);
    margin-right: 10px;
}

.diary-food-summary {
    background-color: rgba(137, 120, 78, 0.1);
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
    text-align: center;
}

.diary-food-summary strong {
    color: var(--crimson);
    font-size: 1.1rem;
}

.diary-reflection {
    background-color: rgba(218, 165, 32, 0.05);
    padding: 25px;
    border-radius: 12px;
    border: 2px solid var(--gold);
    margin: 30px 0;
    text-align: center;
    font-style: italic;
    font-size: 1.1rem;
}

.diary-victory, .diary-challenge {
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
}

.diary-victory {
    background-color: rgba(76, 175, 80, 0.1);
    border-left: 4px solid #4CAF50;
}

.diary-challenge {
    background-color: rgba(255, 152, 0, 0.1);
    border-left: 4px solid #FF9800;
}

@media (max-width: 600px) {
    .diary-stats {
        grid-template-columns: 1fr 1fr;
    }
    
    .diary-timeline {
        padding-left: 10px;
    }
    
    .diary-timeline li {
        padding-left: 35px;
    }
    
    .diary-timeline:before {
        left: 15px;
    }
    
    .diary-timeline li:before {
        left: 9px;
    }
}
{% endblock %}

{% block content %}
<article class="diary-post">
    {% if post.id.startswith('dietmay2025') and not 'template' in post.id %}
    
    <div class="diary-header">
        <div class="diary-date">📅 Dia 01 – 19 de Maio</div>
        
        {% if post.diary_data %}
        <div class="diary-stats">
            {% if post.diary_data.weight %}
            <div class="diary-stat">
                <strong>Peso</strong>
                <span>{{ post.diary_data.weight }}</span>
            </div>
            {% endif %}
            
            {% if post.diary_data.sleep_quality %}
            <div class="diary-stat">
                <strong>Sono</strong>
                <span>{{ post.diary_data.sleep_quality }}</span>
            </div>
            {% endif %}
            
            {% if post.diary_data.mood %}
            <div class="diary-stat">
                <strong>Humor</strong>
                <span>{{ post.diary_data.mood }}</span>
            </div>
            {% endif %}
        </div>
        {% endif %}
    </div>

    <div class="diary-section">
        <h2><span class="emoji">🤯</span> Acontecimentos do Dia</h2>
        <ul class="diary-timeline">
            <li><span class="diary-time">08h30:</span> Acordei</li>
            <li><span class="diary-time">09h30:</span> Café da manhã - 2 ovos fritos, 2 fatias de pão integral, requeijão, café com leite</li>
            <li><span class="diary-time">11h00:</span> Treino de academia - Membros superiores, 1h de cardio bem level</li>
            <li><span class="diary-time">13h30:</span> Supermercado - Melancia + red bull zero</li>
            <li><span class="diary-time">14h00:</span> Almoço - Redbull zero, marmita livup de purê de abóbora e carne moída, 300g de melancia, whey com creatina</li>
            <li><span class="diary-time">15h00:</span> Social - conversinha com Mariangela</li>
            <li><span class="diary-time">16h00:</span> Lanche - pipoca sem manteiga e chocrock 134 kcal</li>
            <li><span class="diary-time">19h00:</span> Jantar - 2 kibes fritos</li>
            <li><span class="diary-time">00h00:</span> Dormir</li>
        </ul>
    </div>

    <div class="diary-section">
        <h2><span class="emoji">🍽️</span> Alimentação</h2>
        
        {% if post.diary_data and post.diary_data.calories %}
        <div class="diary-food-summary">
            <strong>Total: {{ post.diary_data.calories }}</strong>
            {% if post.diary_data.target_calories %}
            (meta: {{ post.diary_data.target_calories }})
            {% endif %}
        </div>
        {% endif %}
        
        <ul>
            <li><strong>09h30:</strong> 2 ovos fritos, 2 fatias de pão integral, requeijão, café com leite</li>
            <li><strong>14h00:</strong> Redbull zero, marmita livup de purê de abóbora e carne moída, 300g de melancia, whey com creatina</li>
            <li><strong>16h00:</strong> Pipoca sem manteiga e chocrock 134 kcal</li>
            <li><strong>19h00:</strong> 2 kibes fritos</li>
        </ul>
    </div>

    <div class="diary-section">
        <h2><span class="emoji">🏋️‍♀️</span> Movimento</h2>
        <p>Treino de membros superiores - consegui progredir em quase todas as máquinas. Senti que o carboidrato a mais foi bem utilizado nesse treino.</p>
        
        <p><strong>Cardio:</strong> 1 hora total</p>
        <ul>
            <li>20 min de caminhada antes do treino</li>
            <li>15 min de escada nível 4</li>
            <li>25 min de caminhada depois</li>
        </ul>
        
        <p>Estou pensando em usar todas as máquinas de cardio da academia.</p>
    </div>

    <div class="diary-challenge">
        <h2><span class="emoji">🤯</span> Desafio do Dia</h2>
        <p>Comer com a Mariangela. Comemos tudo certinho até a hora da esfiha. Numa próxima, poderia encomendar algo gostoso para ela enquanto eu como minha marmita fit. Isso faz sentido em cutting, mas não como estilo de vida.</p>
        <p>O redbull muito tarde atrapalhou meu sono.</p>
    </div>

    <div class="diary-victory">
        <h2><span class="emoji">🎉</span> Vitória do Dia</h2>
        <p>Ter ido na academia mesmo estando menstruada e tendo dormido com cólica no dia anterior. A escolha de delivery não foi das piores.</p>
    </div>

    <div class="diary-reflection">
        <h2><span class="emoji">📓</span> Reflexão Final</h2>
        <p>Estou orgulhosa, foi um domingo preguiçoso, com amigas e bem legal!</p>
    </div>

    {% else %}
    <!-- Template ou outros tipos de diário -->
    {{ post.content_html | safe }}
    {% endif %}
</article>
{% endblock %}