@model PageModel
@if (Model.IsPasswordProtected)
{
    <script asp-location="Footer" asp-order="300">
        document.getElementById('button-password').addEventListener('click', function () {
            var postData = {
                id: document.getElementById("@Html.IdFor(model => model.Id)").value,
                password: document.getElementById('password').value
            };
            addAntiForgeryToken(postData);

            var bodyFormData = new FormData();
            bodyFormData.append('id', document.getElementById("@Html.IdFor(model => model.Id)").value);
            bodyFormData.append('password', document.getElementById('password').value);
            bodyFormData.append('__RequestVerificationToken', document.querySelector('input[name=__RequestVerificationToken]').value);
            axios({
                method: 'post',
                url: '@Url.RouteUrl("PageAuthenticate")',
                data: bodyFormData,
                headers: { 'Content-Type': 'multipart/form-data' }
            }).then(function (response) {
                if (response.data.Authenticated) {
                    document.querySelector('#ph-page #ph-title h1').innerHTML = response.data.Title;
                    if (document.querySelector('#ph-page #ph-title h1').innerText == '') {
                        document.getElementById('ph-title').style.display = "none";
                    }
                    document.querySelector('#ph-page .page-body').innerHTML = response.data.Body;
                    document.getElementById('ph-password').style.display = "none";
                    document.getElementById('ph-page').style.display = "block";
                    //$.validator.unobtrusive.parse('#ph-page');
                }
                else {
                    document.getElementById('password-error').innerText = response.data.Error;
                }
            }) 
        });

        document.getElementById('ph-page').style.display = "none";
    </script>
    <div class="page-password" id="ph-password-@Model.Id">
        <form asp-route="PageAuthenticate" method="post">
            <input asp-for="Id" type="hidden" />
            <div class="enter-password-title">
                @Loc["Page.EnterPassword"]
            </div>
            <div class="enter-password-form">
                @Html.Password("password", null, new { id = "password-" + @Model.Id, @class = "form-control mt-1" })
                <b-button id="button-password" variant="secondary" class="page-password-button mt-1 mb-1">
                    @Loc["Page.Button"]
                </b-button>
            </div>
            <div class="password-error">
                <span id="password-error-@Model.Id"></span>
            </div>
        </form>
    </div>


    <div class="page-block" id="ph-page-@Model.Id">
        <div class="page-block-title" id="ph-title-@Model.Id">
            <h2>@Model.Title</h2>
        </div>
        <div class="col-12">
            @Html.Raw(Model.Body)
        </div>
    </div>
}
else
{
    <div class="generalMarginSupporter">
        @if (!String.IsNullOrEmpty(Model.Title))
        {
            <h1 class="generalTitle h2 text-sm-center">@Model.Title</h1>
        }
        <div class="page-block-body pt-3">
            @Html.Raw(Model.Body)
        </div>
    </div>
}