{% extends "app_home/base.html" %}
{% load static %}
{% load i18n %}

{% block navbar_app %}
{% include 'app_home/_sidebar.html' %}
{% endblock %}


{% block title %}
<h2>{% translate 'Select a notification template' %}</h2>
<hr>
{% endblock %}


{% block content %}

<div class="mb-3">
    <a class="btn btn-outline-secondary btn-sm" href="javascript:history.back()">
        <i class="fa fa-arrow-left me-1"></i>{% translate 'Back' %}
    </a>
</div>

{% if templates %}

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

<table class="table table-hover table-sm table-bordered" id="template_table">
    <thead class="table-light">
        <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 instance_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 %}

{% endblock %}