{% extends entityName|capitalize ~ '/base.html.twig' %}

{% block title %}
	{{ 'app.order.details.title'|trans({'%numero%': order.id}) }}
{% endblock %}

{% block component_body %}
	<div class="app-content flex-column-fluid">
		<div class="d-flex flex-column gap-7 gap-lg-10">
			<div class="d-flex flex-wrap flex-stack gap-5 gap-lg-10">
				<ul class="nav nav-custom nav-tabs nav-line-tabs nav-line-tabs-2x border-0 fs-4 fw-semibold mb-lg-n2 me-auto" role="tablist">
					<li class="nav-item" role="presentation">
						<a class="nav-link text-active-primary pb-4 active" data-bs-toggle="tab" href="#kt_ecommerce_sales_order_summary" aria-selected="true" role="tab">{{ 'app.order.details.tabs.summary'|trans }}</a>
					</li>
					<li class="nav-item" role="presentation">
						<a class="nav-link text-active-primary pb-4" data-bs-toggle="tab" href="#kt_ecommerce_sales_order_payments" aria-selected="false" tabindex="-1" role="tab">{{ 'app.order.details.tabs.payments'|trans }}</a>
					</li>
					<li class="nav-item" role="presentation">
						<a class="nav-link text-active-primary pb-4" data-bs-toggle="tab" href="#kt_ecommerce_sales_order_history" aria-selected="false" tabindex="-1" role="tab">{{ 'app.order.details.tabs.history'|trans }}</a>
					</li>
					<li class="nav-item" role="presentation">
						<a class="nav-link text-active-primary pb-4" data-bs-toggle="tab" href="#kt_ecommerce_sales_order_notifications" aria-selected="false" tabindex="-1" role="tab">{{ 'app.order.details.tabs.notification'|trans }}</a>
					</li>
				</ul>
			</div>
			<div class="d-flex flex-column flex-xl-row gap-7 gap-lg-10">
				<div class="flex-row-fluid">
					{% include 'Order/Components/informations.html.twig' with {'order': order } %}
					{% include 'Order/Components/order_setting.html.twig' %}
				</div>
				<div class="flex-row-fluid d-flex flex-column">
					{% include 'Order/Components/customer.html.twig' %}
					{% if order.loyalty.rewards is defined and order.loyalty.rewards is not empty %}
						{% include 'Order/Components/loyalty.html.twig' %}
					{% endif %}
				</div>
			</div>
		</div>
		<div class="tab-content mt-10">
			<div class="tab-pane fade show active" id="kt_ecommerce_sales_order_summary" role="tab-panel">
				<div class="d-flex flex-column gap-7 gap-lg-10">
					<div class="d-flex flex-column flex-xl-row gap-7 gap-lg-10">
						{% include 'Order/Components/details.html.twig' with {'order': order} %}
					</div>
				</div>
			</div>
			<div class="tab-pane fade" id="kt_ecommerce_sales_order_payments" role="tab-panel">
				<div class="d-flex flex-column gap-7 gap-lg-10">
					<div class="d-flex flex-column flex-xl-row gap-7 gap-lg-10">
						{% include 'Order/Components/payments.html.twig' with {'payments': order.payments} %}
					</div>
				</div>
			</div>
			<div class="tab-pane fade" id="kt_ecommerce_sales_order_history" role="tab-panel">
				<div class="d-flex flex-column gap-7 gap-lg-10">
					<div class="d-flex flex-column flex-xl-row gap-7 gap-lg-10">
						{% include 'Order/Components/history.html.twig' with {'events': order.events} %}
					</div>
				</div>
			</div>
			<div class="tab-pane fade" id="kt_ecommerce_sales_order_notifications" role="tab-panel">
				<div class="d-flex flex-column gap-7 gap-lg-10">
					<div class="d-flex flex-column flex-xl-row gap-7 gap-lg-10">
						{% include 'Order/Components/notifications.html.twig' with {'notifications': order.notifications} %}
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block javascripts %}
	<script type="text/javascript">
        var translations = {
            'btn_title_more': '{{ 'app.order.notification.more'|trans }}',
            'btn_title_less': '{{ 'app.order.notification.less'|trans }}',
        }
	</script>
	<script src="{{ asset('foxorders/js/order/read-more.js') }}"></script>
	<script src="{{ asset('foxorders/js/global/copy-keys.js') }}"></script>
{% endblock %}