@php
    use App\Models\Structure;
    $edgeLength = 150;
@endphp

<div class="flex flex-col">
    @if ($autosaveMessage)
        <div class="fixed top-0 right-0 bg-yellow-500" x-data="{ show: true }" x-show="show"
             x-init="setTimeout(() => $wire.emit('closeMessage'), 1500)">
            <div class="px-4 py-1 text-xs justify-center flex flex-row">
                {{ __("Données enregistrées ...") }}
            </div>
        </div>
    @endif
    @if($activeSlot !== null)
        <div class="container m-auto flex flex-row justify-center relative z-10">
            {{--            <div class="text-6xl cursor-pointer p-2" wire:click="flipGraphics" wire:key="tps">--}}
            {{--                <span class="fas fa-sync-alt"></span>--}}
            {{--            </div>--}}
            {{--            <div class="text-6xl cursor-pointer p-2" wire:click="rotateGraphics" wire:key="rps">--}}
            {{--                <span class="fas fa-undo-alt" data-fa-transform="flip-h"></span>--}}
            {{--            </div>--}}
            <div class="text-6xl cursor-pointer p-2" wire:click="exitChooseGraphic" wire:key="ecp">
                <span class="fas fa-times"></span>
            </div>
        </div>

        @include('livewire.creator.selector')
{{--        <div class="transform relative z-0">--}}
{{--            <div class="container m-auto flex flex-row flex-wrap">--}}
{{--                @php--}}
{{--                    $graphicCounter = 0;--}}
{{--                @endphp--}}
{{--                @foreach(range(0, 5) as $row)--}}
{{--                    <div class="flex flex-row" style="margin-left: {{ round($edgeLength / 2, 2) }}px;">--}}
{{--                        @php--}}
{{--                            $rangePrefix = [--}}
{{--                                0 => 0,--}}
{{--                                1 => 0,--}}
{{--                                2 => 3,--}}
{{--                                3 => 6,--}}
{{--                                4 => 9,--}}
{{--                                5 => 12,--}}
{{--                            ];--}}
{{--                            $range = [--}}
{{--                                0 => 3,--}}
{{--                                1 => 6,--}}
{{--                                2 => 8,--}}
{{--                                3 => 8,--}}
{{--                                4 => 8,--}}
{{--                                5 => 5,--}}
{{--                            ];--}}
{{--                            $rangePoint = [--}}
{{--                                0 => 'even',--}}
{{--                                1 => 'odd',--}}
{{--                                2 => 'odd',--}}
{{--                                3 => 'odd',--}}
{{--                                4 => 'odd',--}}
{{--                                5 => 'odd',--}}
{{--                            ];--}}
{{--                            $rangeSuffix = [--}}
{{--                                0 => 12,--}}
{{--                                1 => 9,--}}
{{--                                2 => 7,--}}
{{--                                3 => 5,--}}
{{--                                4 => 0,--}}
{{--                                5 => 0,--}}
{{--                            ];--}}
{{--                        @endphp--}}
{{--                        @foreach(range(1, $rangePrefix[$loop->index]) as $placeholder)--}}
{{--                            <div class="relative"--}}
{{--                                 style="width: {{  round($edgeLength / 2, 2) }}px; height: {{ triangle_height($edgeLength) }}px">--}}
{{--                                <div class="absolute flex flex-start flex-col z-0"--}}
{{--                                     style="width: {{ $edgeLength }}px; right: -{{ round($edgeLength / 4, 2) }}px">--}}
{{--                                    &nbsp;--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        @endforeach--}}
{{--                        @foreach(range(1, $range[$loop->index]) as $column)--}}
{{--                            @php--}}
{{--                                $active = Arr::get($graphicsChosen, $row.'.'.$column, false);--}}

{{--                                if ($rangePoint[$loop->parent->index] == 'odd') {--}}
{{--                                    $bearing = $loop->even ? \App\Models\Pieces::POINT_UP : \App\Models\Pieces::POINT_DOWN;--}}
{{--                                } else {--}}
{{--                                    $bearing = $loop->even ? \App\Models\Pieces::POINT_DOWN : \App\Models\Pieces::POINT_UP;--}}
{{--                                }--}}

{{--                            @endphp--}}
{{--                            <div class="relative"--}}
{{--                                 style="margin-left: -{{ $edgeLength / 2 }}px; width: {{ $edgeLength }}px; height: {{ triangle_height($edgeLength) }}px">--}}
{{--                                <div class="absolute flex flex-start flex-col z-0" style="width: {{ $edgeLength }}px">--}}
{{--                                    <x-triangle :identifier="\App\Models\Creator::GRAPHICS[$graphicCounter]['graphic']"--}}
{{--                                                :bearing="$bearing"--}}
{{--                                                :rotation="\App\Models\Creator::GRAPHICS[$graphicCounter]['rotation']"--}}
{{--                                                :visual-only="true"/>--}}
{{--                                </div>--}}
{{--                                <div class="relative z-10 h-full w-full">--}}
{{--                                    <p wire:click="chooseGraphic('{{ \App\Models\Creator::GRAPHICS[$graphicCounter]['graphic'] }}')"--}}
{{--                                       wire:key="cp-{{ \App\Models\Creator::GRAPHICS[$graphicCounter]['graphic'] }}"--}}
{{--                                       style="width: {{ $edgeLength }}px; height: {{ triangle_height($edgeLength) }}px"--}}
{{--                                       class="cursor-pointer absolute z-20 inset-0 m-auto"></p>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                            @php--}}
{{--                                $graphicCounter++;--}}
{{--                            @endphp--}}
{{--                        @endforeach--}}
{{--                        @foreach(range(1, $rangeSuffix[$loop->index]) as $placeholder)--}}
{{--                            <div class="relative"--}}
{{--                                 style="width: {{  round($edgeLength / 2, 2) }}px; height: {{ triangle_height($edgeLength) }}px">--}}
{{--                                <div class="absolute flex flex-start flex-col z-0"--}}
{{--                                     style="width: {{ $edgeLength }}px; right: -{{ round($edgeLength / 4, 2) }}px">--}}
{{--                                    &nbsp;--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        @endforeach--}}
{{--                    </div>--}}
{{--                @endforeach--}}
{{--            </div>--}}
{{--        </div>--}}
    @else
        @if(!empty($graphicsChosen))
            <div class="flex flex-row items-center space-x-4">
                <x-fab wire:click="resetStructure" wire:key="reset" class="cursor-pointer bg-red-500 text-white">
                    <span class="fas fa-trash-alt text-2xl"></span>
                </x-fab>
                <x-fab wire:click="saveStructure" wire:key="save" class="cursor-pointer bg-green-500 text-white">
                    <span class="fas fa-save text-2xl"></span>
                </x-fab>
{{--                <div class="flex flex-col space-y-1">--}}
{{--                    <label class="text-sm">{{ __("Référence interne") }}</label>--}}
{{--                    <x-input wire:model="internalReference" wire:key="ir"/>--}}
{{--                </div>--}}
                <div class="flex flex-col space-y-1">
                    <label class="text-sm @error('publicName') text-red-700 @enderror">{{ __("Nom public") }}</label>
                    <x-input wire:model="publicName" wire:key="pn"/>
                </div>
                <div class="flex flex-col space-y-1">
                    <label class="text-sm">{{ __("État") }}</label>
                    <select wire:model="structureStatus">
                        <option value="DRAFT" wire:key="DRAFT">{{ __("non-publié") }}</option>
                        <option value="FINAL" wire:key="FINAL">{{ __("publié") }}</option>
                    </select>
                </div>
            </div>
        @endif
        @error('publicName')
            <div class="p-4">
                <p class="text-red-700 font-semibold">{{ $message }}</p>
            </div>
        @enderror

        {{--        START--}}
        @include('livewire.creator.board')
        {{--        END--}}
    @endif
</div>
<script>
    window.addEventListener('DOMContentLoaded', () => {
        window.setInterval(() => {
            Livewire.emit('autosave')
        }, 30000)
    })
</script>