@model NEducation.Models.GrammarModel

<div class="fixed top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-screen max-h-full z-[99999] backdrop-filter-1">
    <div class="fixed z-[1] w-full blend-mode top-[5%] left-[40%]">
        <div class="countdown-wrapper">
            <div class="countdown-circle">
                <span id="countdown">30</span>
            </div>
        </div>
    </div>

    <div class="content">
        <div>
            <div class="text-c-1 text-s-32 justify-center top-100 text-black-color">
                @if (Model.questions != null && Model.questions.Count > 0)
                {
                    <text>Câu 1/@(Model.questions.Count): Chọn đáp án đúng</text>
                }
            </div>

            @if (Model.questions != null && Model.questions.Count > 0)
            {
                <div class="pb-[10px]">
                    <div class="text-c-2 w-full justify-center font-z-10 top-30 bottom-30 text-s-15 text-black-color">
                        @Model.questions[0].content
                    </div>
                </div>

                <div class="answer-box">
                    <div>@Model.questions[0].answer1</div>
                </div>

                <div class="answer-box">
                    <div>@Model.questions[0].answer2</div>
                </div>

                <div class="answer-box">
                    <div>@Model.questions[0].answer3</div>
                </div>

                <div class="answer-box">
                    <div>@Model.questions[0].answer4</div>
                </div>
            }
            else
            {
                <div>Không có câu hỏi nào để hiển thị.</div>
            }

            <div class="flex justify-center items-center gap-[20px] top-50">
                <a href="/result.html">
                    <div class="btn-c-2">
                        <div class="text-c-1 font-z-18 button-box">
                            Confirm
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>