@php
    use App\Models\Structure;
    $graphicCounter = 0;
	$jump30 = true;
    $edgeLength = 150;

@endphp
<div class="relative z-0 mt-20">
    @foreach(range(1, 4) 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="height: {{ $edgeLength }}px"> --}}{{-- style="margin-left: {{ round($edgeLength / 2, 2) }}px;"--}}
        <div class="flex flex-row" style="">
            @foreach(range(1, 10) as $column)
                @if ($graphicCounter < 38)
                    @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_UP;
                        } else {
                            $bearing = \App\Models\Static\Graphic::POINT_DOWN;
                        }

                        $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; margin-bottom: 4px;">
                        <div class="absolute z-0"
                             style="{{ $css }}; top: -{{ $marginY * $spacing }}px; bottom: -{{ $marginY * $spacing }}px; left: -{{ $marginX * $spacing }}px; right: -{{ $marginX * $spacing }}px; margin-right: 6px">
                            @if($graphicCounter === 30 && $jump30)
                                {{-- Do nothing here --}}
                                &nbsp;
                            @else
                                <x-triangle :identifier="\App\Models\Creator::GRAPHICS[$graphicCounter]['graphic']"
                                            :bearing="$bearing"
                                            :rotation="\App\Models\Creator::GRAPHICS[$graphicCounter]['rotation']"
                                            :visual-only="true"/>
                            @endif
                        </div>
                        <div class="relative z-10 h-full w-full">
                            @if($graphicCounter === 30 && $jump30)
                                @php
                                    $jump30 = false;
                                @endphp
                            @else
                                <p wire:click="chooseGraphic('{{ \App\Models\Creator::GRAPHICS[$graphicCounter]['graphic'] }}', '{{ \App\Models\Creator::GRAPHICS[$graphicCounter]['rotation'] }}')"
                                   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>
                                @php
                                    $graphicCounter++;
                                @endphp
                            @endif
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
    @endforeach
</div>