{% extends TICKETS_BASE_TEMPLATE %}
{% load ticket_notifications_tags %}
{% block title %}Ticket Notifications{% endblock %}
{% block content %}
<div class="container mt-4">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h3>Notifications {% if unread_count %}<span class="badge bg-danger">{{ unread_count }} unread</span>{% endif %}</h3>
    <div class="d-flex gap-2">
      <a href="{% url 'tickets:ticket_list' %}" class="btn btn-outline-secondary btn-sm">Back to tickets</a>
      {% if unread_count %}
      <form method="post" action="{% url 'tickets:mark_all_notifications_read' %}">
        {% csrf_token %}
        <button type="submit" class="btn btn-primary btn-sm">Mark all read</button>
      </form>
      {% endif %}
    </div>
  </div>

  <div class="mb-3">
    <a href="{% url 'tickets:ticket_notifications' %}" class="btn btn-sm {% if not unread_only %}btn-primary{% else %}btn-outline-primary{% endif %}">All</a>
    <a href="{% url 'tickets:ticket_notifications' %}?unread=1" class="btn btn-sm {% if unread_only %}btn-primary{% else %}btn-outline-primary{% endif %}">Unread only</a>
  </div>

  <div class="list-group">
    {% for n in notifications %}
    <div class="list-group-item {% if not n.is_read %}list-group-item-warning{% endif %}">
      <div class="d-flex justify-content-between align-items-start">
        <div>
          <p class="mb-1 {% if not n.is_read %}fw-semibold{% endif %}">
            {% if n.notification_type == 'ticket_assigned' %}
            <span class="badge bg-primary me-1">New assignment</span>
            {% elif n.notification_type == 'ticket_reassigned' %}
            <span class="badge bg-warning text-dark me-1">Reassigned</span>
            {% endif %}
            {{ n.message }}
          </p>
          <small class="text-muted">{{ n.created_at|date:"d M Y, H:i:s" }}</small>
          {% if n.actor %}<small class="text-muted"> · from {{ n.actor.first_name }} {{ n.actor.last_name }}</small>{% endif %}
        </div>
        <div class="d-flex gap-2 ms-2">
          <a href="{% url 'tickets:ticket_detail' n.ticket_id %}" class="btn btn-outline-primary btn-sm">Open ticket</a>
          {% if not n.is_read %}
          <form method="post" action="{% url 'tickets:mark_notification_read' n.pk %}">
            {% csrf_token %}
            <button type="submit" class="btn btn-outline-secondary btn-sm">Mark read</button>
          </form>
          {% endif %}
        </div>
      </div>
    </div>
    {% empty %}
    <div class="list-group-item text-muted text-center">No notifications.</div>
    {% endfor %}
  </div>

  {% if page_obj.has_other_pages %}
  <nav class="mt-3">
    <ul class="pagination pagination-sm justify-content-center">
      {% if page_obj.has_previous %}
      <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if unread_only %}&unread=1{% endif %}">Previous</a></li>
      {% endif %}
      <li class="page-item disabled"><span class="page-link">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span></li>
      {% if page_obj.has_next %}
      <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}{% if unread_only %}&unread=1{% endif %}">Next</a></li>
      {% endif %}
    </ul>
  </nav>
  {% endif %}
</div>
{% endblock %}