@extends('layouts.LayoutMaster')

@section('content')

<div class="container">
    <div class="card">

        <div class="card-header d-flex justify-content-between">
            <p class="lead m-0">{{modelName}} List</p>
            <a href="{{route('{{modelRoute}}.create')}}" class="btn btn-primary waves-effect waves-light">Create</a>
        </div>

        <div class="card-body">

        <div class="table-responsive text-nowrap">
          <table class="table table-bordered">

            <thead>
              <tr>
              <x-table.header :headers="{{tableHeader}}" />
                
              </tr>
            </thead>

            <tbody>

                @forelse (${{modelNamePluralLowerCase}} as ${{modelNameLowerCase}})
                    <tr>
                      <td>{{${{modelNameLowerCase}}->id}}</td>

                      {{rowsForIndex}}
                      
                        <x-list-button-perm permName="{{modelNameLowerCase}}" routeDestroy="{{route('{{modelRoute}}.destroy', ${{modelNameLowerCase}}->id ) }}"
                           routeEdit="{{route('{{modelRoute}}.edit', ${{modelNameLowerCase}}->id) }}">
                        </x-list-button-perm>
                    </tr>

                @empty
                    <td>No record</td>
                @endforelse

            </tbody>
          </table>

        </div>
        </div>
    </div>
</div>

@endsection