{% load i18n %}

{% if templates %}
<p>{% translate 'Select a template to create a new message:' %}</p>

<input type="search" id="template_filter" class="form-control mb-2"
       placeholder="{% translate 'Filter...' %}"
       oninput="filterTemplateRows(this.value)">

<table class="table table-hover table-sm" id="template_table">
	<thead>
		<tr>
			<th>{% translate 'Title' %}</th>
			<th>{% translate 'Category' %}</th>
			<th>{% translate 'Severity' %}</th>
			<th>{% translate 'Hint' %}</th>
		</tr>
	</thead>
	<tbody>
		{% for template in templates %}
		<tr class="cv-row-clickable" onclick="window.location='{% url 'app_sirene:new_message' template.id %}';">
			<td>{{ template.title }}</td>
			<td>{{ template.category }}</td>
			<td>{{ template.severity }}</td>
			<td>{{ template.hint }}</td>
		</tr>
		{% endfor %}
	</tbody>
</table>

<script>
function filterTemplateRows(q) {
  var val = q.toLowerCase();
  document.querySelectorAll('#template_table tbody tr').forEach(function(row) {
    row.style.display = row.textContent.toLowerCase().includes(val) ? '' : 'none';
  });
}
</script>

{% else %}
<p class="text-muted">{% translate 'No templates available' %}</p>
{% endif %}
