{% include 'header.twig' %}

<style>

	.tooltip1 {
		pointer-events: none;
	}
</style>
{% if contentText is not empty %}
	<div class="container">
		<div class="row">
			<div class="col-md-8 col-md-offset-2">
				<div class="well ">
					{{ contentText }}
				</div>
			</div>
		</div>
	</div>
{% endif %}

<div class="container-fluid">
	<div class="row">
		<div class="col-lg-12">
			<ul class="nav nav-pills ">
				<li {% if 'all' == status %} class="active" {% endif %}>
					<a href="orders">{{ lang['orders.status.all'] }}</a>
				</li>
				<li {% if 'pending' == status %} class="active" {% endif %}>
					<a href="orders/pending">{{ lang['orders.status.pending'] }}</a>
				</li>
				<li {% if 'inprogress' == status %} class="active" {% endif %}>
					<a href="orders/inprogress">{{ lang['orders.status.inprogress'] }}</a>
				</li>
				<li {% if 'completed' == status %} class="active" {% endif %}>
					<a href="orders/completed">{{ lang['orders.status.completed'] }}</a>
				</li>
				<li {% if 'partial' == status %} class="active" {% endif %}>
					<a href="orders/partial">{{ lang['orders.status.partial'] }}</a>
				</li>
				<li {% if 'processing' == status %} class="active" {% endif %}>
					<a href="orders/processing">{{ lang['orders.status.processing'] }}</a>
				</li>
				<li {% if 'canceled' == status %} class="active" {% endif %}>
					<a href="orders/canceled">{{ lang['orders.status.canceled'] }}</a>
				</li>
				<li class="pull-right search">
					<form action="" method="get">
						<div class="input-group">
							<input type="text" name="search" class="form-control" value="{{ search }}" placeholder="Search Orders">
							<span class="input-group-btn">
								<button type="submit" class="btn btn-default">
									<i class="fa fa-search" aria-hidden="true"></i>
								</button>
							</span>
						</div>
					</form>
				</li>
			</ul>
			<div class="well well-float">
				<table class="table ">
					<thead>
						<tr>
							<th>{{ lang['orders.id'] }}</th>
							<th>{{ lang['orders.date'] }}</th>
							<th class="width-40">{{ lang['orders.link'] }}</th>
							<th>{{ lang['orders.charge'] }}</th>
							<th class="nowrap">{{ lang['orders.start.count'] }}</th>
							<th>{{ lang['orders.quantity'] }}</th>
							<th>{{ lang['orders.service'] }}</th>
							<th>{{ lang['orders.status'] }}</th>
							<th>{{ lang['orders.remains'] }}</th>
						</tr>
					</thead>
					<tbody>

						{% for order in orders %}
							<tr>
								<td>{{ order['id'] }}</td>
								<td>{{ show_date(order['date']) }}</td>
								<td class="width-40">{{ order['link'] }}
									<a target="_blank" href="{{ order['link'] }}">
										<i class="fas fa-link"></i>
									</a>
								</td>
								<td>
									{{convert_currency(order['charge'])}}


								</td>
								<td class="nowrap">{{ order['start_count'] }}</td>
								<td>{{ order['quantity'] }}</td>
								<td>{{ order['service'] }}</td>
								<td>{{ order['status'] }}</td>
								<td>{{ order['remains'] }}


									{% if order['refillButton'] != 1 and order['refillButton'] != 4 %}


										<div style="display:inline-block;" class="tooltip-wrapper" data-toggle={% if order['refillButton'] == 3 %} tooltip {% endif %} data-placement="top" title="" data-original-title="Next Refill will be available after {{ order['refillTimeLeft'] }} ">

											<button type="button" class="refill-button btn btn-primary {% if order['refillButton'] == 3 %} disabled {% endif %}" data-order-id="{{ order['id'] }}">{{lang["orders.button.refill"]}}</button>

										</div>

									{% elseif order['refillButton'] == 4 %}
										{{lang["orders.status.refilling"]}}
									{% endif %}


									{# Show cancel button #}

									{% if order['cancelButton'] == 1 %}

										<button style="background-color:#F90716; color:white;" data-order-id="{{ order['id'] }}" class="btn btn-sm btn-actions cancel-button">
											{{lang["orders.button.cancel"]}}
										</button>

									{% endif %}
									{# Show cancel button #}
								</td>
							</tr>
						</td>
					</tbody>
				</tr>
			{% endfor %}

		</tbody>
	</table>
</div>

{% if pagination["count"] > 1 %}
	<ul class="pagination">

		{% if pagination["current"] != 1 %}
			<li>
				<a href="orders/{{ status }}/{{ pagination[" previous"] }}{% if search %}?search={{ search }}{% endif %}" aria-label="Previous">
					<span aria-hidden="true">&laquo;</span>
				</a>
			</li>
		{% endif %}

		{% set r, l = 3, 3 %}

		{% if pagination['current'] == 1 %}
			{% set r = 7 %}
		{% endif %}

		{% if pagination['current'] == 2 %}
			{% set r = 5 %}
		{% endif %}

		{% if pagination['current'] >= pagination['count'] %}
			{% set l = 5 %}
		{% endif %}

		{% for page in 1..pagination["count"] %}
			{% if page >= (pagination['current']-l) and page <= (pagination['current']+r) %}
				<li {% if page == pagination['current'] %} class="active" {%endif%}>
					<a href="orders/{{ status }}/{{ page }}{% if search %}?search={{ search }}{% endif %}">{{ page }}</a>
				</li>
			{% endif %}
		{% endfor %}

		{% if pagination['current'] < pagination['count'] %}
			<li>
				<a href="orders/{{ status }}/{{ pagination['next'] }}{% if search %}?search={{ search }}{% endif %}" aria-label="Next">
					<span aria-hidden="true">&raquo;</span>
				</a>
			</li>
		{% endif %}

	</ul>
{% endif %}</div>{% include 'footer.twig' %}