{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  {% set _role_text = (current_user_roles or [])|join('|')|lower %}
  {% if 'partner' in _role_text %}
    {% include "modules/partners/templates/partners/_partner_tabs.html" %}
  {% elif 'manager' in _role_text %}
    {% include "modules/managers/templates/managers/_manager_tabs.html" %}
  {% else %}
    {% include "modules/employees/templates/employees/_my_workspace_tabs.html" %}
  {% endif %}
  <div class="flex flex-wrap items-start justify-between gap-3">
    <div>
      <h2 class="text-xl font-semibold text-slate-900">My Alerts</h2>
      <p class="mt-1 text-sm text-slate-500">Role-wise alerts for tasks, documents, attendance, leave, payroll, client and consultant workflows.</p>
    </div>
    <form method="post" action="/alerts/read-all">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
      <button class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50" {% if unread_count == 0 %}disabled{% endif %}>Mark all as read</button>
    </form>
  </div>

  <div class="grid gap-4 md:grid-cols-3">
    <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Unread</div><div class="mt-1 text-2xl font-semibold">{{ unread_count }}</div></div>
    <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Showing</div><div class="mt-1 text-2xl font-semibold">{{ alerts|length }}</div></div>
    <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Filter</div><div class="mt-1 text-sm text-slate-600">{{ status.replace('_',' ').title() }} · {{ priority.title() }}</div></div>
  </div>

  <form method="get" action="/alerts" class="rounded-2xl border border-slate-200 bg-white p-4 shadow-soft">
    <div class="grid gap-3 md:grid-cols-[220px_220px_auto]">
      <select name="status" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
        <option value="all" {% if status == 'all' %}selected{% endif %}>All alerts</option>
        <option value="unread" {% if status == 'unread' %}selected{% endif %}>Unread only</option>
        <option value="read" {% if status == 'read' %}selected{% endif %}>Read only</option>
      </select>
      <select name="priority" class="rounded-xl border border-slate-300 px-3 py-2 text-sm">
        <option value="all" {% if priority == 'all' %}selected{% endif %}>All priorities</option>
        {% for p in priorities %}<option value="{{ p }}" {% if priority == p %}selected{% endif %}>{{ p.title() }}</option>{% endfor %}
      </select>
      <button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Apply Filter</button>
    </div>
  </form>

  <div class="space-y-3">
    {% for alert in alerts %}
    <div class="rounded-2xl border {% if alert.is_read %}border-slate-200 bg-white{% else %}border-brand-100 bg-brand-50{% endif %} p-5 shadow-soft">
      <div class="flex flex-wrap items-start justify-between gap-3">
        <div class="min-w-0">
          <div class="flex flex-wrap items-center gap-2">
            <h3 class="font-semibold text-slate-900">{{ alert.title }}</h3>
            <span class="rounded-full border border-slate-200 bg-white px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-slate-600">{{ alert.priority }}</span>
            {% if not alert.is_read %}<span class="rounded-full bg-brand-600 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-white">Unread</span>{% endif %}
          </div>
          <div class="mt-1 text-xs text-slate-500">{{ alert.alert_type.replace('_',' ').title() }}{% if alert.role_context %} · {{ alert.role_context }}{% endif %} · {{ alert.created_at_utc.strftime('%d-%m-%Y %H:%M') if alert.created_at_utc else '-' }}</div>
          {% if alert.message %}<p class="mt-3 text-sm text-slate-700">{{ alert.message }}</p>{% endif %}
        </div>
        <div class="flex shrink-0 flex-wrap justify-end gap-2">
          {% if alert.target_url %}<a href="{{ alert.target_url }}" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Open</a>{% endif %}
          {% if not alert.is_read %}
          <form method="post" action="/alerts/{{ alert.id }}/read">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
            <button class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Mark read</button>
          </form>
          {% endif %}
        </div>
      </div>
    </div>
    {% else %}
    <div class="rounded-2xl border border-slate-200 bg-white p-8 text-center text-sm text-slate-500 shadow-soft">No alerts found for the selected filter.</div>
    {% endfor %}
  </div>
</div>
{% endblock %}