@page "/statement"
@using Otchinslator.Components.Layout
@layout OtchislenieLayout
@using BlazorPageScript
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]

<PageTitle>Заявление | Отчислятор 3000</PageTitle>

<PageScript Src="./Components/Pages/Statement.razor.js"/>

<dialog id="info_modal" class="modal modal-bottom sm:modal-middle">
    <div class="modal-box">
        <h3 class="text-lg font-bold">Сервис отчислений</h3>
        <p class="py-4">Укажите причину по которой хотите отчислиться</p>
        <div class="modal-action">
            <form method="dialog">
                <button class="btn">Закрыть</button>
            </form>
        </div>
    </div>
</dialog>

<dialog id="generateStatementModal" class="modal">
    <div class="modal-box text-center justify-center">
        <h3 class="text-lg content-center items-center font-bold select-none">Генерация</h3>
        <p id="loadingAnim" class="py-4"><span class="loading w-[15rem] loading-ring sm:w-[20rem]"></span></p>
        <div id="failBlock" class="hidden justify-center">
            <div class="flex justify-center items-center">
                <svg class="w-[15rem] h-[15rem]" fill="red" stroke="red" viewBox="0 0 24 24"
                     xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </div>
            <p class="text-red-500">Ошибка при генерации</p>
            <p class="text-red-500">Попробуйте еще раз</p>
            <div class="modal-action">
                <form method="dialog">
                    <button class="btn">Закрыть</button>
                </form>
            </div>
        </div>
    </div>
</dialog>

<div class="relative w-96 sm:w-[32rem]">
    <div
        class="text-center font-bold text-4xl md:text-5xl w-max absolute left-1/2 -top-1/3 transform -translate-x-1/2 italic">
        <br>Укажите причину
    </div>
    <div class="flex flex-col space-y-4 w-96 sm:w-[32rem]">
        <textarea class="textarea textarea-bordered w-full h-96 resize-none" placeholder="Введите причину отчисления..."
                  name="statement">Прошу отчислить меня по собственному желанию в связи с </textarea>
    </div>
    <div class="flex justify-between mt-1 text-sm">
        <p id="needMoreText" class="text-gray-500 hidden">Нужно ещё немного дописать</p>
        <p id="symCounter" class="text-gray-500 ml-auto">x/max</p>
    </div>
    <div class="join w-full mt-3 flex gap-2">
        <a href="/" class="relative btn btn-primary rounded-full flex-grow-0 w-[3rem] h-[3rem]">
            <img class="absolute p-3" src="img/exit.svg" alt=""/>
        </a>
        <button id="gen" class="btn rounded-full btn-primary flex-grow w-30">Сгенерировать</button>
        <button onclick="info_modal.showModal()" class="btn btn-primary rounded-full flex-grow-0 w-[3rem]">?</button>
    </div>
</div>