{% extends '/layout/admin_layout.html.twig' %}
{% import "macro/listing.html.twig" as listingMacro %}

{% block title %}Management
{% endblock %}

{% block content %}

	<div class="listing-container">
		<div class="d-flex justify-content-end flex-wrap flex-md-nowrap align-items-center pb-3">
			<div>
				<button type="button" class="btn btn-sm btn-gray-800 d-inline-flex align-items-center" data-bs-toggle="modal" data-bs-target="#modal-form_add">
					<svg class="icon icon-xs me-2" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
					</svg>
					New
				</button>
				{{ listingMacro.bulkDeleteButton( path('app_management_bulk_delete'), csrf_token('delete') ) }}
			</div>
		</div>

		<div class="card card-body p-2 border-0 shadow">

			<turbo-frame id="app_management_index">
				<div class="table-wrapper table-responsive">
					<table class="table table-hover">
						<thead class="thead-light">
							<tr>
								<th>{{ listingMacro.listingHeaderCheckbox() }}</th>
								<th>#</th>
								<th>Value</th>
								<th>Created at</th>
								<th>Updated at</th>
								<th></th>
							</tr>
						</thead>
						<tbody>
							{% for item in management %}
								<tr>
									<td>{{ listingMacro.listingCheckbox(item.id) }}</td>
									<td>{{ loop.index }}</td>
									<td>{{ item.value }}</td>
									<td>
										{{ item.createdAt ? item.createdAt|dtz : '' }}
										{% if item.createdBy %}
											<br>
											<span class="text-gray small">by
												{{ item.createdBy.username }}</span>
										{% endif %}
									</td>
									<td>
										{{ item.updatedAt ? item.updatedAt|dtz : '' }}
										{% if item.updatedBy %}
											<br>
											<span class="text-gray small">by
												{{ item.updatedBy.username }}</span>
										{% endif %}
									</td>
									<td>

										<a href="{{ path('app_management_edit', {'id': item.id}) }}" class="btn btn-sm btn-link p-1" data-bs-toggle="modal" data-bs-target="#turbo_modal" data-trb-frame="turbo_modal_frame" data-trb-modal="true">
											<svg class="icon icon-xxs" data-slot="icon" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
												<path d="m2.695 14.762-1.262 3.155a.5.5 0 0 0 .65.65l3.155-1.262a4 4 0 0 0 1.343-.886L17.5 5.501a2.121 2.121 0 0 0-3-3L3.58 13.419a4 4 0 0 0-.885 1.343Z"></path>
											</svg>
										</a>

										{% if item.canBeDeleted() %}
											<form class="d-inline" method="post" action="{{ path('app_management_delete', {'id': item.id, 'attr': attr.value}) }}" onsubmit="return confirm('Are you sure you want to delete this item?');">
												<input type="hidden" name="_token" value="{{ csrf_token('delete' ~ item.id) }}">
												<button class="btn btn-sm btn-link text-danger ms-1 p-1">
													<svg class="icon icon-xs" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
														<path clip-rule="evenodd" fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z"></path>
													</svg>
												</button>
											</form>
										{% endif %}

									</td>
								</tr>
							{% else %}
								<tr>
									<td colspan="100%">No records found.</td>
								</tr>
							{% endfor %}
						</tbody>
					</table>
				</div>

				<!-- Modal Content -->
				<div class="modal fade" id="modal-form_add" tabindex="-1" role="dialog" aria-labelledby="modal-form_add" aria-hidden="true">
					<div class="modal-dialog modal-dialog-centered" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<h2 class="h6 modal-title">New
									{{ attr.label }}</h2>
								<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
							</div>
							<div class="modal-body">
								<turbo-frame id="app_management_new" src="{{ path('app_management_new', {'attr': attr.value}) }}" loading="lazy">
									<div class="d-flex justify-content-center align-items-center">
										<div class="spinner-grow spinner-grow-sm text-dark" role="status">
											<span class="visually-hidden">Loading...</span>
										</div>
										<div class="spinner-grow spinner-grow-sm text-dark" role="status">
											<span class="visually-hidden">Loading...</span>
										</div>
										<div class="spinner-grow spinner-grow-sm text-dark" role="status">
											<span class="visually-hidden">Loading...</span>
										</div>
										<div class="spinner-grow spinner-grow-sm text-dark" role="status">
											<span class="visually-hidden">Loading...</span>
										</div>
										<div class="spinner-grow spinner-grow-sm text-dark" role="status">
											<span class="visually-hidden">Loading...</span>
										</div>
									</div>
								</turbo-frame>
							</div>
						</div>
					</div>
				</div>
				<!-- End of Modal Content -->

				<!-- Modal Content -->
				<div class="modal fade" id="turbo_modal" tabindex="-1" role="dialog" aria-labelledby="turbo_modal" aria-hidden="true">
					<div class="modal-dialog modal-dialog-centered" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<h2 class="h6 modal-title">Edit
									{{ attr.label }}</h2>
								<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
							</div>
							<div class="modal-body">
								<turbo-frame id="turbo_modal_frame">loading...</turbo-frame>
							</div>
						</div>
					</div>
				</div>
				<!-- End of Modal Content -->

				{{ include('//layout/_notifications.html.twig') }}

			</turbo-frame>

		</div>
	</div>

{% endblock %}