{#
 # View Order (Bootstrap 5 Override)
 #
 # Shows details of a specific order on the account page
 # with summary card, status badge, and order notes.
 # HPOS compatible: uses WC_Order methods only.
 #
 # Expected context:
 #   order_id - Order ID
 #   order    - WC_Order object
 #
 # WooCommerce PHP equivalent: myaccount/view-order.php
 #
 # @package WcBootstrap
 # @since 0.1.0
 #}

{% set notes = order.get_customer_order_notes() %}

<div class="card shadow-sm mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h2 class="h5 mb-0">
            {{ __('Order #%s')|format(order.get_order_number()) }}
        </h2>
        {% include 'components/status-badge.html.twig' with { status: order.get_status() } %}
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item d-flex justify-content-between">
            <span class="text-body-secondary">{{ __('Date') }}</span>
            <time datetime="{{ order.get_date_created().date('c')|esc_attr }}">
                {{ wc_format_datetime(order.get_date_created())|esc_html }}
            </time>
        </li>
        <li class="list-group-item d-flex justify-content-between">
            <span class="text-body-secondary">{{ __('Status') }}</span>
            {% include 'components/status-badge.html.twig' with { status: order.get_status() } %}
        </li>
        <li class="list-group-item d-flex justify-content-between">
            <span class="text-body-secondary">{{ __('Total') }}</span>
            <strong>{{ order.get_formatted_order_total()|wp_kses_post }}</strong>
        </li>
        {% if order.get_payment_method_title() %}
            <li class="list-group-item d-flex justify-content-between">
                <span class="text-body-secondary">{{ __('Payment method') }}</span>
                <span>{{ order.get_payment_method_title()|esc_html }}</span>
            </li>
        {% endif %}
    </ul>
</div>

{% if notes %}
    <div class="card shadow-sm mb-4">
        <div class="card-header">
            <h3 class="h6 mb-0">
                <i class="bi bi-chat-left-text me-1" aria-hidden="true"></i>
                {{ __('Order updates') }}
            </h3>
        </div>
        <div class="list-group list-group-flush">
            {% for note in notes %}
                <div class="list-group-item">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <small class="text-body-secondary">
                            <i class="bi bi-clock me-1" aria-hidden="true"></i>
                            {{ date_i18n(__('l jS \\o\\f F Y, h:ia'), strtotime(note.comment_date)) }}
                        </small>
                    </div>
                    <div class="mb-0">
                        {{ wpautop(wptexturize(note.comment_content))|raw }}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endif %}

{{ do_action('woocommerce_view_order', order_id) }}