@extends('backend.settings.http-status-templates.layout')

@section('http-status-templates-content')


    @if ($errors->any())
        <div class="alert alert-danger">
            @foreach ($errors->all() as $error)
                <p class="mb-0">{{ $error }}</p>
            @endforeach
        </div>
    @endif


    <div class="mb-3 text-end">
        @can(\App\Models\Permission::PERM_HTTP_STATUS_PAGE_SETTING_CREATE)
            <a href="{{ route('app.settings.http-status-templates.create') }}" class="btn-shadow btn btn-info">
                    <span class="btn-icon-wrapper pr-2 opacity-7">
                        <i class="fas fa-plus-circle fa-w-20"></i>
                    </span>
                {{ __('Create HTTP Status Template') }}
            </a>
        @endcan
    </div>


    <div class="main-card card pb-2">

        <div class="table-responsive">
            <table id="datatable" class="align-middle mb-0 table table-borderless table-striped table-hover left-sort-icon">
                <thead>
                    <tr>
                        <th>Code</th>
                        <th>Title</th>
                        <th>Header</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                @foreach($templates as $key => $template)
                    <tr class="cursor-pointer" onclick="document.location.href='{{ route('app.settings.http-status-templates.edit',$template->id) }}'">
                        <td>{{ $template->code }}</td>
                        <td>{{ $template->title }}</td>
                        <td>{{ pure_text($template->header) }}</td>
                        <td class="text-end">
                            <i class="fas fa-ellipsis-v dropdown-toggle me-3"
                               id="page-dropdown-{{ $template->id }}"
                               data-bs-toggle="dropdown"
                               aria-expanded="false" onclick="event.stopPropagation()">
                            </i>
                            <ul class="dropdown-menu" aria-labelledby="page-dropdown-{{ $template->id }}">

                                @can(\App\Models\Permission::PERM_HTTP_STATUS_PAGE_SETTING_UPDATE)
                                    <li>
                                        <a class="dropdown-item" href="{{ route('app.settings.http-status-templates.edit',$template->id) }}">
                                            <span>Edit</span>
                                        </a>
                                    </li>
                                @endcan

                                @can(\App\Models\Permission::PERM_HTTP_STATUS_PAGE_SETTING_DELETE)
                                    <li>
                                        <button class="dropdown-item" type="button"
                                                onclick="AppHelper.deleteData({{ $template->id }})">
                                            <span>Delete</span>
                                        </button>
                                        <form id="delete-form-{{ $template->id }}"
                                              action="{{ route('app.settings.http-status-templates.destroy',$template->id) }}" method="POST"
                                              style="display: none;">
                                            @csrf()
                                            @method('DELETE')
                                        </form>
                                    </li>
                                @endcan
                                    <li>
                                        <a class="dropdown-item" target="_blank" href="{{ route('app.settings.http-status-templates.show', $template->id) }}">
                                            <span>Demo</span>
                                        </a>
                                    </li>
                            </ul>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection