<section>
    <header>
        <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
            <i class="fa-solid fa-shield"></i> {{ __('Search Blacklist') }}
        </h2>
    </header>

    <form method="post" action="{{ route('profile.blacklist.save') }}" class="mt-2">
        @csrf
        <div class="grid grid-cols-2 items-center text-left gap-2">
            <!-- Tags -->
            <div class="p-2">
                <label class="leading-tight text-gray-800 dark:text-gray-200 w-full" for="tags">Tags (type for more suggestions):</label>
                <x-text-input id="tags" class="block w-full" type="text" name="tags" />
            </div>
        </div>
        <div class="flex items-center gap-4 pt-4">
            <x-primary-button>{{ __('Save') }}</x-primary-button>

            @if (session('status') === 'blacklist-updated')
            <p x-data="{ show: true }" x-show="show" x-transition x-init="setTimeout(() => show = false, 4000)" class="text-sm text-gray-600 dark:text-gray-400">{{ __('Saved.') }}</p>
            @endif
        </div>
    </form>

</section>