@props([
    /** @var \App\Livewire\Projects\ProjectManager */
    'projectManager'
])

<div {{ $attributes->class(['mt-10 sm:mt-0']) }}>
    <x-action-section>
        <x-slot name="title">
            {{ __('Manage projects') }}
        </x-slot>

        <x-slot name="description">
            {{ __('You may delete any of your projects if they are no longer needed.') }}
        </x-slot>

        <x-slot name="content">
            <div class="space-y-6">
                <x-secondary-button wire:click="openCreateProjectModal">
                    {{ __('Create Project') }}
                </x-secondary-button>
                @foreach ($projectManager->projects->sortBy('name') as $project)
                    <div class="flex items-center justify-between">
                        <div class="break-all">
                            <a href="{!! route('project.show', $project->id) !!}">{{ $project->name }}</a>
                        </div>
                        <div class="flex items-center ml-2">
                            <button class="cursor-pointer ml-6 text-sm text-gray-500"
                                    wire:click="editMailSettings({{ $project->id }})">
                                {{ __('Mail') }}
                            </button>
                            <button class="cursor-pointer ml-6 text-sm text-gray-500"
                                    wire:click="editProject({{ $project->id }})">
                                {{ __('Edit') }}
                            </button>
                            <button class="cursor-pointer ml-6 text-sm text-red-500"
                                    wire:click="confirmReportDeletion({{ $project->id }})">
                                {{ __('Delete') }}
                            </button>
                        </div>
                    </div>
                @endforeach
            </div>
        </x-slot>
    </x-action-section>
</div>