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

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

@model ProfileHowToPlay_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.how_to_play.ToUpper()})
        </div>
    </div>


    <div class="content-wrapper buy-ticket-container" style="margin-top:50px;">
        <div class="content-body">
            <section class="flexbox-container">

                <div class="row tabs-style" style="    margin-top: 30px;">

                    <div class="col-3 tab-style">
                        <input type="radio" id="tab-1" name="tab-group-1" @(Model.termType == Constants.BOLET_CODE ? "checked" : "")>
                        <label for="tab-1">
                            <a href="@ViewBag.MyConfig.MyValue/Profile/HowToPlay?termType=@Constants.BOLET_CODE">
                                BOLET
                            </a>
                        </label>
                    </div>

                    <div class="col-3 tab-style">
                        <input type="radio" id="tab-2" name="tab-group-1" @(Model.termType == Constants.MAYRAJ_CODE ? "checked" : "")>
                        <label for="tab-2">

                            <a href="@ViewBag.MyConfig.MyValue/Profile/HowToPlay?termType=@Constants.MAYRAJ_CODE">
                                MARYAJ
                            </a>
                        </label>
                    </div>

                    <div class="col-3 tab-style">
                        <input type="radio" id="tab-3" name="tab-group-1" @(Model.termType == Constants.LOTTO3_CODE ? "checked" : "")>
                        <label for="tab-3">
                            <a href="@ViewBag.MyConfig.MyValue/Profile/HowToPlay?termType=@Constants.LOTTO3_CODE">
                                LOTTO3
                            </a>
                        </label>
                    </div>

                    <div class="col-3 tab-style">
                        <input type="radio" id="tab-3" name="tab-group-1" @(Model.termType == Constants.BOULCHANS_CODE ? "checked" : "")>
                        <label for="tab-3">
                            <a href="@ViewBag.MyConfig.MyValue/Profile/HowToPlay?termType=@Constants.BOULCHANS_CODE">
                                BOULCHANS
                            </a>
                        </label>
                    </div>
                </div>



                @{
                    if (Model.termType == Constants.BOLET_CODE)
                    {
                        <div style="    margin: 10px;">
                            @Html.Raw(Question.p1)
                        </div>
                    }
                    else if (Model.termType == Constants.MAYRAJ_CODE)
                    {
                        <div style="    margin: 10px;">

                            @Html.Raw(Question.p2)
                        </div>
                    }
                    else if (Model.termType == Constants.LOTTO3_CODE)
                    {
                        <div style="    margin: 10px;">

                            @Html.Raw(Question.p3)
                        </div>
                    }
                    else if (Model.termType == Constants.BOULCHANS_CODE)
                    {
                        <div style="    margin: 10px;">

                            @Html.Raw(Question.p4)
                        </div>
                    }
                }
            </section>
        </div>
    </div>
</div>

<script>
    stopLoading();
</script>