@extends('layouts.app_layout')

@section('content')
@if (session('message'))
<h6 class="alert alert-success d-block">
    {{ session('message') }}
</h6>

{{-- <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
            <div class="toast" style="position: absolute; top: 0; right: 0;">
              <div class="toast-header">
                <img src="..." class="rounded mr-2" alt="...">
                <strong class="mr-auto">Bootstrap</strong>
                <small>11 mins ago</small>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="toast-body">
                Hello, world! This is a toast message.
              </div>
            </div>
          </div> --}}

@endif

<div class="px-3">

    <div class="row align-items-center">
        <div class="col-sm-6">
            <h5 class="page-title-text d-inline-block">@yield('list-title')</h5>
            {{-- <div class="breadcrumbs d-inline-block">
                <ul>
                    <li><a class="text-decoration-none" href="{{ route('dashboardIndex') }}">{{__('common.home')}}</a></li>
                    @yield('list-navigation')
                </ul>
            </div> --}}
        </div>
        <div class="col-sm-6 text-right">
            <div class=" text-end mb-3">
                @yield('list-new-button')
            </div>
        </div>
    </div>
    <div class="row align-items-center">
        <div class="col-sm-12">
            <div class="breadcrumbs d-inline-block">
                <ul>
                    <li><a class="text-decoration-none" href="{{ route('dashboardIndex') }}">{{__('common.home')}}</a></li>
                    @yield('list-navigation')
                </ul>
            </div>
        </div>
    </div>

    <div class=" rounded shadow p-4">

        <div class="table-responsive">
            <table id="exampleTable" class="table  table-middle  table-borderless mt-3 cards" style="width:100%">
                <thead>
                    <tr>
                        @yield('list-table-header')
                    </tr>
                </thead>
                <tbody class="py-5 px-2">
                    @yield('list-table-body')

                </tbody>
                {{-- <tfoot>
                    <tr>
                        @yield('list-table-header')
                    </tr>
                </tfoot> --}}
            </table>
            @yield('list-table-inside-pagination')
        </div>
    </div>

</div>

@yield('list-pagination')
@endsection