{{ header }}
<div id="account-order" class="container account-container">
    {{ oct_breadcrumbs }}
    <div class="row">
        <div class="col-lg-12">
            <h1 class="rm-page-title">{{ heading_title }}</h1>
        </div>
    </div>
    <div class="content-top-box">{{ content_top }}</div>
    {% if success %}
        <script>
            rmNotify('success', '{{ success }}');
        </script>
    {% endif %}
    {% if error_warning %}
        <script>
            rmNotify('warning', '{{ error_warning }}');
        </script>
    {% endif %}
    <div id="content" class="row">
        {{ column_left }}
        {% if column_left and column_right %}
            {% set class = 'col-lg-6' %}
        {% elseif column_left or column_right %}
            {% set class = 'col-lg-9' %}
        {% else %}
            {% set class = 'col-lg-12' %}
        {% endif %}
        <div class="{{ class }}">
            <div class="rm-content h-100">
                <div class="rm-content-title">{{ text_order_detail }}</div>
                <div class="rm-account-text rm-account-order">
                    {% if invoice_no %}
                    	<div class="rm-account-text-order">{{ text_invoice_no }}:<span>{{ invoice_no }}</span></div>
                    {% endif %}
                    <div class="rm-account-text-order">{{ text_order_id }}:<span>#{{ order_id }}</span></div>
                    <div class="rm-account-text-order">{{ text_date_added }}:<span>{{ date_added }}</span>
                    </div>
                    <div class="rm-account-text-order">{{ text_payment_method }}:<span>{{ payment_method }}</span></div>
                    {% if shipping_method %}
                        <div class="rm-account-text-order">{{ text_shipping_method }}:<span>{{ shipping_method }}</span></div>
                    {% endif %}
                </div>
                {% if module_account_payment_address_view %}
                    <div class="rm-content-title">{{ text_payment_address }}</div>
                    <div class="rm-account-text">
                        <div class="rm-account-text-order">
                            {{ payment_address }}
                        </div>
                    </div>
                {% endif %}
                {% if shipping_address %}
                    <div class="rm-content-title mt-4">{{ text_shipping_address }}</div>
                    <div class="rm-account-text mb-4">
                        <div class="rm-account-text-order">
                            {{ shipping_address }}
                        </div>
                    </div>
                {% endif %}
                <div class="table-responsive-sm rm-table-box">
                    <table class="table table-hover">
                        <thead class="thead-dark">
                            <tr>
                                {% if products %}
                                    <th style="width: 20px;"></th>
                                {% endif %}
                                <th>{{ column_name }}</th>
                                <th>{{ column_model }}</th>
                                <th style="text-align: right;">{{ column_price }}</th> 
                                <th style="text-align: right;">{{ column_quantity }}</th>
                                <th style="text-align: right;">{{ column_total }}</th>
                                {% if products %}
                                    <th style="width: 20px;"></th>
                                {% endif %}
                            </tr>
                        </thead>
                        <tbody>
                            {% for product in products %}
                                <tr>
                                    {% if product.image %}
                                        <td>
                                            <a href="{{ product.href }}">
                                                <img src="{{ product.image }}" alt="{{ product.name }}" width="{{ product.image_width }}" height="{{ product.image_height }}"/>
                                            </a>
                                        </td>
                                    {% endif %}
                                    <td>
                                        <a href="{{ product.href }}"><strong>{{ product.name }}</strong></a>
                                        {% for option in product.option %}
                                            <br/><small>- {{ option.name }}: {{ option.value }}</small>
                                        {% endfor %}
                                    </td>
                                    <td style="text-align: center;">{{ product.model }}</td>
                                    <td style="text-align: right;white-space:nowrap;">{{ product.price }}</td>
                                    <td style="text-align: right;">{{ product.quantity }}</td>
                                    <td style="text-align: right;">{{ product.total }}</td>
                                    <td style="white-space: nowrap;">
                                        {% if product.reorder %}
                                            <a href="{{ product.reorder }}" data-bs-toggle="tooltip" title="{{ button_reorder }}" class="rm-btn primary rm-btn-with-icon br-4">
                                                <span class="rm-cart-btn-icon"></span>
                                            </a>
                                        {% endif %}
                                        <a href="{{ product.return }}" data-bs-toggle="tooltip" title="{{ button_return }}" class="rm-btn secondary rm-btn-with-icon br-4 mt-2">
                                            <i class="fas fa-sync-alt"></i>
                                        </a>
                                    </td>
                                </tr>
                            {% endfor %}
                            {% for voucher in vouchers %}
                                <tr>
                                    <td>{{ voucher.description }}</td>
                                    <td></td>
                                    <td>1</td>
                                    <td>{{ voucher.amount }}</td>
                                    <td>{{ voucher.amount }}</td>
                                    {% if products %}
                                        <td></td>
                                    {% endif %}
                                </tr>
                            {% endfor %}
                            {% for total in totals %}
                                <tr>
                                    {% if products %}
                                        <td></td>
                                    {% endif %}
                                    <td colspan="3"></td>
                                    <td class="text-end">{{ total.title }}</td>
                                    <td class="dark-text fw-500" style="white-space: nowrap;"><b>{{ total.text }}</b></td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% if comment %}
                    <div class="rm-content-title">{{ text_comment }}</div>
                    <div class="rm-account-text">{{ comment }}</div>
                {% endif %}
                {% if histories %}
                    <div class="rm-content-title">{{ text_history }}</div>
                    <div class="table-responsive-sm rm-table-box">
                        <table class="table table-hover">
                            <thead class="thead-dark">
                                <tr>
                                    <th>{{ column_date_added }}</th>
                                    <th>{{ column_status }}</th>
                                    <th>{{ column_comment }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% if histories %}
                                    {% for history in histories %}
                                        <tr>
                                            <td>{{ history.date_added }}</td>
                                            <td>{{ history.status }}</td>
                                            <td>{{ history.comment }}</td>
                                        </tr>
                                    {% endfor %}
                                {% else %}
                                    <tr>
                                        <td colspan="3" class="text-center">{{ text_no_results }}</td>
                                    </tr>
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                {% endif %}
                <div class="buttons">
                    <a href="{{ continue }}" class="rm-btn dark">{{ button_continue }}</a>
                </div>
            </div>
        </div>
        {{ column_right }}
    </div>
    {{ content_bottom }}
</div>
{{ footer }}