@extends('app.admin.layout.layout')
@section('title',__('All roles'))
@section('content')
    <style>
        .form-control{
            border-radius: 10px;
            border: 1px solid #7b7bff;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;        }
        .form-label{
            font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
        }
        .card{
            margin: 20px;
            border-radius: 15px;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        }
    </style>
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center" style="background-color: #ff2a0e !important">
            <h5 class="m-0" style="color: white">@lang('All roles')</h5>
            <a class="btn btn-secondary" href="{{route('admin:roles.create')}}">@lang('Add role')</a>
        </div>
        <div class="widget-content br-8">
            <table class="table table-striped dt-table-hover">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>@lang('Title')</th>
                    <th>@lang('Permissions')</th>
                    @canany(['edit role','destroy role'])
                        <th class="text-center">@lang('Options')</th>
                    @endcanany
                </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection
@canany(['edit role','destroy role'])
    <x-admin.datatable.server-side
    columns="[
    {data:'id'},
    { data:'name'},
    { data:'permissions'},
    {data:'options',sortable:false}]"
    :url="route('admin:roles.ajax')"/>
@else
    <x-admin.datatable.server-side
    columns="[
    {data:'id'},
    { data:'name'},
    { data:'permissions'}]"
    :url="route('admin:roles.ajax')"/>
@endcanany
