<?= $this->layout('_theme', ['title' => $title, 'subtitle' => 'Adicionar nova notícia']); ?>

<div class="p-4 bg-gray-100 rounded-lg">
    <form action="<?= __redirect('administration/auth/new/post') ?>">
        <div>
            <p class="px-1 py-3 text-[13px]">Título da notícia <sup class="text-red-500">*</sup></p>
            <input class="rounded-sm p-2 my-1 text-xs w-full border border-neutral-400 focus:outline-none focus:bg focus:bg-neutral-100" type="text" name="title" placeholder="Digite aqui o título da notícia" maxlength="80">
        </div>

        <div>
            <p class="px-1 py-3 text-[13px]">Descrição da notícia</p>
            <input class="rounded-sm p-2 my-1 text-xs w-full border border-neutral-400 focus:outline-none focus:bg focus:bg-neutral-100" type="text" name="description" placeholder="Descrição da notícia">
        </div>

        <div>
            <p class="px-1 py-3 text-[13px]">Categoria <sup class="text-red-500">*</sup></p>
            <ul class="items-center w-full text-[13px] font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
                    <div class="flex items-center pl-3">
                        <input id="horizontal-list-radio-warning" type="radio" value="Avisos" name="category" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500" checked>
                        <label for="horizontal-list-radio-warning" class="w-full py-3 ml-2 text-[13px] font-medium text-gray-900">Avisos</label>
                    </div>
                </li>
                <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
                    <div class="flex items-center pl-3">
                        <input id="horizontal-list-radio-events" type="radio" value="Eventos" name="category" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500">
                        <label for="horizontal-list-radio-events" class="w-full py-3 ml-2 text-[13px] font-medium text-gray-900">Eventos</label>
                    </div>
                </li>
                <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
                    <div class="flex items-center pl-3">
                        <input id="horizontal-list-radio-promotion" type="radio" value="Promoção" name="category" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500">
                        <label for="horizontal-list-radio-promotion" class="w-full py-3 ml-2 text-[13px] font-medium text-gray-900">Promoção</label>
                    </div>
                </li>
                <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
                    <div class="flex items-center pl-3">
                        <input id="horizontal-list-radio-maintenance" type="radio" value="Manutenção" name="category" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500">
                        <label for="horizontal-list-radio-maintenance" class="w-full py-3 ml-2 text-[13px] font-medium text-gray-900">Manutenção</label>
                    </div>
                </li>
                <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
                    <div class="flex items-center pl-3">
                        <input id="horizontal-list-radio-news" type="radio" value="Novidades" name="category" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500">
                        <label for="horizontal-list-radio-news" class="w-full py-3 ml-2 text-[13px] font-medium text-gray-900">Novidades</label>
                    </div>
                </li>
            </ul>
        </div>

        <div>
            <p class="px-1 py-3 text-[13px]">Link da notícia</p>
            <input class="rounded-sm p-2 my-1 text-xs w-full border border-neutral-400 focus:outline-none focus:bg focus:bg-neutral-100" type="text" name="link" placeholder="Link da notícia ( opcional )">
        </div>

        <div>
            <p class="px-1 py-3 text-[13px]">Comentários <sup class="text-red-500">*</sup></p>
            <ul class="items-center w-full text-[13px] font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
                    <div class="flex items-center pl-3">
                        <input id="horizontal-list-radio-no" type="radio" value="0" name="comment" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500" checked>
                        <label for="horizontal-list-radio-no" class="w-full py-3 ml-2 text-[13px] font-medium text-gray-900">Não</label>
                    </div>
                </li>
                <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
                    <div class="flex items-center pl-3">
                        <input id="horizontal-list-radio-yes" type="radio" value="1" name="comment" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500">
                        <label for="horizontal-list-radio-yes" class="w-full py-3 ml-2 text-[13px] font-medium text-gray-900">Sim</label>
                    </div>
                </li>
            </ul>
        </div>

        <div>
            <p class="px-1 py-3 text-[13px]">Conteúdo <sup class="text-red-500">*</sup></p>
            <div class="flex flex-wrap gap-40 items-center">
                <textarea name="message" id="editor"></textarea>
            </div>
        </div>

        <button class="rounded-lg py-3 px-6 bg-sky-500 text-white block mt-4 mx-auto text-sm border-2 border-sky-400 hover:bg-sky-700 transition ease-in-out duration-500" type="submit">Adicionar</button>
    </form>
</div>