@page
@model WebApp.Pages.User.SettingsModel

<div class="card bg-glass">
    <div class="card-body px-4 py-5 px-md-5">
        <form method="post">
            <!-- 2 column grid layout with text inputs for the first and last names -->
            <div class="row">
                <div class="col-md-6 mb-4">
                    <div data-mdb-input-init class="form-outline">
                        <input asp-for="UserModel.FirstName" type="text" id="firstname" class="form-control" />
                        <label class="form-label" for="firstname">First name</label>
                    </div>
                </div>
                <div class="col-md-6 mb-4">
                    <div data-mdb-input-init class="form-outline">
                        <input asp-for="UserModel.SecondName" type="text" id="lastname" class="form-control" />
                        <label class="form-label" for="lastname">Last name</label>
                    </div>
                </div>
            </div>

            <!-- Email input -->
            <div data-mdb-input-init class="form-outline mb-4">
                <input asp-for="UserModel.Email" type="email" id="email" class="form-control" />
                <label class="form-label" for="email">Email address</label>
            </div>

            <!-- Password input -->
            <div data-mdb-input-init class="form-outline mb-4">
                <input asp-for="UserModel.Password" type="password" id="password" class="form-control" />
                <label class="form-label" for="password">Password</label>
            </div>
            
            <!-- Birthday input -->
            <div data-mdb-input-init class="form-outline mb-4">
                <input asp-for="UserModel.Birthday" type="date" id="birthday" class="form-control" />
                <label class="form-label" for="birthday">Birthday</label>
            </div>
            
            <!-- Sending Policy input -->
            <div class="form-outline mb-4">
                <input asp-for="UserModel.OnlyImportantMails" type="checkbox" id="policy" />
                <label class="form-label" for="policy">Send only important mails</label>
            </div>

            <!-- Hidden inputs -->
            <input type="hidden" asp-for="UserModel.Id" />
            <input type="hidden" asp-for="UserModel.Role.Id" />

            <!-- Submit button -->
            <button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block mb-4">
                Save settings
            </button>
        </form>
        <form asp-page-handler="DeleteProfile" method="post">
            <button class="btn btn-danger btn-block mb-4">Delete this account permanently</button>
        </form>
    </div>
</div>