{% extends "base.html" %}
{% load static %}


{% block title %}Lista de notificaciones{% endblock title %}

{% block botones %}
<span class="d-none d-sm-inline">
    <a  href="#" class="btn btn-outline-primary btn-pill d-none d-sm-inline-block" data-bs-toggle="modal" data-bs-target="#notificacion">
      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square-rounded-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
         <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
         <path d="M9 12h6"></path>
         <path d="M12 9v6"></path>
         <path d="M12 3c7.2 0 9 1.8 9 9s-1.8 9 -9 9s-9 -1.8 -9 -9s1.8 -9 9 -9z"></path>
      </svg>
      Enviar notificación
    </a>
</span>  
{% endblock botones %}

{% block contenido %}
<div class="card p-0">
    <div class="table-responsive">
        <table class="table table-vcenter card-table">
            <thead>
                <tr>
                    <th>Asunto de notificación</th>
                    <th>Fecha de realización</th>
                    <th class="w-1"></th>
                </tr>
            </thead>
            <tbody>
                
                {% for notificacion in pagination %}
                <tr>
                    <td class="text-muted">{{ notificacion.asunto }}</td>
                    <td> {{notificacion.fecha_creacion }}</td>
                    <td>
                        <a class="btn btn-outline-primary btn-pill w-100" href="{% url 'notificacion:detalle_notificacion' notificacion.id %}" > Ver detalles</a>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td  colspan="5">No hay notificaciones realizadas.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock contenido %}

{% block pagination %}  {% include 'paginacion.html' %} {% endblock pagination %}

{% block js %}
{% include 'notificacion/modal_enviar_notificacion.html' %}    
<script src="{% static 'js/enviar_notificacion_usuario.js' %}"></script>
{% endblock js %}
    