{% extends layout.html %} {% block content %}
<script>
	window.form_submissions = {% echo json_encode($form_submissions); %};
	window.forms = {% echo json_encode($forms); %};
</script>
<div class="row pb-5">
	<div class="col-sm-12">
		<div class="bg-white py-5 px-5 container-fluid" style="border-radius: 0.3rem">
			<table id="oxypowerpack-datatable" class="table text-dark pt-3">
				<thead>
					<tr>
						<th scope="col">#</th>
						<th scope="col">Title</th>
						<th scope="col">Date</th>
						<th style="padding-right: 15px" class="text-right" scope="col">Options</th>
					</tr>
				</thead>
				<tbody>
					{% foreach ($form_submissions as $key => $form_submission): %}
					<tr class="py-0">
						<td>{% echo $form_submission->ID; %}</td>
						<td>{% echo $form_submission->post_title; %}</td>
						<td>{% echo date('F d h:i a, Y', strtotime($form_submission->post_date)); %}</td></td>

						<td class="text-right">
							<form action="{% echo admin_url('admin.php?opp_info_power_form=true'); %}" method="POST">
								<input name="id_submission" type="hidden" value="{% echo $form_submission->ID %}" />
								<button class="button btn btn-success btn-sm" type="button" style="cursor: pointer">See submission</button>
							</form>
						</td>
					</tr>
					{% endforeach; %}
				</tbody>
			</table>
		</div>
	</div>
</div>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content text-white">
			<div class="modal-header">
				<h5 class="modal-title" id="staticBackdropLabel">
					Submission Information
					<br />
					<span id="title"></span>
				</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body" style="overflow: auto; overflow-wrap: break-word">
				<!-- Dynamic Info -->
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

<style>
	table tbody tr:nth-child(odd) {
		background: rgba(0, 0, 0, 0.05);
	}

	table tbody tr:hover {
		background: rgba(0, 0, 0, 0.07);
	}

	.dataTables_length select {
		padding-right: 30px !important;
		padding-top: 0px !important;
		padding-bottom: 0px !important;
		border-color: #8c8f94 !important;
	}
</style>

{% endblock %}