@props([
    'upAction',
    'downAction',
    'isFirst' => false,
    'isLast' => false,
])

<div class="inline-flex items-center gap-1">
    <form method="POST" action="{{ $upAction }}" class="inline">
        @csrf
        <button
            type="submit"
            @disabled($isFirst)
            class="inline-flex h-7 w-7 items-center justify-center rounded border border-slate-200 bg-white text-slate-600 shadow-sm transition hover:bg-slate-50 hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-25 disabled:hover:bg-white disabled:hover:text-slate-600"
            title="{{ $isFirst ? 'Top item' : 'Move up' }}"
        >
            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
            </svg>
        </button>
    </form>
    <form method="POST" action="{{ $downAction }}" class="inline">
        @csrf
        <button
            type="submit"
            @disabled($isLast)
            class="inline-flex h-7 w-7 items-center justify-center rounded border border-slate-200 bg-white text-slate-600 shadow-sm transition hover:bg-slate-50 hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-25 disabled:hover:bg-white disabled:hover:text-slate-600"
            title="{{ $isLast ? 'Bottom item' : 'Move down' }}"
        >
            <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
            </svg>
        </button>
    </form>
</div>