@model KernelRecordsMVC.Application.ViewModels.ProfileViewModel

@{
    ViewData["Title"] = "My Profile";
}

<div class="profile-page">

    <div class="profile-header">

        <span class="page-eyebrow">
            ACCOUNT
        </span>

        <h1>My Profile</h1>

        <p>
            Manage your account information.
        </p>

    </div>


    @if (TempData["Success"] != null)
    {
        <div class="profile-alert success">
            @TempData["Success"]
        </div>
    }


    <div class="profile-layout">

        <!-- =================================================
             ACCOUNT SUMMARY
             ================================================= -->

        <aside class="profile-sidebar">

            <div class="profile-avatar">
                @(string.IsNullOrWhiteSpace(Model.Username)
                    ? "?"
                    : Model.Username.Substring(0, 1).ToUpper())
            </div>

            <h2>
                @Model.Username
            </h2>

            <p>
                @Model.Email
            </p>

            <div class="profile-member">

                <span>MEMBER SINCE</span>

                <strong>
                    @Model.DateCreated.ToString("MMMM yyyy")
                </strong>

            </div>


            <div class="profile-points">

                <span>REWARD POINTS</span>

                <strong>
                    @Model.PointsCollected
                </strong>

            </div>

        </aside>


        <!-- =================================================
             EDIT PROFILE
             ================================================= -->

        <section class="profile-card">

            <div class="profile-card-header">

                <div>

                    <span class="section-label">
                        PERSONAL INFORMATION
                    </span>

                    <h2>Account Details</h2>

                </div>

            </div>


            <form asp-action="Profile"
                  method="post"
                  class="profile-form">

                @Html.AntiForgeryToken()


                <div asp-validation-summary="ModelOnly"
                     class="validation-summary">
                </div>


                <!-- USERNAME -->

                <div class="profile-field">

                    <label asp-for="Username">
                        Username
                    </label>

                    <input asp-for="Username"
                           type="text"
                           readonly />

                    <small>
                        Your username cannot be changed.
                    </small>

                </div>


                <!-- EMAIL -->

                <div class="profile-field">

                    <label asp-for="Email">
                        Email
                    </label>

                    <input asp-for="Email" />

                    <span asp-validation-for="Email"
                          class="field-error">
                    </span>

                </div>


                <!-- PHONE -->

                <div class="profile-field">

                    <label asp-for="TelephoneNumber">
                        Telephone Number
                    </label>

                    <input asp-for="TelephoneNumber"
                           placeholder="Enter your phone number" />

                    <span asp-validation-for="TelephoneNumber"
                          class="field-error">
                    </span>

                </div>


                <!-- ADDRESS -->

                <div class="profile-field">

                    <label asp-for="ShippingAddress">
                        Shipping Address
                    </label>

                    <textarea asp-for="ShippingAddress"
                              rows="4"
                              placeholder="Enter your shipping address">
                    </textarea>

                    <span asp-validation-for="ShippingAddress"
                          class="field-error">
                    </span>

                </div>


                <div class="profile-form-actions">

                    <button type="submit"
                            class="store-button primary">

                        Save Changes

                    </button>

                    <a asp-controller="Home"
                       asp-action="Index"
                       class="store-button secondary">

                        Cancel

                    </a>

                </div>

            </form>

        </section>

    </div>

</div>


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