@extends('layouts.layoutDashboard')

@section('title')
    Liste des utilisateurs
@stop

@section('stylesheets')
@stop


@section('javascripts')
@stop


@section('content')


<div class="ltr:flex flex-1 rtl:flex-row-reverse">
    <div class="page-wrapper relative ltr:ms-auto rtl:me-auto rtl:ms-0 w-[calc(100%-260px)] px-4 pt-[64px] duration-300">
        <div class="xl:w-full">
            <div class="flex flex-wrap">

                @if( session()->has('success') )
                    <div  class="flex p-3 mb-4 bg-green-100 rounded-lg dark:bg-red-200" role="alert">
                        <i class="fas fa-triangle-exclamation flex-shrink-0 text-red-700 self-center"></i>
                        <div class="ml-3 text-sm font-medium text-red-700 dark:text-red-800">
                          {{ session()->get('success') }}
                        </div>
                        <button type="button" class="justify-center items-center ml-auto -mx-1.5 -my-1.5 bg-red-100 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300 alert-hidden">

                          <i class="icofont-close"></i>
                        </button>
                    </div>

                @endif

                <div class="flex items-center py-4 w-full">
                    <div class="w-full">
                        <div class="">
                            <div class="flex flex-wrap justify-between">
                                <div class="items-center ">
                                    <h1 class="font-medium text-3xl block dark:text-slate-100">Comptes utilisateurs</h1>
                                    <ol class="list-reset flex text-sm">

                                        <li class="text-gray-500 dark:text-slate-400">Administration</li>
                                        <li><span class="text-gray-500 dark:text-slate-400 mx-2">/</span></li>
                                        <li class="text-primary-500 hover:text-primary-600 dark:text-primary-400">Utilisateurs</li>
                                    </ol>
                                </div>
                                <div class="flex items-center">
                                    <div class="today-date leading-5 mt-2 lg:mt-0 form-input w-auto rounded-md border inline-block border-primary-500/60 dark:border-primary-500/60 text-primary-500 bg-transparent px-3 py-1 focus:outline-none focus:ring-0 placeholder:text-slate-400/70 placeholder:font-normal placeholder:text-sm hover:border-primary-400 focus:border-primary-500 dark:focus:border-primary-500  dark:hover:border-slate-700">
                                        <input type="text" class="dash_date border-0 focus:border-0 focus:outline-none" readonly  required="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--end container-->

        @livewire('all-users')


    </div>
</div>
@stop