{{ header }}
<div id="account-return" class="container-xl flex-grow-1">
	<nav aria-label="breadcrumb">
        <ul class="breadcrumb pr-breadcrumb fsz-12">
        {% for breadcrumb in breadcrumbs %}
            {% if loop.last %}
                <li class="breadcrumb-item pr-breadcrumb-item">{{ breadcrumb.text }}</li>
            {% else %}
                <li class="breadcrumb-item pr-breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
            {% endif %}
        {% endfor %}
        </ul>
    </nav>
	<main>
		<div class="content-top-box">{{ content_top }}</div>
        <div class="row g-3 g-xxl-4 pr-account">
			{{ column_left }}
		    {% if column_left and column_right %}
                {% set class = 'col-xl-6' %}
            {% elseif column_left or column_right %}
                {% set class = 'col-xl-9' %}
            {% else %}
                {% set class = 'col-xl-12' %}
            {% endif %}
		    <div id="content" class="{{ class }}">
                <div class="content-block">
                    <div class="pr-page-title mb-3 mb-xl-4 d-flex align-items-center gap-3">
						<h1>{{ heading_title }}</h1>
					</div>
					<div class="mt-3 p-3 br-8 border">
						<div class="h2 mt-0 mb-3">{{ text_return_detail }}</div>
						<div class="pr-account-text-order">{{ text_return_id }}<span class="dark-text fw-500"> #{{ return_id }}</span></div>
						<div class="pr-account-text-order">{{ text_date_added }}<span class="dark-text fw-500"> {{ date_added }}</span></div>
						<div class="pr-account-text-order">{{ text_order_id }}<span class="dark-text fw-500"> #{{ order_id }}</span></div>
						<div class="pr-account-text-order">{{ text_date_ordered }}<span class="dark-text" fw-500> {{ date_ordered }}</span></div>
					</div>
					<div class="h3 mt-4 mb-2">{{ text_product }}</div>
				    <div class="table-responsive fsz-14 fw-300 br-8">
				        <table class="table table-hover table-bordered">
				          <thead>
				            <tr>
				              <th style="width: 33.3%;">{{ column_product }}</th>
				              <th style="width: 33.3%;">{{ column_model }}</th>
				              <th style="width: 33.3%;">{{ column_quantity }}</th>
				            </tr>
				          </thead>
				          <tbody>
				            <tr>
				              <td>{{ product }}</td>
				              <td>{{ model }}</td>
				              <td>{{ quantity }}</td>
				            </tr>
				          </tbody>
				        </table>
				    </div>
					<div class="h3 mt-4 mb-2">{{ text_reason }}</div>
				    <div class="table-responsive fsz-14 fw-300 br-8">
				        <table class="table table-hover table-bordered">
				          <thead>
				            <tr>
				              <th style="width: 33.3%;">{{ column_reason }}</th>
				              <th style="width: 33.3%;">{{ column_opened }}</th>
				              <th style="width: 33.3%;">{{ column_action }}</th>
				            </tr>
				          </thead>
				          <tbody>
				            <tr>
				              <td>{{ reason }}</td>
				              <td>{{ opened }}</td>
				              <td>{{ action }}</td>
				            </tr>
				          </tbody>
				        </table>
				    </div>
					{% if comment %}
				    <div class="table-responsive fsz-14 fw-300 br-8">
				        <table class="table table-hover table-bordered">
				          <thead>
				            <tr>
				              <th>{{ text_comment }}</th>
				            </tr>
				          </thead>
				          <tbody>
				            <tr>
				              <td>{{ comment }}</td>
				            </tr>
				          </tbody>
				        </table>
				    </div>
				    {% endif %}
					<div class="h3 mt-4 mb-2">{{ text_history }}</div>
				    <div class="table-responsive fsz-14 fw-300 mb-2 br-8">
				        <table class="table table-hover table-bordered">
				          <thead>
				            <tr>
				              <th style="width: 33.3%;">{{ column_date_added }}</th>
				              <th style="width: 33.3%;">{{ column_status }}</th>
				              <th style="width: 33.3%;">{{ 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>
			        <a href="{{ continue }}" class="button button-secondary button-large">{{ button_continue }}</a>
			    </div>
		    </div>
		    {{ column_right }}
		</div>
		{{ content_bottom }}
	</mai>
</div>
{{ footer }}
