{% extends "base.html" %}

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

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

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

.ingredients-list, .steps-list {
    list-style: none;
    padding: 0;
}

.ingredients-list li, .steps-list li {
    padding: 8px 0;
    border-bottom: 1px dotted var(--gold);
    position: relative;
    padding-left: 25px;
}

.ingredients-list li:before {
    content: "🥄";
    position: absolute;
    left: 0;
}

.steps-list li:before {
    content: counter(step-counter);
    counter-increment: step-counter;
    position: absolute;
    left: 0;
    background-color: var(--harvard-red);
    color: var(--light-beige);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.steps-list {
    counter-reset: step-counter;
}

.recipe-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.recipe-table th {
    background-color: var(--harvard-red);
    color: var(--light-beige);
    padding: 15px 10px;
    text-align: center;
    font-weight: 600;
}

.recipe-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #ddd;
    text-align: center;
}

.recipe-table tr:nth-child(even) {
    background-color: rgba(245, 245, 220, 0.3);
}

.recipe-table tr:hover {
    background-color: rgba(218, 165, 32, 0.1);
}

.recipe-inspiration {
    background-color: rgba(137, 120, 78, 0.1);
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
    text-align: center;
}

.recipe-inspiration a {
    font-weight: 600;
    color: var(--crimson);
}

.recipe-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin: 25px 0;
}

.recipe-meta-item {
    text-align: center;
    padding: 15px;
    background-color: rgba(218, 165, 32, 0.1);
    border-radius: 8px;
    border: 1px solid var(--gold);
}

.recipe-meta-item strong {
    display: block;
    color: var(--harvard-red);
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.recipe-meta-item span {
    color: var(--crimson);
    font-weight: 600;
}

.recipe-emojis {
    text-align: center;
    font-size: 1.2rem;
    margin: 10px 0;
}

@media (max-width: 600px) {
    .recipe-table {
        font-size: 0.9rem;
    }
    
    .recipe-table th, .recipe-table td {
        padding: 8px 5px;
    }
    
    .recipe-meta {
        grid-template-columns: 1fr;
    }
}
{% endblock %}

{% block content %}
<article class="recipe-post">
    {% if post.id == 'receita' %}
    
    <div class="recipe-inspiration">
        <p><strong>Inspiração:</strong> 
        <a href="https://www.youtube.com/watch?v=wXE2xj8cnoo" target="_blank">Youtuber Amadeus Victor</a></p>
    </div>

    {% if post.recipe_info %}
    <div class="recipe-meta">
        {% if post.recipe_info.servings %}
        <div class="recipe-meta-item">
            <strong>Porção</strong>
            <span>{{ post.recipe_info.servings }}</span>
        </div>
        {% endif %}
        
        {% if post.recipe_info.prep_time %}
        <div class="recipe-meta-item">
            <strong>Preparo</strong>
            <span>{{ post.recipe_info.prep_time }}</span>
        </div>
        {% endif %}
        
        {% if post.recipe_info.calories_per_serving %}
        <div class="recipe-meta-item">
            <strong>Calorias</strong>
            <span>{{ post.recipe_info.calories_per_serving }}</span>
        </div>
        {% endif %}
        
        {% if post.recipe_info.cost_per_serving %}
        <div class="recipe-meta-item">
            <strong>Custo</strong>
            <span>{{ post.recipe_info.cost_per_serving }}</span>
        </div>
        {% endif %}
    </div>
    {% endif %}

    <div class="recipe-section">
        <h2><span class="recipe-emojis">🐠✨🐚</span> TO-DO / Mercado</h2>
        <ul class="ingredients-list">
            <li>Comprar 80g chocolate amargo</li>
            <li>Comprar PTS jasmine</li>
            <li>Comprar uma sainha de cupcake</li>
        </ul>
    </div>

    <div class="recipe-section">
        <h2><span class="recipe-emojis">🐠✨🐚</span> Cozinha</h2>
        <ol class="steps-list">
            <li>Cortar os 80g de chocolate</li>
            <li>Derreter no microondas ou em banho maria</li>
            <li>Pesar 64g de PTS</li>
            <li>Misturar bem os dois ingredientes</li>
            <li>Distribuir em pedaços de 30g, nas saias de cupcake</li>
        </ol>
    </div>

    <div class="recipe-section">
        <h2><span class="recipe-emojis">🐠✨🐚</span> MACROS</h2>
        <table class="recipe-table">
            <thead>
                <tr>
                    <th>Porção</th>
                    <th>Valor</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Peso (g)</td>
                    <td>30</td>
                </tr>
                <tr>
                    <td>Calorias</td>
                    <td>134</td>
                </tr>
                <tr>
                    <td>Proteínas</td>
                    <td>8</td>
                </tr>
                <tr>
                    <td>Preço de Custo</td>
                    <td>R$ 1,80</td>
                </tr>
                <tr>
                    <td>Preço de Venda</td>
                    <td>R$ 5,00</td>
                </tr>
            </tbody>
        </table>
    </div>

    {% else %}
    <!-- Conteúdo padrão para outras receitas -->
    {{ post.content_html | safe }}
    {% endif %}
</article>
{% endblock %}