@extends('layouts.app')
@section('title','Toutes les recettes')
@section('side_bar')
@include('layouts.admin.side_bar_dashboard')
@endsection
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h4>@yield('title')</h4>
        </div>
        <div class="col-md-6 d-flex justify-content-end">
            <a href="{{route('recipes.create')}}" class="btn btn-primary">Ajouter une recette</a>
        </div>
    </div>

    <div class="card p-3 d-none d-md-block">
        <div class="row align-items-center">
            <div class="col-3 ">
                <p class="exerge"> # </p>
            </div>
            <div class="col-6 col-xl-7">
                <p class="exerge"> Nom </p>
            </div>
            <div class="col-3 col-xl-2">
                <p class="text-center"> Action</p>
            </div>
        </div>
    </div>

    @foreach($recipes as $recipe)
    <div class="card p-3 pe-0 mb-4 shadow">
        <div class="row align-items-center">
            <div class="col-3">
                <p class="exerge">{{ $recipe->id }}</p>
            </div>
            <div class="col-9 col-md-6 col-xl-7 ">
                <p class="exerge"> {{ $recipe->title }}</p>
            </div>
            <div class="col-12 col-md-3 col-xl-2 d-flex">

                <a href="{{route('recipes.edit', $recipe)}}" class="btn btn-secondary me-2"><i class="bi bi-plus-square"></i></a>
                <form action="{{route('recipes.destroy', $recipe)}}" method="post">
                    @csrf
                    @method('DELETE')
                    <button class="btn btn-danger"><i class="bi bi-trash3"></i></button>
                </form>
            </div>
        </div>
    </div>
    @endforeach


    @include('layouts.paginator', ['paginator' => $recipes])

@endsection