@php
    use App\Models\Structure;
@endphp
<div class="relative z-0 mt-20">
    @foreach(range(1, Structure::ROWS) as $row)
        @php
            $marginX = triangle_height($edgeLength) / 4;
            $width = triangle_height($edgeLength) / 2;
            $marginY = $edgeLength / 4;
            $height = $edgeLength / 2;

            $spacing = 1.25;
        @endphp
        <div class="flex flex-row" style="">
            @foreach(range(1, Structure::COLS) as $column)
                @php
                    $active = Arr::get($graphicsChosen, $row.'.'.$column, false);
                    $pointUp = $loop->parent->even && $loop->even || $loop->parent->odd && $loop->odd;
                    if ($loop->parent->even && $loop->even || $loop->parent->odd && $loop->odd) {
                        $bearing = \App\Models\Static\Graphic::POINT_DOWN;
                    } else {
                        $bearing = \App\Models\Static\Graphic::POINT_UP;
                    }

                    $css = '';
                    if ($bearing === \App\Models\Static\Graphic::POINT_UP) {
                        $css = 'transform: rotate(30deg) translate(18px, -10px);';
                    } else {
						$css = 'transform: rotate(30deg) translate(-18px, 52px);';
                    }
                @endphp
                <div class="relative flex justify-center my-px"
                     style="margin-left: {{ $marginX }}px; margin-right: {{ $marginX }}px; width: {{ $width }}px; height: {{ $height }}px">
                    <div class="absolute z-0"
                         style="{{ $css }}; top: -{{ $marginY * $spacing }}px; bottom: -{{ $marginY * $spacing }}px; left: -{{ $marginX * $spacing }}px; right: -{{ $marginX * $spacing }}px">
                        @if($active)
                            <x-triangle :identifier="$active['identifier']" :bearing="$bearing"
                                        :rotation="$active['rotation']"/>
                        @else
                            <x-triangle :bearing="$bearing"/>
                        @endif
                    </div>
                    @if($active)
                        @if($editSlot === implode('-', [$active['identifier'], $row, $column]))
                            <div class="absolute inset-0 z-10 cursor-pointer group flex flex-row space-x-4 @if($pointUp) justify-start @else justify-end @endif items-center">
                                <p wire:click="rotateGraphic({{ implode(',', [(int) $row, (int) $column]) }})"
                                   wire:key="rotate-piece-{{ implode('-', [$row, $column]) }}"
                                   class="cursor-pointer flex flex-row justify-center items-center">
                                    <span class="fas fa-redo-alt text-2xl m-auto"></span>
                                </p>
                                <p wire:click="removeGraphic({{ implode(',', [$row, $column]) }})"
                                   wire:key="remove-gfx-{{ implode('-', [$row, $column]) }}"
                                   class="cursor-pointer flex flex-row justify-center items-center">
                                    <span class="fas fa-trash-alt text-2xl m-auto"></span>
                                </p>
                            </div>
                        @else
                            <p class="absolute inset-0 z-10 cursor-pointer group flex flex-row @if($pointUp) justify-start @else justify-end @endif items-center"
                               wire:click="editGraphic({{ implode(',', [$row, $column]) }})"
                               wire:key="edit-gfx-{{ implode('-', [$row, $column]) }}">
                                <span class="fas fa-pen text-4xl opacity-0 group-hover:opacity-100"></span>
                            </p>
                        @endif
                    @else
                        <div
                            class="absolute inset-0 z-10 cursor-pointer group flex flex-row @if($pointUp) justify-start @else justify-end @endif items-center"
                            wire:click="addGraphic({{ implode(',', [$row, $column, $bearing]) }})"
                            wire:key="add-gfx-{{ implode('-', [$row, $column]) }}">
                            <span class="fas fa-plus text-4xl opacity-0 group-hover:opacity-100"></span>
                        </div>
                    @endif
                </div>
                {{--                            <div class="aspect-w-1 aspect-h-1 relative @if($loop->parent->even && $loop->even || $loop->parent->odd && $loop->odd) bg-blue-400 @else bg-red-700 @endif" style="margin-bottom: 50%; padding-top: 15%">--}}
                {{--                                <div class="absolute object-fit" style="margin-left: -25%; margin-right: -25%; width: 180%">--}}
                {{--                                    @if($active)--}}
                {{--                                        <x-triangle :identifier="$active['identifier']" :bearing="$bearing" :rotation="$active['rotation']" style="margin-left: -25%; margin-right: -25%; width: 180%"/>--}}
                {{--                                    @else--}}
                {{--                                        <x-triangle :bearing="$bearing"/>--}}
                {{--                                    @endif--}}
                {{--                                </div>--}}
                {{--                            </div>--}}
                {{--                            <div class="relative" style="height: {{  round($edgeLength / 2, 2) }}px; width: {{ triangle_height($edgeLength) }}px">--}}
                {{--                                <div class="absolute transform -rotate-30 flex flex-start flex-col z-0" style="{{ $css }} width: {{ triangle_height($edgeLength) }}px; "> --}}{{--right: -{{ round($edgeLength / 4, 2) }}px--}}
                {{--                                    @if($active)--}}
                {{--                                        <x-triangle :identifier="$active['identifier']" :bearing="$bearing" :rotation="$active['rotation']"/>--}}
                {{--                                    @else--}}
                {{--                                        <x-triangle :bearing="$bearing"/>--}}
                {{--                                    @endif--}}
                {{--                                </div>--}}
                {{--                                <div class="relative z-10 h-full w-full group">--}}
                {{--                                    @php--}}
                {{--                                        $value = round($edgeLength / 3, 2);--}}
                {{--                                            if ($loop->parent->even) {--}}
                {{--                                                $margin = $loop->even ? 'margin-top: '.$value.'px;' : 'margin-bottom: '.$value.'px;';--}}
                {{--                                            } else {--}}
                {{--                                                $margin = $loop->even ? 'margin-bottom: '.$value.'px;' : 'margin-top: '.$value.'px;';--}}
                {{--                                            }--}}
                {{--                                    @endphp--}}
                {{--                                    --}}{{----}}
                {{--                                    @if($active)--}}
                {{--                                        @if($editSlot == $active['identifier'])--}}
                {{--                                            <div class="flex flex-col justify-center space-y-2 absolute inset-0 z-50 bg-white bg-opacity-70 mx-auto h-full"--}}
                {{--                                                 style="width: {{ $value }}px;">--}}
                {{--                                                <p wire:click="rotateGraphic({{ implode(',', [$row, $column]) }})" wire:key="rp-{{ implode('-', [$row, $column]) }}"--}}
                {{--                                                   class="cursor-pointer flex flex-row justify-center items-center">--}}
                {{--                                                    <span class="fas fa-undo-alt text-2xl m-auto" data-fa-transform="flip-h"></span>--}}
                {{--                                                </p>--}}
                {{--                                                <p wire:click="flipGraphic({{ implode(',', [$row, $column]) }})" wire:key="fp-{{ implode('-', [$row, $column]) }}"--}}
                {{--                                                   class="cursor-pointer flex flex-row justify-center items-center">--}}
                {{--                                                    <span class="fas fa-sync-alt text-2xl m-auto"></span>--}}
                {{--                                                </p>--}}
                {{--                                                <p wire:click="removeGraphic({{ implode(',', [$row, $column]) }})" wire:key="rp-{{ implode('-', [$row, $column]) }}"--}}
                {{--                                                   class="cursor-pointer flex flex-row justify-center items-center">--}}
                {{--                                                    <span class="fas fa-trash-alt text-2xl m-auto"></span>--}}
                {{--                                                </p>--}}
                {{--                                            </div>--}}
                {{--                                        @else--}}
                {{--                                            <p wire:click="editGraphic({{ implode(',', [$row, $column]) }})" wire:key="ep-{{ implode('-', [$row, $column]) }}"--}}
                {{--                                               style="{{ $margin }} width: {{ round($edgeLength / 2, 2) }}px; height: {{ round($edgeLength / 2, 2) }}px"--}}
                {{--                                               class="cursor-pointer absolute z-20 inset-0 m-auto rounded-full group-hover:bg-white group-hover:bg-opacity-50"></p>--}}
                {{--                                        @endif--}}
                {{--                                    @else--}}
                {{--                                        <p wire:click="addGraphic({{ implode(',', [$row, $column, $bearing]) }})" wire:key="ap-{{ implode('-', [$row, $column]) }}"--}}
                {{--                                           style="{{ $margin }} width: {{ round($edgeLength / 2, 2) }}px; height: {{ round($edgeLength / 2, 2) }}px"--}}
                {{--                                           class="cursor-pointer flex flex-row justify-center items-center absolute z-20 inset-0 m-auto rounded-full group-hover:bg-blue-gray-300">--}}
                {{--                                            <span class="fas fa-plus text-4xl opacity-0 group-hover:opacity-100"></span>--}}
                {{--                                        </p>--}}
                {{--                                    @endif--}}
                {{--                                    --}}
                {{--                                </div>--}}
                {{--                            </div>--}}
            @endforeach
            {{--                    </div>--}}
        </div>
    @endforeach
</div>