<?php
// @codingStandardsIgnoreFile
/** @var \Magento\Customer\Block\Form\Edit $block */
?>
<?php $customer = $block->getCustomer() ?>

<div class="cs-dashboard__block">
    <form
        class="cs-form | form form-edit-account"
        action="<?php /* @escapeNotVerified */ echo $block->getUrl('customer/account/editPost') ?>"
        method="post"
        id="form-validate"
        enctype="multipart/form-data"
        data-hasrequired="<?php /* @escapeNotVerified */echo __('* Required Fields') ?>"
        autocomplete="off"
    >
        <fieldset class="cs-form__fieldset cs-form__fieldset--level_1 | info">
            <?php echo $block->getBlockHtml('formkey') ?>

            <?php $gender = $block->getLayout()->createBlock('Magento\Customer\Block\Widget\Gender') ?>
            <?php if ($gender->isEnabled()): ?>
                <?php echo $gender->setGender($customer->getGender())->toHtml() ?>
            <?php endif ?>

            <?php echo $block->getLayout()->createBlock('Magento\Customer\Block\Widget\Name')->setObject($customer)->toHtml() ?>

            <?php $dob = $block->getLayout()->createBlock('Magento\Customer\Block\Widget\Dob') ?>
            <?php $taxvat = $block->getLayout()->createBlock('Magento\Customer\Block\Widget\Taxvat') ?>

            <?php if ($dob->isEnabled()): ?>
                <?php echo $dob->setDate($customer->getDob())->toHtml() ?>
            <?php endif ?>

            <?php if ($taxvat->isEnabled()): ?>
                <?php echo $taxvat->setTaxvat($customer->getTaxvat())->toHtml() ?>
            <?php endif ?>

            <ul class="cs-list cs-list--inline">
                <li class="cs-list__item">
                    <div class="cs-input cs-input--type-checkbox | field">
                        <input
                            type="checkbox"
                            name="change_email"
                            id="change-email"
                            data-role="change-email"
                            value="1"
                            title="<?php /* @escapeNotVerified */echo __('Change Email') ?>"
                            class="cs-input__checkbox | checkbox"
                        />
                        <label class="cs-input__label" for="change-email">
                            <?php /* @escapeNotVerified */echo __('Change Email') ?>
                        </label>
                    </div>
                </li>
                <li class="cs-list__item">
                    <div class="cs-input cs-input--type-checkbox | field">
                        <input
                            type="checkbox"
                            name="change_password"
                            id="change-password"
                            data-role="change-password"
                            value="1"
                            title="<?php /* @escapeNotVerified */echo __('Change Password') ?>"
                            <?php if ($block->getChangePassword()): ?> checked="checked"<?php endif; ?>
                            class="cs-input__checkbox | checkbox"
                        />
                        <label class="cs-input__label" for="change-password">
                            <?php /* @escapeNotVerified */echo __('Change Password') ?>
                        </label>
                    </div>
                </li>
            </ul>


        </fieldset>


        <fieldset class="cs-form__fieldset cs-form__fieldset--level_2 | password" data-container="change-email-password" style="display: none;">

            <legend class="cs-title-block cs-title-block--bordered">
                <span
                    class="cs-title-block__span | cs-t-headline cs-t-headline--size_2 cs-t-headline--look_light"
                    data-title="change-email-password"
                >
                    <?php /* @escapeNotVerified */ echo __('Change Email and Password') ?>
                </span>
            </legend>
            <br>

            <div class="cs-input | cs-form__field |  email required" data-container="change-email">
                <label class="cs-input__label" for="email"><span><?php /* @escapeNotVerified */ echo __('Email') ?></span></label>
                <div class="cs-input__control">
                    <input
                        type="email"
                        name="email"
                        id="email"
                        autocomplete="email"
                        data-input="change-email"
                        value="<?php echo $block->escapeHtml($customer->getEmail()) ?>"
                        title="<?php /* @escapeNotVerified */ echo __('Email') ?>"
                        class="cs-input__input"
                        data-validate="{required:true, 'validate-email':true}"
                    />
                </div>
            </div>

            <div class="cs-input | cs-form__field |  password current required">
                <label class="cs-input__label" for="current-password">
                    <span><?php /* @escapeNotVerified */ echo __('Current Password') ?></span>
                </label>
                <div class="cs-input__control">
                    <input
                        type="password"
                        class="cs-input__input"
                        name="current_password"
                        id="current-password"
                        data-input="current-password"
                        autocomplete="off"
                    />
                </div>
            </div>

            <div
                class="cs-input | cs-form__field | new password required"
                data-container="new-password"
                data-mage-init='{"passwordStrengthIndicator": {}}'
            >
                <label class="cs-input__label" for="password">
                    <span><?php /* @escapeNotVerified */ echo __('New Password') ?></span>
                </label>

                <div class="cs-input__control">
                    <input
                        type="password"
                        class="cs-input__input"
                        name="password"
                        id="password"
                        data-password-min-length="<?php echo $block->escapeHtml($block->getMinimumPasswordLength()) ?>"
                        data-password-min-character-sets="<?php echo $block->escapeHtml($block->getRequiredCharacterClassesNumber()) ?>"
                        data-input="new-password"
                        data-validate="{required:true, 'validate-customer-password':true}"
                        autocomplete="off"
                    />
                    <div id="password-strength-meter-container" data-role="password-strength-meter">
                        <div id="password-strength-meter" class="password-strength-meter">
                            <?php /* @escapeNotVerified */
                            echo __('Password Strength'); ?>:
                            <span
                                id="password-strength-meter-label"
                                data-role="password-strength-meter-label"
                                class="password-strength-meter__label"
                            >
                                <?php /* @escapeNotVerified */ echo __('No Password'); ?>
                            </span>

                            <div class="password-strength-meter__icons-wrapper">
                                <svg class="password-strength-meter__icon">
                                    <use xlink:href="#rhomb"></use>
                                </svg>
                                <svg class="password-strength-meter__icon">
                                    <use xlink:href="#rhomb"></use>
                                </svg>
                                <svg class="password-strength-meter__icon">
                                    <use xlink:href="#rhomb"></use>
                                </svg>
                                <svg class="password-strength-meter__icon">
                                    <use xlink:href="#rhomb"></use>
                                </svg>
                                <svg class="password-strength-meter__icon">
                                    <use xlink:href="#rhomb"></use>
                                </svg>
                                <svg class="password-strength-meter__icon">
                                    <use xlink:href="#rhomb"></use>
                                </svg>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
            <div class="cs-input | cs-form__field | confirm password required" data-container="confirm-password">
                <label class="cs-input__label" for="password-confirmation">
                    <span><?php /* @escapeNotVerified */ echo __('Confirm New Password') ?></span>
                </label>
                <div class="control">
                    <input
                        type="password"
                        class="cs-input__input"
                        name="password_confirmation"
                        id="password-confirmation"
                        data-input="confirm-password"
                        autocomplete="off"
                    />
                </div>
            </div>
            <?php echo $block->getChildHtml('form_additional_info'); ?>
        </fieldset>


        <div class="cs-form__buttons">
            <button
                type="submit" class="cs-button cs-button--type_long cs-button--type_wide-mobile cs-button--look_default"
                title="<?php /* @escapeNotVerified */ echo __('Save') ?>"
            >
                <span class="cs-button__span"><?php /* @escapeNotVerified */ echo __('Save') ?></span>
                <svg class="cs-button__icon">
                    <use xlink:href="#arrow_next"></use>
                </svg>
            </button>
        </div>
    </form>
</div>

<script>
    require( [
        "jquery",
        "mage/mage",
        "mage/validation"
    ], function( $ ) {
        var dataForm = $( '#form-validate' );
        var ignore = <?php /* @escapeNotVerified */ echo $dob->isEnabled() ? '\'input[id$="full"]\'' : 'null'; ?>;

        dataForm.mage( 'validation', {
            <?php if ($dob->isEnabled()): ?>
            errorPlacement: function( error, element ) {
                if ( element.prop( 'id' ).search( 'full' ) !== -1 ) {
                    var dobElement = $( element ).parents( '.customer-dob' ),
                        errorClass = error.prop( 'class' );
                    error.insertAfter( element.parent() );
                    dobElement.find( '.validate-custom' ).addClass( errorClass )
                        .after( '<div class="' + errorClass + '"></div>' );
                }
                else {
                    error.appendTo( element.parents( '.cs-input' ) );
                }
            },
            ignore: ':hidden:not(' + ignore + ')'
            <?php else: ?>
            ignore: ignore ? ':hidden:not(' + ignore + ')' : ':hidden'
            <?php endif ?>
        } );
    } );
</script>
<script type="text/x-magento-init">
    {
        "[data-role=change-email], [data-role=change-password]": {
            "changeEmailPassword": {
                "titleChangeEmail": "<?php /* @escapeNotVerified */ echo __('Change Email') ?>",
                "titleChangePassword": "<?php /* @escapeNotVerified */ echo __('Change Password') ?>",
                "titleChangeEmailAndPassword": "<?php /* @escapeNotVerified */ echo __('Change Email and Password') ?>"
            }
        }
    }

</script>
