<%- include('partials/page-start', { pageTitle, activePage }) %>

<section class="grid gap-6 xl:grid-cols-[420px_1fr]">
  <div class="panel self-start">
    <h2 class="panel-title">Send notification</h2><p class="panel-subtitle mt-1">The message is inserted into <code>user_notifications</code>.</p>
    <form method="post" action="<%= adminUrl('/notifications') %>" class="mt-5 space-y-4" data-confirm="Send this notification to the selected audience?">
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">
      <label class="field"><span>Audience</span><select class="input" name="audience" id="notificationAudience" required><option value="all">All users</option><option value="pro">Pro users</option><option value="vip">VIP users</option><option value="user">One user</option></select></label>
      <label class="field hidden" id="notificationUserField"><span>User ID or email</span><input class="input" type="text" name="user_identifier" placeholder="123 or user@example.com"></label>
      <label class="field"><span>Type</span><select class="input" name="type"><option value="info">Info</option><option value="success">Success</option><option value="warning">Warning</option><option value="error">Error</option></select></label>
      <label class="field"><span>Title</span><input class="input" type="text" name="title" maxlength="180" required></label>
      <label class="field"><span>Message</span><textarea class="input min-h-36 resize-y" name="message" maxlength="5000" required></textarea></label>
      <button class="btn btn-primary w-full justify-center" type="submit">Send notification</button>
    </form>
  </div>

  <div class="panel">
    <div class="panel-header"><div><h2 class="panel-title">Recent notifications</h2><p class="panel-subtitle">Last <%= notifications.length %> records</p></div></div>
    <% if (!notifications.length) { %><div class="empty-state">No notifications found.</div><% } else { %>
      <div class="space-y-3"><% notifications.forEach((notification) => { %><article class="mobile-record">
        <div class="flex items-start justify-between gap-3"><div class="min-w-0"><h3 class="truncate font-medium text-white"><%= notification.title %></h3><div class="mt-1 truncate text-xs text-slate-500"><%= notification.user_email || notification.audience || ('User #' + (notification.user_id || '—')) %></div></div><span class="badge badge-muted"><%= notification.type || 'info' %></span></div>
        <p class="mt-3 whitespace-pre-wrap break-words text-sm leading-6 text-slate-300"><%= notification.message %></p><div class="mt-3 text-xs text-slate-500"><%= formatDate(notification.created_at) %></div>
      </article><% }) %></div>
    <% } %>
  </div>
</section>

<%- include('partials/page-end', { activePage }) %>
