{% extends 'admin/base_admin.html' %}

{% block admin_content %}
<div class="container-xl">

	<div class="row g-3 mb-4 align-items-center justify-content-between">
		<div class="col-auto">
			<h1 class="app-page-title mb-0">{{collection}}</h1>
		</div>
		<div class="col-auto">
			<div class="page-utilities">
				<div class="row g-2 justify-content-start justify-content-md-end align-items-center">
					<div class="col-auto">
						<form class="table-search-form row gx-1 align-items-center">
							<div class="col-auto">
								<input type="text" id="search-orders" name="search" value="{{ search_for }}"
									class="form-control search-orders" placeholder="Search">
							</div>
							<div class="col-auto">
								<button type="submit" class="btn app-btn-secondary">Search</button>
							</div>
						</form>

					</div>
					<!--//col-->
					<!-- <div class="col-auto">
								    
								    <select class="form-select w-auto" >
										  <option selected value="option-1">All</option>
										  <option value="option-2">This week</option>
										  <option value="option-3">This month</option>
										  <option value="option-4">Last 3 months</option>
										  
									</select>
							    </div> -->
					<div class="col-auto">
						<a class="btn app-btn-secondary"
							href="{{url('admin:collection_download', collection=collection)}}">
							<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-download me-1"
								fill="currentColor" xmlns="http://www.w3.org/2000/svg">
								<path fill-rule="evenodd"
									d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z" />
								<path fill-rule="evenodd"
									d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z" />
							</svg>
							Download JSON file
						</a>
					</div>
					<div class="col-auto">
						<a class="btn app-btn-primary"
							href="{{url('admin:collection_del_all', collection=collection)}}">
							Delete All
						</a>
					</div>
					<div class="col-auto">
						<a class="btn app-btn-primary" href="{{url('admin:collection_new', collection=collection)}}">
							Create new
						</a>
					</div>
				</div>
				<!--//row-->
			</div>
			<!--//table-utilities-->
		</div>
		<!--//col-auto-->
	</div>
	<!--//row-->



	<div class="tab-content" id="orders-table-tab-content">
		<div class="tab-pane fade show active" id="orders-all" role="tabpanel" aria-labelledby="orders-all-tab">
			<div class="app-card app-card-orders-table shadow-sm mb-5">
				<div class="app-card-body">
					<div class="table-responsive">
						<table class="table app-table-hover mb-0 text-left">
							<thead>
								<tr>
									<!-- <th class="cell"># Index key</th> -->
									{% for k in info %}
									<th class="cell">{{k|title}}</th>
									{% endfor %}

									<th class="cell"></th>
									<th class="cell">Date Created</th>
								</tr>
							</thead>
							<tbody>
								{% for o in objs %}
								<tr>

									{% for i in o.admin_dis() %}
									<td class="cell"><span class="truncate">{{i}}</span></td>
									{% endfor %}
									<th class="cell"></th>
									<td class="cell"><span class="truncate">{{o.timestamp}}</span></td>
									<td class="cell"><a class="btn-sm app-btn-secondary"
											href="{{url('admin:collection_obj', lookup=o.id, collection=collection)}}">View</a>
									</td>
								</tr>
								{% endfor %}
							</tbody>
						</table>
					</div>
					<!--//table-responsive-->

				</div>
				<!--//app-card-body-->
			</div>
			<!--//app-card-->
			<nav class="app-pagination">
				<ul class="pagination justify-content-center">
					<li class="page-item 
								    {% if previous == None %}
									disabled
									{% endif %}
								">
						<a class="page-link" href="{{previous}}{% if search_for %}
						&search={{ search_for }}
						{% endif %}"
							{% if previous == None %} aria-disabled="true" {% endif %}>Previous</a>
					</li>
					{% for i in pages %}
					<li class="page-item {% if i == page %}active{% endif %}">
						<a class="page-link" href="?page={{i}}{% if search_for %}
						&search={{ search_for }}
						{% endif %}">{{i}}</a>
					</li>
					{% endfor %}

					<li class="page-item {% if next == None %}
								disabled
								{% endif %}">
						<a class="page-link" href="{{next}}{% if search_for %}
						&search={{ search_for }}
						{% endif %}"
							{% if next == None %} aria-disabled="true" {% endif %}>Next</a>
					</li>
				</ul>
			</nav>
			<!--//app-pagination-->

		</div>
	</div>
	<!--//tab-content-->



</div>
<!--//container-fluid-->
{% endblock admin_content %}