{% block extra_head %}
	<link rel="stylesheet" href="{{prefix}}/files/css/content.css">
	<script src="{{prefix}}/files/js/content.js" defer></script>
{% endblock %}

<h5>{{ rows_count }} rows</h5>

<table class="table table-striped table-hover text-center">
	<tr style="white-space: nowrap;">
		{% if readonly == False %}
			<th class="no-padding"></th>
		{% endif %}

		{% for column in column_names %}
			<th>
				<a href="?sort={% if sorting == column and sort_type == 'asc' %}-{% endif %}{{ column }}">{{ column }}</a>
				{% if sorting == column %}
					<span style="font-size: 0.75rem;">
						{% if sort_type == "asc" %}⯆{% else %}⯅{% endif %}
					</span>
				{% endif %}
			</th>
		{% endfor %}
	</tr>
	{% for row in content %}
		<tr>
			{% if readonly == False %}
				<td class="no-padding">
					<input rowid="{{row['rowid']}}" class="form-check-input" type="checkbox">
				</td>
			{% endif %}

			{% for item in row["data"] %}
				<td>{{item}}</td>
			{% endfor %}
		</tr>
	{% endfor %}
</table>

{% if readonly == False %}
	<div id="actions">
		<button id="edit" type="button" class="btn btn-outline-primary">Edit</button>
		<button id="delete" type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#delete-dialog">Delete</button>
	</div>

	<div class="modal fade" id="delete-dialog" tabindex="-1" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header">
					<h1 class="modal-title fs-5" id="exampleModalLabel">{{db_name}}/{{table_name}}</h1>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					Are you sure you want to delete <code id="delete-amount"></code> selected rows?
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
					<button type="button" class="btn btn-danger" id="confirm-delete">Delete</button>
				</div>
			</div>
		</div>
	</div>
{% endif %}
