@model  Chruch.Net.Models.IceBreak.WhoIsSpyGameRoom
@{
    Layout = "~/Views/Shared/_LayoutEmpty.cshtml";
}
<section class="g-flex-centered g-bg-pos-center g-bg-img-hero g-pos-rel g-z-index-1 g-overflow-hidden g-height-100vh" style="background-image: url(/Images/IceBreak/img14.jpg);" data-calc-target="#js-header">
    <div class="g-pos-abs g-top-0 g-left-0" data-animation="fadeInDown" data-animation-delay="100" data-animation-duration="1500">
        <img class="img-fluid" src="/Images/IceBreak/img15.png" alt="Image Description">
    </div>
    <div class="g-pos-abs g-bottom-0 g-right-0" data-animation="fadeInUp" data-animation-delay="1800" data-animation-duration="1500">
        <img class="img-fluid" src="/Images/IceBreak/img16.png" alt="Image Description">
    </div>
    <div class="container text-center g-z-index-1">
        <div class="mb-4">
            <h1 class="h2 d-inline-block g-color-black g-font-weight-700 g-font-size-40 g-font-size-75--md text-uppercase g-line-height-1" data-animation="fadeInDown" data-animation-delay="1000" data-animation-duration="1500">誰</h1>
            <h2 class="h2 d-inline-block g-color-black g-font-weight-700 g-font-size-40 g-font-size-75--md text-uppercase g-line-height-1" data-animation="fadeInDown" data-animation-delay="1200" data-animation-duration="1500">是</h2>
            <h2 class="h2 d-inline-block g-color-red g-font-weight-700 g-font-size-40 g-font-size-75--md text-uppercase g-line-height-1" data-animation="fadeInDown" data-animation-delay="1400" data-animation-duration="1500">臥底</h2>
        </div>
        <div class="mb-4">
            <h1 class="h2 d-inline-block g-color-black g-font-weight-700 g-font-size-40 g-font-size-75--md text-uppercase g-line-height-1" data-animation="fadeInDown" data-animation-delay="1000" data-animation-duration="1500">遊戲房編號：</h1>
            <h2 class="h2 d-inline-block g-color-red g-font-weight-700 g-font-size-40 g-font-size-75--md text-uppercase g-line-height-1" data-animation="fadeInDown" data-animation-delay="1400" data-animation-duration="1500">@Model.Id</h2>
        </div>
        <div class="mx-auto g-max-width-600 g-overflow-hidden">
            <p class="g-color-black g-font-size-18 g-font-size-24--md g-mb-40" data-animation="fadeInDown" data-animation-delay="1600" data-animation-duration="1500">
                遊戲規則:
                <br />
                1.blalbalbalbl
                <br />
                1.blalbalbalbl
                <br />
                1.blalbalbalbl
                <br />
                1.blalbalbalbl
            </p>
        </div>
        <div data-animation="fadeInDown" data-animation-delay="2000" data-animation-duration="1500">

            @using (Html.BeginForm())
            {
                <div class="row">
                    <div class="col">
                        <label class="g-font-weight-700 g-mb-20 h5">遊戲房編號</label>
                        @Html.DisplayFor(m => m.Id, new { @class = "border-0 form-control g-color-gray-dark-v4 g-placeholder-gray-dark-v3 g-px-20" })
                    </div>

                    <div class="col">

                        <label class="g-font-weight-700 g-mb-20 h5">臥底人數</label>
                        @Html.TextBoxFor(m => m.SpyAmount, new { @class = "border-0 form-control g-color-gray-dark-v4 g-placeholder-gray-dark-v3 g-px-20" })
                    </div>
                    <div class="col">

                        <label class="g-font-weight-700 g-mb-20 h5">空白人數</label>
                        @Html.TextBoxFor(m => m.EmptyAmount, new { @class = "border-0 form-control g-color-gray-dark-v4 g-placeholder-gray-dark-v3 g-px-20" })
                    </div>
                    <div class="col">

                        <button class="btn btn-lg u-btn-primary g-font-weight-600 g-font-size-20 text-uppercase g-rounded-50 mx-2 g-px-25 g-py-15" type="submit">開始遊戲</button>
                    </div>
                </div>

            }

        </div>
        <div id="playerList"></div>
    </div>
</section>

@section scripts
{
    <script>
        function moveItem() {
            $( "#playerList" ).load( "@Url.Action("WhoIsSpyGetPlayerList")");
        }

        $(function() {

            setInterval(moveItem, 2000);
        });
    </script>
}