<x-ui.modal :title="__('support.new')" :subtitle="__('support.new_hint')">
    <div class="space-y-4">
        <div>
            <label class="text-sm font-medium text-body" for="sr-category">{{ __('support.category') }}</label>
            <select id="sr-category" wire:model="category" class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-body">
                @foreach ($categories as $c)
                    <option value="{{ $c }}">{{ __('support.category_'.$c) }}</option>
                @endforeach
            </select>
            @error('category')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
        </div>

        <div>
            <label class="text-sm font-medium text-body" for="sr-subject">{{ __('support.subject') }}</label>
            <input id="sr-subject" type="text" wire:model="subject" maxlength="150"
                   class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-ink" />
            @error('subject')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
        </div>

        <div>
            <label class="text-sm font-medium text-body" for="sr-body">{{ __('support.body') }}</label>
            <textarea id="sr-body" wire:model="body" rows="6"
                      class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-ink"></textarea>
            @error('body')<p class="mt-1 text-xs text-danger">{{ $message }}</p>@enderror
        </div>

        {{-- Said once, plainly. The alternative is a form that asks the customer
             to describe their own server back to the people who built it. --}}
        <p class="rounded-md border border-line bg-surface-2 px-3 py-2 text-xs text-muted">{{ __('support.attached_hint') }}</p>
    </div>

    <x-slot:footer>
        <div class="flex justify-end gap-3">
            <x-ui.button variant="secondary" x-on:click="Livewire.dispatch('closeModal')">{{ __('common.cancel') }}</x-ui.button>
            <x-ui.button variant="primary" wire:click="save" wire:loading.attr="disabled" wire:target="save">{{ __('support.send') }}</x-ui.button>
        </div>
    </x-slot:footer>
</x-ui.modal>
