@props(['category' => null, 'nextSortOrder' => 0])

<div class="mb-3">
    <label for="name" class="form-label">Name</label>
    <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $category->name ?? '') }}" maxlength="120" required>
    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>

<div class="mb-3">
    <label for="slug" class="form-label">URL slug <span class="text-muted">(leave empty to generate from the name)</span></label>
    <div class="input-group">
        <span class="input-group-text" style="font-size: .8125rem;">{{ rtrim(config('app.url'), '/') }}/blog/category/</span>
        <input type="text" name="slug" id="slug" class="form-control @error('slug') is-invalid @enderror" value="{{ old('slug', $category->slug ?? '') }}" maxlength="140">
        @error('slug')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
</div>

<div class="mb-3" style="max-width: 200px;">
    <label for="sort_order" class="form-label">Sort order</label>
    <input type="number" name="sort_order" id="sort_order" class="form-control @error('sort_order') is-invalid @enderror" value="{{ old('sort_order', $category->sort_order ?? $nextSortOrder) }}" min="0" max="9999">
    @error('sort_order')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>

<div class="form-check mb-4">
    <input type="checkbox" name="is_visible" id="is_visible" class="form-check-input" value="1" @checked(old('is_visible', $category->is_visible ?? true))>
    <label for="is_visible" class="form-check-label">Show in the blog category filter</label>
</div>