<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Project') }} {{ $project->name}}
        </h2>
    </x-slot>
{{--  TODO search bar blinking --}}
    <div id="main" class="flex flex-col md:flex-row w-full min-h-screen shadow rounded-lg overflow-hidden">
        <livewire:projects.menu :project-name="$project->name" :project-id="$project->id"  :active-tab="$currentTab"></livewire:projects.menu>
        <div class="flex-1 p-4 bg-white md:w-3/4">
            @switch($currentTab)
                @case('downloads')
                        <livewire:projects.tabs.download :project="$project"/>
                    @break
                @case('mosaics')
                        <livewire:projects.tabs.mosaic :project="$project"></livewire:projects.tabs.mosaic>
                    @break
                @case('reports')
                    <livewire:projects.tabs.report :project="$project"></livewire:projects.tabs.report>
                    @break
                @case('mailings')
                    <livewire:projects.tabs.mailings :project="$project"></livewire:projects.tabs.mailings>
                    @break
                @case('settings')
                    <livewire:projects.tabs.settings :project="$project"></livewire:projects.tabs.settings>
                    @break
                @case('exports')
                    <livewire:projects.tabs.exports :project="$project"></livewire:projects.tabs.exports>
                    @break
                @case('logs')
                    <livewire:projects.tabs.logs :project="$project"></livewire:projects.tabs.logs>
                    @break
                @default
                        <div class="flex w-full h-screen justify-center items-center"> Menu Component not found.</div>
            @endswitch
        </div>
    </div>
    <livewire:components.download-notification :project="$project"/>
</x-app-layout>
