{% extends "base.html" %}
{% block content %}
<div class="container py-5" style="max-width: 800px;">
    <!-- Title -->
    <div class="text-center mb-4">
        <h1 class="fw-bold mb-2">Spicy Parmesan Chicken Pasta</h1>
        <div class="text-muted">
            <span class="me-3"><i class="far fa-clock me-1"></i>45 min</span>
            <span class="me-3"><i class="fas fa-utensils me-1"></i>4 servings</span>
            <span><i class="fas fa-globe me-1"></i>Italian</span>
        </div>
    </div>
    
    <!-- Photo -->
    <img src="https://via.placeholder.com/800x400/4a7c59/ffffff?text=Recipe+Photo" 
         class="w-100 rounded mb-4 shadow-sm">
    
    <!-- Ingredients -->
    <div class="mb-5">
        <h4 class="fw-bold mb-3 pb-2 border-bottom">Ingredients</h4>
        <table class="table table-borderless">
            <tr><td class="fw-bold" style="width: 120px;">1 can (8 oz)</td><td>Tomato <span class="text-muted fst-italic">— chopped, canned</span></td></tr>
            <tr><td class="fw-bold">12 c</td><td>Bone Broth</td></tr>
            <tr><td class="fw-bold">5 tbsp</td><td>Black Beans</td></tr>
        </table>
    </div>
    
    <!-- Instructions -->
    <div>
        <h4 class="fw-bold mb-3 pb-2 border-bottom">Instructions</h4>
        <ol class="list-unstyled">
            <li class="mb-3">
                <span class="text-success fw-bold me-2">1.</span>
                In a medium bowl, combine olive oil, Parmesan cheese, garlic, and seasonings.
            </li>
            <li class="mb-3">
                <span class="text-success fw-bold me-2">2.</span>
                Cook pasta according to package directions. Reserve 1 cup pasta water before draining.
            </li>
            <li class="mb-3">
                <span class="text-success fw-bold me-2">3.</span>
                Heat large skillet over medium-high heat. Add chicken and cook until golden brown.
            </li>
        </ol>
    </div>
</div>
{% endblock %}