{% extends "base.html" %}

{% block content %}
<div class="recipe-detail">
    <h1>{{ recipe.title }}</h1>
    
    <div class="recipe-content">
        <div class="recipe-section">
            <h2>Ingredients</h2>
            {% for ingredient in recipe.ingredients.split('\n') %}
                <div class="ingredient-item">{{ ingredient }}</div>
            {% endfor %}
        </div>

        <div class="recipe-section">
            <h2>Instructions</h2>
            {% for step in recipe.instructions.split('\n') %}
                <div class="instruction-item">{{ step }}</div>
            {% endfor %}
        </div>
    </div>
</div>

<a href="{{ url_for('index') }}" class="btn btn-primary back-button">Back to Recipes</a>
{% endblock %}