@{
    ViewData["Title"] = "Rules";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@using LotteryWebApp.Languages;
@using LotteryWebApp.Controllers;
@using LotteryWebApp.Common;

@model HomeRules_ViewModel

<div class="app-content content" style="position:relative">

    <div class="card-title text-center ">
        <div class="news-button-header-container" style="text-align: start; margin: 0 10px;">
            @await Component.InvokeAsync("SmallHeader", new { title = Lang.rules.ToUpper() })
        </div>
    </div>

    <div class="content-wrapper buy-ticket-container">
        <div class="content-body">
            <section class="loto-container">
                <div class="py-2 px-2">
                    <span class="loto-game">@Lang.Singapore4DResult</span>
                </div>
                
                <button class="collapsible">4D</button>
                <div class="collapsible-content">
                    @Html.Raw(Question.h1)
                </div>
                <button class="collapsible">3D</button>
                <div class="collapsible-content">
                    @Html.Raw(Question.h2)
                </div>
                <button class="collapsible">2D</button>
                <div class="collapsible-content">
                    @Html.Raw(Question.h3)
                </div>

                
            </section>
        </div>
    </div>
</div>

<script>
     
    var coll = document.getElementsByClassName("collapsible");
    var i;

    for (i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function() {
            this.classList.toggle("collapsible-active");
            var content = this.nextElementSibling;
            if (content.style.maxHeight){
                content.style.maxHeight = null;
            } else {
                content.style.maxHeight = content.scrollHeight + "px";
            } 
        });
    }

    
</script>


<script>
    stopLoading();
</script>