<?php

/**
 * Avatar section for WooCommerce My Account > Account Details.
 *
 * @var string $current_src Current avatar URL or gravatar.
 * @var array  $avatar_data Avatar data from arraysubs_get_user_avatar().
 *
 * @package ArraySubs\Features\ProfileFields
 * @since 1.9.0
 */

defined('ABSPATH') || exit;
?>

<div class="arraysubs-avatar-section" id="arraysubs-avatar-section">
    <h3><?php esc_html_e('Profile Photo', 'arraysubs'); ?></h3>

    <div class="arraysubs-avatar-section__preview">
        <img
            src="<?php echo esc_url($current_src); ?>"
            alt="<?php esc_attr_e('Avatar', 'arraysubs'); ?>"
            class="arraysubs-avatar-section__image"
            id="arraysubs-avatar-preview"
            width="96"
            height="96" />
    </div>

    <div class="arraysubs-avatar-section__actions" id="arraysubs-avatar-actions">
        <label class="button arraysubs-avatar-section__upload-btn" id="arraysubs-avatar-upload-btn">
            <?php
            if ($avatar_data['has_avatar']) {
                esc_html_e('Change Avatar', 'arraysubs');
            } else {
                esc_html_e('Upload Avatar', 'arraysubs');
            }
            ?>
            <input
                type="file"
                id="arraysubs-avatar-input"
                class="arraysubs-avatar-section__file-input"
                accept="image/*" />
        </label>

        <?php if ($avatar_data['has_avatar']) : ?>
            <button type="button" class="button arraysubs-avatar-section__remove-btn" id="arraysubs-avatar-remove-btn">
                <?php esc_html_e('Remove Avatar', 'arraysubs'); ?>
            </button>
        <?php endif; ?>
    </div>

    <p class="arraysubs-avatar-section__help" id="arraysubs-avatar-status"></p>
</div>