@props([
    'action',
    'label',
    'submit',
    'id' => 'value',
    'cancel' => false,
])

<form wire:submit="{{ $action }}" class="space-y-4">
    <label for="{{ $id }}" class="text-red-400 font-mono text-xs uppercase tracking-wider">
        &gt; {{ $label }}
    </label>
    <input
        id="{{ $id }}"
        type="number"
        min="0"
        step="1"
        autofocus
        wire:model="value"
        class="w-full bg-black border-red-500 text-red-400 focus:border-red-300 font-mono text-sm rounded-none border-2 focus:ring-0 focus:outline-none placeholder:text-red-400/40 transition-all glow-red px-3 py-2"
    >
    @error('value')
        <p class="text-red-400 font-mono text-xs">{{ $message }}</p>
    @enderror

    <div @class(['flex gap-3 pt-2' => $cancel])>
        <button
            type="submit"
            @class([
                'bg-red-500 hover:bg-red-500 text-black font-mono text-sm font-bold border-red-500 rounded-none border-2 uppercase tracking-wider transition-all glow-red px-4 py-2',
                'flex-1' => $cancel,
                'w-full' => ! $cancel,
            ])
        >
            {{ $submit }}
        </button>

        @if ($cancel)
            <button
                type="button"
                wire:click="cancel"
                class="flex-1 bg-black border-red-500 text-red-400 hover:bg-red-950 hover:text-red-300 font-mono text-sm font-bold rounded-none border-2 uppercase tracking-wider transition-all glow-red px-4 py-2"
            >
                [ABORT]
            </button>
        @endif
    </div>
</form>