
<x-aura::slide-over key="edit-question" wire:key="editQuestion">
  <div>
    @if($question)

    <div class="flex">
      <div class="flex-1">
        <h2 class="text-3xl font-bold">{{ __('Edit Question') }}</h2>
        <h1 class="mb-4 text-3xl font-semibold">{{ $question['label'] ?? ''}} ({{ $question['slug'] }})</h1>
      </div>
      <div class="mt-10 space-x-2">
        <x-aura::button.danger wire:click="deleteField('{{ $question['slug'] }}')">
            <x-slot:icon>
                <x-aura::icon.edit class="w-5 h-5" />
            </x-slot>
            {{ __('Delete') }}
        </x-aura::button.danger>
      </div>
    </div>

    @foreach(app($question['type'])->getGroupedFields() as $key => $question)
      <style >
        #resource-field-{{ optional($question)['slug'] }}-wrapper {
          width: {{ optional(optional($question)['style'])['width'] ?? '100' }}%;
        }

        @media screen and (max-width: 768px) {
          #resource-field-{{ optional($question)['slug'] }}-wrapper {
            width: 100%;
          }
        }
      </style>
      <div wire:key="resource-field-{{ $key }}"
      id="resource-field-{{ optional($question)['slug'] }}-wrapper">
        <x-dynamic-component :component="$question['field']->edit()" mode="edit" :field="$question" />
      </div>
    @endforeach

    @endif

  </div>



  <div class="flex mt-8 space-x-2">
        <x-aura::button wire:click="save">
            <x-slot:icon>
                <x-aura::icon.edit class="w-5 h-5" />
            </x-slot>
            {{ __('Save') }}
        </x-aura::button>

        <x-aura::button.border x-on:click="open = false">
            {{ __('Cancel') }}
        </x-aura::button.border>
  </div>
</x-aura::slide-over>
