@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">
            @manager
            {{ __('You may delete any of your projects if they are no longer needed.') }}
            @endmanager
            @viewer
            {{ __('This is a overview of all projects. When mail scheduled it means it will create a report and mail the recipients.') }}
            @endviewer
        </x-slot>

        <x-slot name="content">

            <div class="space-y-6">
                @manager
                <div class="flex flex-auto gap-2" x-data="{showCreateProjectInput:false}">
                    <x-secondary-button x-show="!showCreateProjectInput" @click="showCreateProjectInput = true">
                        {{ __('Create Project') }}
                    </x-secondary-button>
                    <div x-show="showCreateProjectInput" class="flex justify-center items-center gap-1">
                        <x-input x-ref="projectName" id="name" type="text" class="w-fit"
                                 wire:model="formData.name"
                                 placeholder="New Project Name"/>
                        <x-secondary-button @click="showCreateProjectInput = false" class="w-fit h-full">
                            {{ __('Cancel') }}
                        </x-secondary-button>
                        <x-button class=" h-full" wire:click="createProject">Create</x-button>
                    </div>
                </div>
                @endmanager



                <div class="grid grid-cols-3 gap-3">
                    <div class="text-sm font-semibold text-gray-900">
                        Name
                    </div>
                    <div class="text-sm font-semibold text-gray-900">
                        Mail Scheduled
                    </div>
                    <div class="text-sm font-semibold text-gray-900">
                        @manager
                        Actions
                        @endmanager
                    </div>
                    @foreach ($projectManager->projects->sortBy('name') as $project)
                        <div>
                            <a href="{!! route('project.show', [$project->name]) !!}">{{ $project->name }}</a>
                        </div>
                        <div @class([
                            'text-green-500' => $project->mail_scheduled,
                            'text-red-500' => !$project->mail_scheduled,
                        ])">
                        {!! $project->mail_scheduled ? 'Yes' : 'No' !!}
                </div>
                <div>
                    @manager
                    <button class="cursor-pointer text-sm text-red-500"
                            wire:click="confirmReportDeletion({{ $project->id }})">
                        <x-icon.trash/>
                    </button>
                    @endmanager
                </div>

                @endforeach
            </div>
</div>
</x-slot>
</x-action-section>
</div>