{#
 # Edit Account Form (Bootstrap 5 Override)
 #
 # Account details editing form with card-based sections
 # for personal information and password change.
 #
 # Expected context:
 #   user - WP_User object
 #
 # WooCommerce PHP equivalent: myaccount/form-edit-account.php
 #
 # @package WcBootstrap
 # @since 0.1.0
 #}

{{ do_action('woocommerce_before_edit_account_form') }}

<form class="woocommerce-EditAccountForm edit-account" action="" method="post" {{ do_action('woocommerce_edit_account_form_tag') }}>

    {{ do_action('woocommerce_edit_account_form_start') }}

    <div class="card shadow-sm mb-4">
        <div class="card-header">
            <h2 class="h5 mb-0">
                <i class="bi bi-person me-1" aria-hidden="true"></i>
                {{ __('Personal information') }}
            </h2>
        </div>
        <div class="card-body">
            <div class="row g-3 mb-3">
                <div class="col-sm-6">
                    <label for="account_first_name" class="form-label">
                        {{ __('First name') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
                        <span class="visually-hidden">{{ __('Required') }}</span>
                    </label>
                    <input type="text"
                           class="form-control"
                           name="account_first_name"
                           id="account_first_name"
                           autocomplete="given-name"
                           value="{{ user.first_name|esc_attr }}"
                           required
                           aria-required="true" />
                </div>
                <div class="col-sm-6">
                    <label for="account_last_name" class="form-label">
                        {{ __('Last name') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
                        <span class="visually-hidden">{{ __('Required') }}</span>
                    </label>
                    <input type="text"
                           class="form-control"
                           name="account_last_name"
                           id="account_last_name"
                           autocomplete="family-name"
                           value="{{ user.last_name|esc_attr }}"
                           required
                           aria-required="true" />
                </div>
            </div>

            <div class="mb-3">
                <label for="account_display_name" class="form-label">
                    {{ __('Display name') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
                    <span class="visually-hidden">{{ __('Required') }}</span>
                </label>
                <input type="text"
                       class="form-control"
                       name="account_display_name"
                       id="account_display_name"
                       aria-describedby="account_display_name_description"
                       value="{{ user.display_name|esc_attr }}"
                       required
                       aria-required="true" />
                <div id="account_display_name_description" class="form-text">
                    {{ __('This will be how your name will be displayed in the account section and in reviews') }}
                </div>
            </div>

            <div class="mb-0">
                <label for="account_email" class="form-label">
                    {{ __('Email address') }}&nbsp;<span class="text-danger" aria-hidden="true">*</span>
                    <span class="visually-hidden">{{ __('Required') }}</span>
                </label>
                <input type="email"
                       class="form-control"
                       name="account_email"
                       id="account_email"
                       autocomplete="email"
                       value="{{ user.user_email|esc_attr }}"
                       required
                       aria-required="true" />
            </div>

            {{ do_action('woocommerce_edit_account_form_fields') }}
        </div>
    </div>

    <div class="card shadow-sm mb-4">
        <div class="card-header">
            <h2 class="h5 mb-0">
                <i class="bi bi-shield-lock me-1" aria-hidden="true"></i>
                {{ __('Password change') }}
            </h2>
        </div>
        <div class="card-body">
            <div class="mb-3">
                <label for="password_current" class="form-label">
                    {{ __('Current password (leave blank to leave unchanged)') }}
                </label>
                <input type="password"
                       class="form-control"
                       name="password_current"
                       id="password_current"
                       autocomplete="off" />
            </div>

            <div class="mb-3">
                <label for="password_1" class="form-label">
                    {{ __('New password (leave blank to leave unchanged)') }}
                </label>
                <input type="password"
                       class="form-control"
                       name="password_1"
                       id="password_1"
                       autocomplete="off" />
            </div>

            <div class="mb-0">
                <label for="password_2" class="form-label">
                    {{ __('Confirm new password') }}
                </label>
                <input type="password"
                       class="form-control"
                       name="password_2"
                       id="password_2"
                       autocomplete="off" />
            </div>
        </div>
    </div>

    {{ do_action('woocommerce_edit_account_form') }}

    <div class="mt-3">
        {{ wp_nonce_field('save_account_details', 'save-account-details-nonce') }}
        <button type="submit" class="btn btn-primary" name="save_account_details" value="{{ __('Save changes') }}">
            <i class="bi bi-check-lg me-1" aria-hidden="true"></i>
            {{ __('Save changes') }}
        </button>
        <input type="hidden" name="action" value="save_account_details" />
    </div>

    {{ do_action('woocommerce_edit_account_form_end') }}
</form>

{{ do_action('woocommerce_after_edit_account_form') }}