{% extends "base.html" %}
{% block content %}
<div class="container py-4" style="max-width: 900px;">
    <!-- Title Card -->
    <div class="card border-0 shadow-sm mb-3">
        <div class="card-body text-center p-4">
            <h1 class="fw-bold mb-2">Spicy Parmesan Chicken Pasta</h1>
            <p class="text-muted mb-0">A delicious weeknight dinner</p>
        </div>
    </div>
    
    <!-- Photo Card -->
    <div class="card border-0 shadow-sm mb-3">
        <img src="https://via.placeholder.com/900x400/4a7c59/ffffff?text=Recipe+Photo" class="card-img">
    </div>
    
    <!-- Info Cards Row -->
    <div class="row g-2 mb-3">
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm text-center">
                <div class="card-body py-3">
                    <i class="far fa-clock fa-2x text-success mb-2"></i>
                    <h6 class="mb-0">30 min</h6>
                    <small class="text-muted">Prep</small>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm text-center">
                <div class="card-body py-3">
                    <i class="fas fa-fire fa-2x text-success mb-2"></i>
                    <h6 class="mb-0">15 min</h6>
                    <small class="text-muted">Cook</small>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm text-center">
                <div class="card-body py-3">
                    <i class="fas fa-utensils fa-2x text-success mb-2"></i>
                    <h6 class="mb-0">4</h6>
                    <small class="text-muted">Servings</small>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm text-center">
                <div class="card-body py-3">
                    <i class="fas fa-globe fa-2x text-success mb-2"></i>
                    <h6 class="mb-0" style="font-size: 0.8rem;">Italian</h6>
                    <small class="text-muted">Cuisine</small>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Ingredients Card -->
    <div class="card border-0 shadow-sm mb-3">
        <div class="card-header bg-success text-white">
            <h5 class="mb-0"><i class="fas fa-list me-2"></i>Ingredients</h5>
        </div>
        <div class="card-body">
            <ul class="list-unstyled mb-0">
                <li class="mb-2 pb-2 border-bottom"><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 pb-2 border-bottom"><strong>12 c</strong> Bone Broth</li>
                <li class="mb-2 pb-2"><strong>5 tbsp</strong> Black Beans</li>
            </ul>
        </div>
    </div>
    
    <!-- Instructions Card -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-success text-white">
            <h5 class="mb-0"><i class="fas fa-clipboard-list me-2"></i>Instructions</h5>
        </div>
        <div class="card-body">
            <ol class="mb-0">
                <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>
{% endblock %}