{#
 # My Account Dashboard (Bootstrap 5 Override)
 #
 # Shows a card-based dashboard with welcome greeting and
 # quick action links to each account section.
 #
 # Expected context:
 #   current_user - WP_User object
 #
 # WooCommerce PHP equivalent: myaccount/dashboard.php
 #
 # @package WcBootstrap
 # @since 0.1.0
 #}

{% set quick_actions = [
    { endpoint: 'orders',          icon: 'bi-bag',         label: __('Orders'),          desc: __('View and track your orders') },
    { endpoint: 'edit-address',    icon: 'bi-geo-alt',     label: __('Addresses'),       desc: __('Manage billing & shipping') },
    { endpoint: 'edit-account',    icon: 'bi-person-gear', label: __('Account details'), desc: __('Update name, email & password') },
    { endpoint: 'downloads',       icon: 'bi-download',    label: __('Downloads'),       desc: __('Access purchased files') },
    { endpoint: 'payment-methods', icon: 'bi-credit-card', label: __('Payment methods'), desc: __('Manage saved cards') },
] %}

<div class="card shadow-sm mb-4">
    <div class="card-body d-flex align-items-center gap-3">
        <div class="flex-shrink-0">
            {{ get_avatar(current_user.ID, 64)|raw }}
        </div>
        <div class="flex-grow-1">
            <h2 class="h5 mb-1">
                {{ __('Hello, %s!')|format(current_user.display_name|esc_html) }}
            </h2>
            <p class="text-body-secondary mb-0">
                {{ __('Not %s?')|format(current_user.display_name|esc_html) }}
                <a href="{{ wc_logout_url()|esc_url }}">{{ __('Log out') }}</a>
            </p>
        </div>
    </div>
</div>

<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 mb-4">
    {% for action in quick_actions %}
        <div class="col">
            <a href="{{ wc_get_endpoint_url(action.endpoint)|esc_url }}"
               class="card h-100 text-decoration-none shadow-sm">
                <div class="card-body d-flex align-items-start gap-3">
                    <div class="flex-shrink-0">
                        <span class="d-inline-flex align-items-center justify-content-center
                                     bg-primary-subtle text-primary rounded-3"
                              style="width: 3rem; height: 3rem;"
                              aria-hidden="true">
                            <i class="bi {{ action.icon }} fs-4"></i>
                        </span>
                    </div>
                    <div>
                        <h3 class="h6 mb-1 text-body">{{ action.label }}</h3>
                        <p class="text-body-secondary small mb-0">{{ action.desc }}</p>
                    </div>
                </div>
            </a>
        </div>
    {% endfor %}
</div>

{{ do_action('woocommerce_account_dashboard') }}