<main class="px-4 sm:px-6 md:px-0">
    <div class="mb-6 w-fit">
        <a href="{{ route('forum.index') }}"
            class="text-gray-500 hover:text-gray-700 flex items-center transition duration-150">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
            Kembali ke Forum
        </a>
    </div>
    <div class="w-full p-6 bg-white rounded-lg shadow-md ring-2 ring-gray-700">
        <h2 class="text-2xl font-bold mb-4">Buat Topik Baru</h2>

        @if (session()->has('message'))
            <div class="p-4 mb-4 text-sm text-green-700 bg-green-100 rounded-lg">
                {{ session('message') }}
            </div>
        @endif

        <form wire:submit.prevent="submit">
            <div class="mb-4">
                <x-input-label for="title" class="block text-gray-700 text-sm font-bold mb-2">Judul
                    topik</x-input-label>
                <x-text-input wire:model="title" id="title" class="block mt-1 w-full py-2.5" type="text"
                    name="title" />
                <x-input-error :messages="$errors->get('title')" class="mt-2" />
            </div>

            <div class="mb-6">
                <x-input-label for="content" class="block text-gray-700 text-sm font-bold mb-2">Pesan</x-input-label>
                <textarea wire:model="content" id="content" rows="6"
                    class="block mt-1 w-full h-[100px] resize-none py-2.5 ring-2 ring-gray-700 shadow-[4px_4px_0px_2px_#374151]
                    focus:shadow-[2px_2px_0px_2px_#374151] focus:translate-y-0.5 focus:translate-x-0.5
                    rounded-md focus:outline-none focus:border-none focus:ring-2 focus:ring-gray-700
                    text-gray-700 leading-5 transition duration-150 ease-in-out"></textarea>
                <x-input-error :messages="$errors->get('content')" class="mt-2" />
            </div>

            <div class="flex items-center justify-start w-full">
                <button type="submit"
                    class="ring-2 ring-gray-700 shadow-[4px_4px_0px_2px_#374151] text-white hover:shadow-[2px_2px_0px_2px_#374151] hover:translate-y-0.5 hover:translate-x-0.5 text-center bg-orange-500 py-2.5 px-4 rounded">
                    Buat topik
                </button>
            </div>
        </form>
    </div>
</main>
