{% extends "base.html" %}
{% block content %}
<div class="container py-4" style="max-width: 1200px;">
    <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
        <!-- Header with Photo Background -->
        <div class="position-relative" style="height: 300px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
            <div class="position-absolute bottom-0 start-0 w-100 p-4 text-white">
                <h1 class="display-5 fw-bold mb-2">Spicy Parmesan Chicken Pasta</h1>
                <p class="mb-0 opacity-75">Italian • 45 minutes • 4 servings</p>
            </div>
        </div>
        
        <!-- Quick Stats -->
        <div class="bg-white border-bottom">
            <div class="row g-0 text-center">
                <div class="col-3 py-3 border-end">
                    <div class="text-success mb-1"><i class="far fa-clock"></i></div>
                    <div class="fw-bold">30m</div>
                    <small class="text-muted">Prep</small>
                </div>
                <div class="col-3 py-3 border-end">
                    <div class="text-danger mb-1"><i class="fas fa-fire"></i></div>
                    <div class="fw-bold">15m</div>
                    <small class="text-muted">Cook</small>
                </div>
                <div class="col-3 py-3 border-end">
                    <div class="text-primary mb-1"><i class="fas fa-utensils"></i></div>
                    <div class="fw-bold">4</div>
                    <small class="text-muted">Servings</small>
                </div>
                <div class="col-3 py-3">
                    <div class="text-warning mb-1"><i class="fas fa-star"></i></div>
                    <div class="fw-bold">4.5</div>
                    <small class="text-muted">Rating</small>
                </div>
            </div>
        </div>
        
        <!-- Content -->
        <div class="row g-0">
            <div class="col-lg-4 bg-light p-4">
                <h5 class="fw-bold mb-3 text-success">
                    <i class="fas fa-shopping-basket me-2"></i>Ingredients
                </h5>
                <div class="list-group list-group-flush">
                    <div class="list-group-item bg-transparent border-0 px-0 py-2">
                        <div class="d-flex align-items-center">
                            <span class="badge bg-success me-2">1</span>
                            <strong class="me-2">1 can</strong>
                            <span>Tomato</span>
                        </div>
                        <small class="text-muted ms-4 ps-2">8 oz • chopped, canned</small>
                    </div>
                    <div class="list-group-item bg-transparent border-0 px-0 py-2">
                        <div class="d-flex align-items-center">
                            <span class="badge bg-success me-2">2</span>
                            <strong class="me-2">12 c</strong>
                            <span>Bone Broth</span>
                        </div>
                    </div>
                    <div class="list-group-item bg-transparent border-0 px-0 py-2">
                        <div class="d-flex align-items-center">
                            <span class="badge bg-success me-2">3</span>
                            <strong class="me-2">5 tbsp</strong>
                            <span>Black Beans</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-8 p-4 bg-white">
                <h5 class="fw-bold mb-3 text-success">
                    <i class="fas fa-list-ol me-2"></i>Instructions
                </h5>
                <div class="steps">
                    <div class="d-flex mb-3">
                        <span class="badge bg-success rounded-circle me-3" style="width: 32px; height: 32px; line-height: 32px;">1</span>
                        <p class="mb-0">In a medium bowl, combine olive oil, Parmesan cheese, garlic, and seasonings.</p>
                    </div>
                    <div class="d-flex mb-3">
                        <span class="badge bg-success rounded-circle me-3" style="width: 32px; height: 32px; line-height: 32px;">2</span>
                        <p class="mb-0">Cook pasta according to package directions. Reserve 1 cup pasta water.</p>
                    </div>
                    <div class="d-flex mb-3">
                        <span class="badge bg-success rounded-circle me-3" style="width: 32px; height: 32px; line-height: 32px;">3</span>
                        <p class="mb-0">Heat large skillet over medium-high heat. Cook chicken until golden.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}