@model CustomerAvatarModel
@{
    Layout = "_ColumnsTwo";

    //title
    NopHtml.AddTitleParts(T("PageTitle.Account").Text);
    //page class
    NopHtml.AppendPageCssClassParts("html-account-page");
    NopHtml.AppendPageCssClassParts("html-avatar-page");
}
@section left
{
    @await Component.InvokeAsync(typeof(CustomerNavigationViewComponent), new { selectedTabId = CustomerNavigationEnum.Avatar })
}

<form asp-route="CustomerAvatar" method="post" enctype="multipart/form-data">
    <div class="page account-page avatar-page">
        <div class="page-title">
            <h1>@T("Account.MyAccount") - @T("Account.Avatar")</h1>
        </div>
        <div class="page-body">
            @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.CustomerAvatarTop, additionalData = Model })
            <div asp-validation-summary="ModelOnly" class="message-error"></div>
            <div class="fieldset">
                @if (!string.IsNullOrEmpty(Model.AvatarUrl))
                {
                    <div class="image">
                        <img src="@(Model.AvatarUrl)" alt="avatar" />
                    </div>
                }
                <input name="uploadedFile" accept="image/jpeg, image/gif" type="file" />
            </div>
            <div class="buttons">
                <button type="submit" name="upload-avatar" class="button-1 upload-avatar-button">@T("Common.Upload")</button>
                @if (!string.IsNullOrEmpty(Model.AvatarUrl))
                {
                    <button type="submit" name="remove-avatar" class="button-2 remove-avatar-button">@T("Account.Avatar.RemoveAvatar")</button>
                }
            </div>
            <div class="info">
                @T("Account.Avatar.UploadRules")
            </div>
            @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.CustomerAvatarBottom, additionalData = Model })
        </div>
    </div>
</form>