<div class="my-details" data-module="myDetails" data-user-profile-endpoint="{{userProfileEndpoint}}" data-save-user-profile-endpoint="{{saveUserProfileEndpoint}}" data-auth-client-id="{{auth.clientId}}" data-auth-connection="{{auth.connection}}" data-auth-endpoint="{{auth.endpoint}}">
    <div class="my-details__inner">
        <h3 class="my-details__title">{{title}}</h3>
        <p class="my-details__description">{{description}}</p>
        <div class="my-details__form-container">
            <div class="my-details__form-row">
                <div class="my-details__form-col my-details__form-col--two-col">
                    <label for="first-name" class="my-details__label">{{firstnameLabel}}</label>
                    <input type="text" id="first-name" class="my-details__input js-firstname">
                </div>
                <div class="my-details__form-col my-details__form-col--two-col">
                    <label for="last-name" class="my-details__label">{{lastnameLabel}}</label>
                    <input type="text" id="last-name" class="my-details__input js-lastname">
                </div>
            </div>
            <div class="my-details__form-row">
                <div class="my-details__form-col my-details__form-col--input-locked">
                    <label for="email-address" class="my-details__label">{{emailAddressLabel}}</label>
                    <input type="email" id="email-address" class="my-details__input js-emailaddress" disabled>
                </div>
                <div class="my-details__form-col my-details__form-col--tooltip-col">
                    {{{emailAddressTooltip}}}
                </div>
            </div>
            <div class="my-details__form-row my-details__form-row--password">
                <div class="my-details__form-col my-details__form-col--input-locked">
                    <label for="user-password" class="my-details__label">{{passwordLabel}}</label>
                    <input type="password" id="user-password" value="{{passwordFieldDefaultValue}}" class="my-details__input" disabled>
                </div>
            </div>
            <div class="my-details__form-row">
                <div class="my-details__form-col">
                    {{> @cp-button-secondary target=resetPasswordButton.target url=resetPasswordButton.url text=resetPasswordButton.text cssClasses="js-reset-password" }}
                    <span class="my-details__reset-success-text js-reset-success-text">{{resetSuccessText}}</span>
                </div>
            </div>
            <div class="my-details__form-row">
                <div class="my-details__form-col">
                    {{> @cp-button-primary target=saveButton.target url=saveButton.url text=saveButton.text cssClasses="js-save" }}
                </div>
            </div>
        </div>
    </div>
    {{#if successModal}}
    {{> @cp-generic-modal successModal }}
    {{/if}}
    {{#if errorModal}}
    {{> @cp-generic-modal errorModal }}
    {{/if}}
</div>