@page
@model IndexModel
@{
    ViewData["Title"] = "Profile";
    ViewData["ActivePage"] = ManageNavPages.Index;
}

<h4>@ViewData["Title"]</h4>
<partial name="_StatusMessage" model="Model.StatusMessage" />


<form id="profile-form" method="post" enctype="multipart/form-data">

    <div class="row">

        <div class="col-md-6">

            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Username"></label>
                <input asp-for="Username" class="form-control" disabled />
            </div>
            <div class="form-group">
                <label asp-for="Input.Name"></label>
                <input asp-for="Input.Name" class="form-control" />
            </div>
            <div class="form-group">
                <label asp-for="Input.DOB"></label>
                <input asp-for="Input.DOB" class="form-control" />
            </div>
            <div class="form-group">
                <label asp-for="Input.PhoneNumber"></label>
                <input asp-for="Input.PhoneNumber" class="form-control" />
                <span asp-validation-for="Input.PhoneNumber" class="text-danger"></span>
            </div>
            <button id="update-profile-button" type="submit" class="btn btn-primary">Save</button>

        </div>

        <div class="col-md-6">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Input.ProfilePicture" style="width: 100%;"></label>
                @if (Model.Input.ProfilePicture != null)
                {
                    <img id="profilePicture" style="width:350px;height:350px; object-fit:cover" src="data:image/*;base64,@(Convert.ToBase64String(Model.Input.ProfilePicture))">
                }
                else
                {
                    <img id="profilePicture" style="width:350px;height:350px; object-fit:cover" src="">
                }
                <input type="file"
                       accept=".png,.jpg,.jpeg,.gif,.tif"
                       asp-for="Input.ProfilePicture"
                       class="form-control"
                       style="border:0px!important;padding: 0px;padding-top: 10px;padding-bottom: 30px;"
                       onchange="document.getElementById('profilePicture').src = window.URL.createObjectURL(this.files[0])" />
                <span asp-validation-for="Input.ProfilePicture" class="text-danger"></span>
            </div>
        </div>
    </div>
</form>



@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

@*@page
@model IndexModel
@{
    ViewData["Title"] = "Profile";
    ViewData["ActivePage"] = ManageNavPages.Index;
}*@

@*<h3>@ViewData["Title"]</h3>
<partial name="_StatusMessage" for="StatusMessage" />
<div class="row">
    <div class="col-md-6">
        <form id="profile-form" method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger" role="alert"></div>
            <div class="form-floating mb-3">
                <input asp-for="Username" class="form-control" placeholder="Please choose your username." disabled />
                <label asp-for="Username" class="form-label"></label>
            </div>
            <div class="form-floating mb-3">
                <input asp-for="Input.PhoneNumber" class="form-control" placeholder="Please enter your phone number."/>
                <label asp-for="Input.PhoneNumber" class="form-label"></label>
                <span asp-validation-for="Input.PhoneNumber" class="text-danger"></span>
            </div>
            <button id="update-profile-button" type="submit" class="w-100 btn btn-lg btn-primary">Save</button>
        </form>
    </div>
</div>*@

@*@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}*@
