@php use App\Models\CodatVvt; @endphp
<div class="container mx-auto p-4">
    <script>
        function select_all()
        {
            var master_checkbox = document.getElementById('master_checkbox');
            var bool =  master_checkbox.checked;
            var checkboxes = document.querySelectorAll('input[type="checkbox"]');
            checkboxes.forEach(function(checkbox) {
                if(checkbox !== master_checkbox){
                    checkbox.checked = !bool;
                    checkbox.click();
                }
            });
        }
    </script>
    <!-- Zurück Button -->
    <div class="flex justify-between items-center mb-6">
        <button type="button" class="text-[rgb(241,131,0)] z-10">
            <a href="{{config('constants.WEBPORTAL_URL')."/?p=dashboard&mid=1"."&fid=".session()->get('fid')}}" wire:v-v-t>
                &lt;zurück
            </a>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span class="text-[rgb(13,59,123)] cursor-default">Verzeichnis von Verarbeitungstätigkeiten (Verantwortlicher)</span>
        </button>
    </div>

    <div class="mt-12">
        <!-- Erste Reihe mit Dropdown, Ausführen und Buttons -->
        <div class="flex items-center w-full space-x-2 ">
            <div class="flex-shrink relative z-40">
                <select id="selection" wire:model="selectedMultifunktion" name="selection" class="block h-[36px] w-full rounded-md border-0 py-1.5 pl-3 pr-10 mr-3 text-gray-900 ring-1 ring-inset ring-[rgb(13,59,123)] focus:ring-2 focus:ring-[rgb(241,131,0)] sm:text-sm sm:leading-6">
                    <option value="" selected>Aktion für ausgewählte Einträge ...</option>
                    @foreach($options as $val => $option)
                        <option value="{{$val}}" wire:click.throttle="multifunktion">{{ __('general.'.$option)}}</option>
                    @endforeach
                </select>
            </div>

            {{--
                <button type="button" wire:click.throttle="multifunktion" class="inline-flex items-center gap-x-1.5 rounded-md bg-[rgb(241,131,0)] px-5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-600">
                    {{ __('general.Execute') }}
                </button>--}}

            <div class="flex-1 justify-end">
                <div class="relative flex items-center">
                    <input wire:model.live.debounce.500ms="searchTerm" type="text" name="search" id="search"
                           class="block w-full rounded-md border-0 py-1.5 pl-4 pr-14
                          text-gray-900 shadow-sm ring-1 ring-inset ring-[rgb(13,59,123)]
                          placeholder:text-[rgb(241,131,0)] focus:ring-2 focus:ring-[rgb(241,131,0)]
                          focus:border-[rgb(241,131,0)] focus:outline-none sm:text-sm sm:leading-6">
                    <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
                        <button>
                            <img src="{{ asset('images/icons/CO-DatMenue/magnifying-glass.png') }}" alt="View Icon" class="w-4 h-4 mr-4" />
                        </button>
                    </div>
                </div>
            </div>

            <div class="flex justify-end items-center space-x-2">

                {{-- Button zum Wechseln AV --}}
                <a href="{{ route('vvt-av', ['fid'=>session('fid'), 'mid'=>session('mid')]) }}"
                   class="flex items-center justify-center rounded-md bg-[rgb(241,131,0)] px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-400 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-blue-600">
                    <img src="{{ asset('images/icons/CO-DatMenue/right-left-solid.svg') }}"
                         title="Wechseln zu Auftragsverarbeiter"
                         alt="change to AV"
                         class="w-5 h-5 filter invert brightness-200"/>
                </a>
                {{-- Neue Verarbeitung erstellen (Add) --}}
                @can('create', \App\Models\CodatVvt::class)
                    <button wire:click="showNewProcessingPopup" type="button" class="flex items-center justify-center rounded-md bg-[rgb(241,131,0)] px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-400 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-blue-600">
                        <img src="{{ asset('images/icons/CO-DatMenue/Plus.png') }}" alt="Add" class="w-5 h-5 invert brightness-0" title="Neue Verarbeitung"/>
                    </button>
                @endcan
                @cannot('create', \App\Models\CodatVvt::class)
                    <button type="button" class="flex items-center justify-center grayscale rounded-md bg-[rgb(241,131,0)] px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-400 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-blue-600">
                        <img src="{{ asset('images/icons/CO-DatMenue/Plus.png') }}" alt="Add" class="w-5 h-5 invert brightness-0" title="Neue Verarbeitung"/>
                    </button>
                @endcannot

                {{-- Export --}}
                <a target="_blank" href="{{ route('vvt-vw-excel-export', ['fid'=>session('fid'), 'mid'=>session('mid')]) }}" class="flex items-center justify-center rounded-md bg-[rgb(241,131,0)] px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-400 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-blue-600">
                    <img src="{{ asset('images/icons/CO-DatMenue/maximize-size-option.png') }}" alt="Export" class="w-5 h-5 invert brightness-0" title="XLS-Export Liste"/>
                </a>

                {{-- Button zum Wechseln Matrix Untermandant --}}
                @if($this->showHauptmandantButton)
                    <a href="{{ route('vvt-matrix', ['fid'=>session('fid'), 'mid'=>session('mid')]) }}"
                       class="flex items-center justify-center rounded-md bg-[rgb(241,131,0)] px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-400 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-blue-600">
                        <img src="{{ asset('images/icons/icon_report.png') }}"
                             title="Report Untermandanten"
                             alt="Report Untermandanten"
                             class="w-5 h-5 filter invert brightness-200"/>
                    </a>
                @endif

                {{-- Adressbuch --}}
                <button type="button" wire:click="$dispatch('openPopup')" class="flex items-center justify-center rounded-md bg-[rgb(241,131,0)] px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-400 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-orange-600">
                    <img src="{{ asset('images/icons/CO-DatMenue/man-user.png') }}" alt="Adressbuch" class="w-5 h-5 invert" title="Adressen & Personen"/>
                </button>
                <div class="absolute w-0 h-0 overflow-hidden">
                    @livewire('address-book.address-book')
                </div>

                {{-- Papierkorb --}}
                @can('delete', new CodatVvt())
                    <a href="{{ route('vvt/bin', ['fid'=>session()->get('fid'), 'mid'=>session()->get('mid')]) }}" class="flex items-center justify-center rounded-md bg-[rgb(241,131,0)] px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-400 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-blue-600">
                        <img src="{{ asset('images/icons/CO-DatMenue/recycle-bin.png') }}" alt="Recycle Bin" class="w-5 h-5 invert" title="Gelöschte Verarbeitungen Anzeigen"/>
                    </a>
                @endcan

                {{-- Pop-up für neue Verarbeitung --}}
                @if($showNewProcessPopup)
                    <div class="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50">
                        <div class="bg-white rounded-lg shadow-lg p-6 max-w-m w-1/2 relative">
                            <button wire:click="closeNewProcessPopup" class="absolute top-4 right-4 text-gray-600 hover:text-gray-800">
                                <img src="{{ asset('images/icons/delete.png') }}" alt="Close" class="w-5 h-5" />
                            </button>

                            <div class="flex justify-between mt-6 mb-4 space-x-4">
                                {{-- Neues Dokument --}}
                                <div class="flex flex-col items-center flex-1 bg-gray-100 p-4 rounded-lg">
                                    <img src="{{ asset('images/icons/document-empty.png') }}" alt="New" class="w-16 h-16 mb-2" />
                                    <p class="text-center text-gray-600 text-sm mb-2">{{ __('general.NEW') }}</p>
                                    <p class="text-center text-gray-600 text-sm mb-4">{{ __('general.Create a process from scratch.') }}</p>
                                    <button wire:click="createNewVvt" class="bg-[rgb(241,131,0)] text-white rounded-md py-3 px-5 mt-auto hover:bg-orange-400 w-full">
                                        {{ __('general.New process') }}
                                    </button>
                                </div>

                                {{-- Vorlage --}}
                                <div class="flex flex-col items-center flex-1 bg-gray-100 p-4 rounded-lg">
                                    <img src="{{ asset('images/icons/document-file-with-line.png') }}" alt="Template" class="w-16 h-16 mb-2" />
                                    <p class="text-center text-gray-600 text-sm mb-2">{{ __('general.TEMPLATE') }}</p>
                                    <p class="text-center text-gray-600 text-sm mb-4">{{ __('general.Create a process according to one of your templates.') }}</p>
                                    <button class="grayscale bg-[rgb(241,131,0)] text-white rounded-md py-3 px-5 mt-auto hover:bg-orange-400 w-full">
                                        {{ __('general.Select template') }}
                                    </button>
                                </div>

                                {{-- Duplikat --}}
                                <div class="flex flex-col items-center flex-1 bg-gray-100 p-4 rounded-lg">
                                    <img src="{{ asset('images/icons/documents-empty.png') }}" alt="Duplicate" class="w-16 h-16 mb-2" />
                                    <p class="text-center text-gray-600 text-sm mb-2">{{ __('general.DUPLICATE') }}</p>
                                    <p class="text-center text-gray-600 text-sm mb-4">{{ __('general.Copy an already created process as a basis.') }}</p>
                                    <button class="grayscale bg-[rgb(241,131,0)] text-white rounded-md py-3 px-5 mt-auto hover:bg-orange-400 w-full">
                                        {{ __('general.Select template') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>

            <!-- Zweite Reihe mit der Tabelle -->
            <div class="container mx-auto w-full p-4">

                <div class="mt-6">
                    <!-- Zweite Reihe mit der Tabelle -->
                    <div class="container mx-auto mt-2">
                        <table class="min-w-full table-auto bg-white">
                            <thead>
                            <tr class="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
                                <!-- Checkbox Column -->
                                <th class="py-3 px-6 text-left">
                                    <input id="master_checkbox" type="checkbox" onclick="select_all()" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600 cursor-pointer">
                                </th>

                                <!-- Sortierbarer Status -->
                                <th class="py-3 px-6 text-left">
                                    <div class="inline-flex items-center space-x-1 whitespace-nowrap">
                                        {{ __('general.Status') }}
                                        <button wire:click="sortBy('ds_kuerzel')">
                                            <img src="{{ asset('images/icons/CO-DatMenue/arrow-down-sign-to-navigate.png') }}" alt="Sort Icon" class="ml-2 w-3 h-3" />
                                        </button>
                                    </div>
                                </th>

                                <!-- Sortierbarer % -->
                                <th class="py-3 px-6 text-left">
                                    <div class="inline-flex items-center space-x-1 whitespace-nowrap">
                                    %
                                        <button wire:click="sortBy('fortschritt')" class="">
                                            <img src="{{ asset('images/icons/CO-DatMenue/arrow-down-sign-to-navigate.png') }}" alt="Sort Icon" class="ml-2 w-3 h-3" />
                                        </button>
                                    </div>
                                </th>

                                <!-- Modus -->
                                <th class="py-3 px-6 text-left">
                                    <div class="flex items-center space-x-1 flex-wrap min-w-0">
                                    Modus
                                    </div>
                                </th>

                                <!-- Sortierbarer Prozess -->
                                <th class="py-3 px-6 text-left">
                                    <div class="inline-flex items-center space-x-1 whitespace-nowrap">
                                    {{ __('general.Process') }}
                                        <button wire:click="sortBy('vvkateg')" class="">
                                            <img src="{{ asset('images/icons/CO-DatMenue/arrow-down-sign-to-navigate.png') }}" alt="Sort Icon" class="ml-2 w-3 h-3" />
                                        </button>
                                    </div>
                                </th>

                                <!-- Sortierbarer Version -->
                                <th class="py-3 px-6 text-left">
                                    <div class="inline-flex items-center space-x-1 whitespace-nowrap">
                                    {{ __('general.Version') }}
                                        <button wire:click="sortBy('vvt_revnr')" class="">
                                            <img src="{{ asset('images/icons/CO-DatMenue/arrow-down-sign-to-navigate.png') }}" alt="Sort Icon" class="ml-2 w-3 h-3 " />
                                        </button>
                                    </div>
                                </th>

                                <!-- Assigned person Column -->
                                <th class="py-3 px-6 text-left">
                                    <div class="inline-flex items-center space-x-1 whitespace-nowrap">
                                        {{ __('general.Assigned person') }}
                                        <button wire:click="sortBy('zugew_user_name')" class="">
                                            <img src="{{ asset('images/icons/CO-DatMenue/arrow-down-sign-to-navigate.png') }}" alt="Sort Icon" class="ml-2 w-3 h-3" />
                                        </button>
                                    </div>
                                </th>

                                <!-- Last edited Column -->
                                <th class="py-3 px-6 text-left">
                                    <div class="inline-flex items-center space-x-1 whitespace-nowrap">
                                        {{ __('general.Last edited') }}
                                        <button wire:click="sortBy('geaendert_ts')" class="ml-2">
                                            <img src="{{ asset('images/icons/CO-DatMenue/arrow-down-sign-to-navigate.png') }}" alt="Sort Icon" class="w-3 h-3 ml-2" />
                                        </button>
                                    </div>
                                </th>

                                <th class="py-3 px-6 text-center">{{ __('Aktionen') }}</th>
                            </tr>
                            </thead>

                            <tbody class="text-gray-600 text-sm font-light">


                            @foreach($this->statusList->items() as $status)
                                @can('view', [$status])
                                    <tr class="border-b border-gray-200 hover:bg-gray-100">
                                        <!-- Checkbox Column -->
                                        <td class="py-3 px-6 text-left">
                                            <input wire:key="{{Str::uuid()}}" type="checkbox" wire:model="selectedItems.{{$status->vvt_id}}" value="!selectedItems.{{$status->vvt_id}}" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600 cursor-pointer">
                                        </td>
                                        <!-- Status Column -->
                                        <td class="py-3 px-6 text-left">
                                            @php
                                                $iconPath = $statusIcon[$status->ds_kuerzel] ?? null;
                                            @endphp

                                            @if($iconPath)
                                                <div class="relative inline-block group">
                                                    <!-- Status Icon -->
                                                    <img src="{{ asset($iconPath) }}" alt="Status Icon" class="inline-block w-6 h-6 ml-3 cursor-pointer color-csy-blue" style="filter: invert(16%) sepia(69%) saturate(2022%) hue-rotate(197deg) brightness(100%) contrast(92%);">

                                                    <!-- Tooltip -->
                                                    <div class="absolute bottom-full left transform  w-max bg-gray-200 text-gray-800 border-2 border-solid border-gray-400 text-xs rounded p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                                        {{ $status->ds_name }}
                                                    </div>
                                                </div>
                                            @else
                                                <span class="text-gray-500">Kein Icon</span>
                                            @endif
                                        </td>

                                        <!-- % Column -->
                                        <td class="py-3 px-6 text-left">{{ $status->fortschritt }}%</td>
                                        <!-- Modus -->
                                        <td class="py-3 px-6 text-left group relative">
                                        <span>
                                            {{ $status->modus }}
                                        </span>
                                            <div class="absolute  mt-1 hidden group-hover:block bg-gray-400 text-white text-xs rounded px-2 py-1 whitespace-nowrap z-10">
                                                @if($status->modus === 'AV')
                                                    Auftragsverarbeiter
                                                @elseif($status->modus === 'VW')
                                                    Verantwortlicher
                                                @else
                                                    {{ $status->modus }}
                                                @endif
                                            </div>
                                        </td>

                                        <!-- Verarbeitung Column -->
                                        <td class="py-3 px-6 text-left group relative">
                                            <div class="flex relative"> <!-- relative hier hinzufügen -->
                                                @if($status->getConnectionName() == 'haupmandant_DB')
                                                    <div class="absolute bottom-full mb-1 hidden group-hover:block bg-gray-400 text-white text-xs rounded px-2 py-1 whitespace-nowrap z-10 left-0">
                                                        Von {{$this->hm_name_string}}
                                                    </div>
                                                    <img src="{{ asset('images/icons/CO-DatMenue/house.png') }}"
                                                         style="filter: invert(16%) sepia(69%) saturate(2022%) hue-rotate(197deg) brightness(100%) contrast(92%);"
                                                         alt="View Icon"
                                                         class="w-4 h-4 mr-2 mt-[3px]"
                                                         title="Anzeigen"/>
                                                @endif
                                                {{ $status->vvkateg }}
                                            </div>
                                        </td>
                                        <!-- Version Column -->
                                        <td class="py-3 px-6 text-center">{{ $status->vvt_revnr ?? '0.1' }}</td>
                                        <!-- Zugewiesene Person Column -->
                                        <td class="py-3 px-6 text-center">{{ $status->zugew_user_name ?? 'Nicht zugewiesen' }}</td>
                                        <!-- Zuletzt Bearbeitet -->
                                        <td class="py-3 px-6 text-center">{{ Carbon\Carbon::parse($status->geaendert_ts)->locale('de')->isoFormat('DD.MM.YYYY, HH:mm') ?? 'Zuletzt Bearbeitet' }}</td>

                                        <td class="py-3 px-6 text-center">
                                            <!-- Aktion-Buttons -->
                                            <div class="flex items-center justify-center" style="filter: invert(16%) sepia(69%) saturate(2022%) hue-rotate(197deg) brightness(100%) contrast(92%);">
                                                {{-- View --}}
                                                <a
                                                    @if($status->getConnectionName() == 'haupmandant_DB')
                                                        href="{{route("show-vt", ['vvt_id' => $status->vvt_id, 'fid'=>session()->get('fid'),'mid'=>6,'is_main_db'=>true])}}" class="w-4 mr-2 transform hover:text-yellow-500 hover:scale-110">
                                                    @else
                                                        href="{{route("show-vt", ['vvt_id' => $status->vvt_id, 'fid'=>session()->get('fid'),'mid'=>6])}}" class="w-4 mr-2 transform hover:text-yellow-500 hover:scale-110">
                                                    @endif

                                                    <img src="{{ asset('images/icons/CO-DatMenue/eye.png') }}" alt="View Icon" class="w-4 h-4" title="Anzeigen"/>
                                                </a>

                                                @if(!$showNewProcessPopup && !$showDeleteModal)
                                                    {{-- Edit --}}
                                                    @can('edit',[$status])
                                                        <a href="{{ route("edit-vt", ['vvt_id' => $status->vvt_id, 'fid'=>session()->get('fid'),'mid'=>6]) }}" class="w-4 mr-2 transform hover:text-yellow-500 hover:scale-110">
                                                            <img src="{{ asset('images/icons/CO-DatMenue/edit.png') }}" alt="Edit Icon" class="w-4 h-4" title="Bearbeiten"/>
                                                        </a>
                                                    @else
                                                        <a  class="opacity-50 w-4 mr-2 transform hover:text-yellow-500 hover:scale-110">
                                                            <img src="{{ asset('images/icons/CO-DatMenue/edit.png') }}" alt="Edit Icon" class="w-4 h-4" title="Bearbeiten"/>
                                                        </a>
                                                    @endcan

                                                    {{-- Duplicate --}}
                                                    @can('create',[$status])
                                                        <button disabled href="" class="w-4 mr-2 transform">
                                                            <img src="{{ asset('images/icons/CO-DatMenue/add-blank-file.png') }}" alt="Duplicate Icon" class="w-4 h-4" title="Als Vorlage speichern"/>
                                                        </button>
                                                    @else
                                                        <button disabled class="opacity-60 w-4 mr-2 transform">
                                                            <img src="{{ asset('images/icons/CO-DatMenue/add-blank-file.png') }}" alt="Duplicate Icon" class="w-4 h-4" title="Als Vorlage speichern"/>
                                                        </button>
                                                    @endcan

                                                    {{-- Export --}}
                                                    @can('export',[$status])
                                                        <a
                                                            @if($status->getConnectionName() == 'haupmandant_DB')
                                                                href="{{route('vvt-export',['vvt_id'=>$status->vvt_id, 'fid'=>session()->get('fid'), 'mid'=>session()->get('mid'),'is_main_db'=>true])}}"
                                                            @else
                                                                href="{{route('vvt-export',['vvt_id'=>$status->vvt_id, 'fid'=>session()->get('fid'), 'mid'=>session()->get('mid')])}}"
                                                            @endif
                                                            class="w-4 mr-2 transform hover:scale-110">
                                                            <img src="{{ asset('images/icons/CO-DatMenue/maximize-size-option.png') }}" alt="Maximize Icon" class="w-4 h-4" title="Export"/>
                                                        </a>
                                                    @else
                                                        <a  class="opacity-60 w-4 mr-2 transform hover:text-red-500 hover:scale-110">
                                                            <img src="{{ asset('images/icons/CO-DatMenue/maximize-size-option.png') }}" alt="Maximize Icon" class="w-4 h-4" title="Export"/>
                                                        </a>
                                                    @endcan

                                                    {{-- Delete --}}
                                                    @can('delete',[$status])
                                                        <button  wire:click="confirmDelete({{ $status->vvt_gruppennr }})"
                                                           class="w-4 mr-2 transform hover:text-red-500 hover:scale-110">
                                                            <img src="{{ asset('images/icons/CO-DatMenue/recycle-bin.png') }}" alt="Delete Icon" class="w-4 h-4" title="Löschen"/>
                                                        </button>
                                                    @endcan
                                                @else
                                                    <!-- dummy forpopup -->
                                                    <div class="w-4 mr-2 transform hover:text-yellow-500 hover:scale-110">
                                                        <img src="{{ asset('images/icons/CO-DatMenue/edit.png') }}" alt="Edit Icon" class="w-4 h-4" title="Bearbeiten"/>
                                                    </div>
                                                    <div class="w-4 mr-2 transform">
                                                        <img src="{{ asset('images/icons/CO-DatMenue/add-blank-file.png') }}" alt="Duplicate Icon" class="w-4 h-4" title="Als Vorlage speichern"/>
                                                    </div>
                                                    <div class="w-4 mr-2 transform hover:scale-110">
                                                        <img src="{{ asset('images/icons/CO-DatMenue/maximize-size-option.png') }}" alt="Maximize Icon" class="w-4 h-4" title="Export"/>
                                                    </div>
                                                    <div class="w-4 mr-2 transform hover:text-red-500 hover:scale-110">
                                                        <img src="{{ asset('images/icons/CO-DatMenue/recycle-bin.png') }}" alt="Delete Icon" class="w-4 h-4" title="Löschen"/>
                                                    </div>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @endcan
                            @endforeach

                            @if ($showDeleteModal)
                                <div class="fixed inset-0 bg-gray-400 bg-opacity-10 flex justify-center items-center z-50">
                                    <div class="bg-white rounded-lg w-1/3 p-6 shadow-xl border border-gray-300">
                                        <p class="text-lg font-semibold text-gray-800">
                                            Möchten Sie diese Verarbeitung inklusive ihrer Historie wirklich löschen?
                                        </p>
                                        <div class="mt-4 flex justify-end space-x-4">  <!-- Buttons nach rechts verschoben -->
                                            <button wire:click="deleteVvtsByGroup" class="bg-orange-500 text-white px-4 py-2 rounded-md hover:bg-orange-600">
                                                Ja, löschen
                                            </button>
                                            <button wire:click="$set('showDeleteModal', false)" class="bg-gray-200 text-gray-900 px-4 py-2 rounded-md hover:bg-gray-300">
                                                Abbrechen
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            @endif
                            </tbody>
                        </table>
                        <!-- Pagination -->
                        <div class="items-center pt-3">
                            {{$this->statusList->links()}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>