{{ header }}
<div id="account-recurring" 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>
	<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-titl">{{ text_recurring_detail }}</div>
				<div class="rm-account-text rm-account-order">
					<div class="rm-account-text-order">{{ text_order_recurring_id }}:<span>#{{ order_recurring_id }}</span></div>
					<div class="rm-account-text-order">{{ text_date_added }}:<span>{{ date_added }}</span></div>
					<div class="rm-account-text-order">{{ text_status }}:<span>{{ status }}</span></div>
					<div class="rm-account-text-order">{{ text_payment_method }}:<span>{{ payment_method }}</span></div>
					<div class="rm-account-text-order">{{ text_order_id }}:<span><a href="{{ order }}">#{{ order_id }}</a></span></div>
					<div class="rm-account-text-order">{{ text_product }}:<span><a href="{{ product }}">#{{ product_name }}</a></span></div>
					<div class="rm-account-text-order">{{ text_quantity }}:<span>{{ product_quantity }}</span></div>
				</div>
				<div class="rm-content-title">{{ text_description }}</div>
				<div class="rm-account-text">
					<div class="rm-account-text-order">{{ recurring_description }}</div>
				</div>
				<div class="rm-content-title">{{ text_reference }}</div>
				<div class="rm-account-text">
					<div class="rm-account-text-order">{{ reference }}</div>
				</div>
				<div class="rm-content-title">{{ text_transaction }}</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_type }}</th>
			              <th>{{ column_amount }}</th>
			            </tr>
			          </thead>
			          <tbody>
			          {% if transactions %}
			          {% for transaction in transactions %}
			          <tr>
			            <td>{{ transaction.date_added }}</td>
			            <td>{{ transaction.type }}</td>
			            <td>{{ transaction.amount }}</td>
			          </tr>
			          {% endfor %}
			          {% else %}
			          <tr>
			            <td colspan="3" class="text-center">{{ text_no_results }}</td>
			          </tr>
			          {% endif %}
			            </tbody>
			        </table>
			    </div>
				{{ recurring }}
		    </div>
		    {{ column_right }}
		</div>
		{{ content_bottom }}
	</div>
</div>
{{ footer }}