<div id="edit-profile" v-cloak>
    <div class="container-fluid px-5">

        <div class="d-flex justify-content-between">
            <div class="d-flex align-self-center">
                <h3>
                    <%= __("Update my account") %>
                </h3>

                <a class="btn btn-light ms-2" href="/account">
                    <%= __('Go Back'); %>
                        <span class="fa fa-arrow-left"></span>
                </a>
            </div>
        </div>

        <hr>

        <account-notification-banner></account-notification-banner>
        <cloud-error v-if="cloudError === 'emailAlreadyInUse'">
            <%= __('There is already an account') %>
        </cloud-error>

        <cloud-error v-if="cloudError"></cloud-error>
    </div>

    <div class="container">
        <ajax-form action="updateProfile" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-data="formData"
            :form-rules="formRules" :form-errors.sync="formErrors" @submitted="submittedForm()">

            <div class="col-sm-7">
                <div class="form-group">
                    <label for="full-name">
                        <%= __('Full name') %>
                    </label>
                    <input class="form-control" id="full-name" name="full-name" type="text"
                        :class="[formErrors.fullName ? 'is-invalid' : '']" v-model.trim="formData.fullName"
                        placeholder="Sturgis P. Sturgeon" autocomplete="name" focus-first>
                    <div class="invalid-feedback" v-if="formErrors.fullName">
                        <%= __('Please enter your full name') %>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label for="email-address">
                        <%= __('Email address') %>
                    </label>
                    <input class="form-control" id="email-address" name="email-address" type="email"
                        :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress"
                        placeholder="sturgeon@example.com" autocomplete="email">
                    <div class="invalid-feedback" v-if="formErrors.emailAddress">
                        <%= __('Please enter a valid email address') %>
                    </div>
                </div>
            </div>

            <div class="col-sm-2">
                <div class="form-group">
                    <label for="profile">
                        <%= __('Role') %>
                    </label>
                    <span class="form-control"> {{me.profile?me.profile:"<%=__('Visitor')%>"}} </span>
                </div>
            </div>

            <ajax-button type="submit" :syncing="syncing" class="btn btn-success mt-4">
                <span class="fa fa-save pe-2"></span>
                <%= __('Save') %>
            </ajax-button>

        </ajax-form>
    </div>
</div>
<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>