{% extends "base.html" %}
{% block content %}
<div class="container-fluid" style="max-width: 1400px;">
    <!-- Hero Photo -->
    <div class="position-relative mb-4">
        <img src="https://via.placeholder.com/1400x400/4a7c59/ffffff?text=Recipe+Photo" 
             class="w-100" style="height: 400px; object-fit: cover;">
        <div class="position-absolute bottom-0 start-0 w-100 p-5" 
             style="background: linear-gradient(transparent, rgba(0,0,0,0.7));">
            <h1 class="text-white display-4 fw-bold">Spicy Parmesan Chicken Pasta</h1>
            <p class="text-white-50">A delicious weeknight dinner ready in 45 minutes</p>
        </div>
    </div>
    
    <!-- Stats Bar -->
    <div class="row mb-4 g-3 text-center">
        <div class="col"><i class="far fa-clock text-success"></i> 30m prep</div>
        <div class="col"><i class="fas fa-fire text-success"></i> 15m cook</div>
        <div class="col"><i class="fas fa-utensils text-success"></i> 4 servings</div>
        <div class="col"><i class="fas fa-globe text-success"></i> Italian</div>
    </div>
    
    <!-- Two Column Layout -->
    <div class="row g-4">
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm sticky-top" style="top: 20px;">
                <div class="card-body">
                    <h4 class="fw-bold mb-4">Ingredients</h4>
                    <ul class="list-unstyled">
                        <li class="mb-2"><strong>1 can</strong> (8 oz) Tomato <small class="text-muted d-block ms-4 fst-italic">chopped, canned</small></li>
                        <li class="mb-2"><strong>12 c</strong> Bone Broth</li>
                        <li class="mb-2"><strong>5 tbsp</strong> Black Beans</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-5">
                    <h4 class="fw-bold mb-4">Instructions</h4>
                    <ol class="instructions-list">
                        <li class="mb-3">In a medium bowl, combine olive oil, Parmesan cheese, garlic, and seasonings.</li>
                        <li class="mb-3">Cook pasta according to package directions. Reserve 1 cup pasta water before draining.</li>
                        <li class="mb-3">Heat large skillet over medium-high heat. Add chicken and cook until golden brown.</li>
                        <li class="mb-3">Toss pasta with sauce, adding pasta water as needed for consistency.</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}