@extends('layouts.app')
@section('title')
Liste des filières
@endsection

@section('head')
<style>
    button {
        position: absolute !important;
        right: 5px;
        bottom: 16px;
    }

    .toast {
        /* position: relative; */
        height: 6rem;
        min-width: 20rem;

    }

    .toast:hover {
        cursor: pointer;
        color: #2cabe3 !important;
    }


    .toast-body {
        padding: 1.4rem;
    }

    /*
    .toast-header:hover {
        color: #2cabe3;
    } */

    a {
        /* color: #2c75e3; */
    }

    .list {
        text-align: right;
        font-size: 1rem;
    }

    button {
        min-width: 6rem;
        right: 2rem;
        top: 1rem;
        height: 2rem;
    }

    .powered {
        color: white;
    }

    .powered:hover {
        color: white;
    }

    .card {
        border-radius: 8px;
    }
</style>
@endsection

@section('content-title')
{{-- Le titre du contenu qui a gauche en haut dans le content --}}
Filières
@endsection

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <br>
                    <a class="powered" href="{{route('faculty.create')}}">
                        <button type="button" class="btn btn-info btn-rounded m-t-10 mb-2" data-target="#add-contact"
                            style="color: #FFFF;">
                            Ajouter une nouvelle filière
                        </button>
                    </a>
                    <br>
                    @foreach ($filieres as $filiere)
                    <div class="d-flex justify-content-between ">
                        <a href="{{route('faculty.show', $filiere->id)}}">
                            <div class="toast" role="alert" data-autohide="false" aria-live="assertive"
                                aria-atomic="true">
                                <div class="toast-header">
                                    <strong class="mr-auto">{{$filiere->slug}} {{ $filiere->level }}</strong>
                                </div>
                                <div class="toast-body">
                                    {{$filiere->name}}
                                </div>
                            </div>
                        </a>
                    </div>
                    <br>
                    @endforeach
                    <br>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
{{-- Ajouter de nouveau script a votre page --}}
<script type="text/javascript">
    $('.toast').toast('show');
</script>
@endsection