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

<PageTitle>Институт | Отчислятор 3000</PageTitle>
<PageScript Src="./Components/Pages/ChooseInstitut.razor.js"/>

<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/4 transform -translate-x-1/2 italic">
        <br>Выбери свой институт
    </div>
    <div class="flex flex-col space-y-4 w-96 sm:w-[32rem]">
        <div class="card rounded-badge bg-base-200 p-4">
            <div class="grid grid-cols-2 gap-4 p-4">
                <button id="ИКТИБ" class="institut-button btn h-auto card bg-white p-4 select-none">
                    <img src="img/iktib.jpg" alt="ИКТИБ" class="w-full h-32 object-contain rounded-md" draggable="false">
                    <p class="text-center mt-2">ИКТИБ</p>
                </button>
                <button id="ИРТСУ" class="institut-button btn h-auto card bg-white p-4 select-none">
                    <img src="img/irtsu.jpg" alt="ИРТСУ" class="w-full h-32 object-contain rounded-md" draggable="false">
                    <p class="text-center mt-2">ИРТСУ</p>
                </button>
                <button id="ИНЭП" class="institut-button btn h-auto card bg-white p-4 select-none">
                    <img src="img/inep.jpg" alt="ИНЭП" class="w-full h-32 object-contain rounded-md" draggable="false">
                    <p class="text-center mt-2">ИНЭП</p>
                </button>
                <button id="ИУЭС" class="institut-button btn h-auto card bg-white p-4 select-none">
                    <img src="img/iues.jpg" alt="ИУЭС" class="w-full h-32 object-contain rounded-md" draggable="false">
                    <p class="text-center mt-2">ИУЭС</p>
                </button>
            </div>
            <a href="notsupported" class="btn rounded-full bg-white mt-1 mx-4 flex-grow w-30">другой</a>
        </div>
    </div>

    <div class="text-center">
        <a href="/"
           class="relative btn rounded-full mt-4 min-h-2 min-w-2 w-10 h-10">
            <img class="absolute p-2 min-w-2 min-h-0" src="img/exit.svg" alt=""/>
        </a>
    </div>
</div>