<div class="page-header">
  <div>
    <div class="eyebrow">Communication</div>
    <h1>Notices</h1>
    <p class="desc">Announcements shared with staff, students and parents.</p>
  </div>
  <a href="/notices/new" class="btn btn-primary"><i class="fa-solid fa-bullhorn"></i> Post Notice</a>
</div>

<div class="grid-3">
  <% if (notices.length === 0) { %>
    <div class="card" style="grid-column: 1 / -1;"><div class="empty-state"><i class="fa-regular fa-bell"></i><h4>No notices posted yet</h4></div></div>
  <% } %>
  <% var accents = ['brand','violet','sky','amber','green','red']; %>
  <% notices.forEach(function(n, i) { %>
    <div class="card card-pad">
      <div style="display:flex; justify-content:space-between; align-items:flex-start;">
        <div class="icon-badge accent-<%= accents[i % accents.length] %>" style="background:var(--accent-light); color:var(--accent);"><i class="fa-solid fa-bullhorn"></i></div>
        <form method="POST" action="/notices/<%= n.id %>?_method=DELETE" onsubmit="return confirm('Delete this notice?');">
          <button class="btn btn-ghost btn-sm" type="submit"><i class="fa-solid fa-trash"></i></button>
        </form>
      </div>
      <h3 style="font-size:15px; margin-top:14px;"><%= n.title %></h3>
      <p style="font-size:13px; color:var(--muted); line-height:1.6; margin-top:6px;"><%= n.content %></p>
      <div style="display:flex; justify-content:space-between; align-items:center; margin-top:16px;">
        <span class="badge badge-gray"><%= n.audience %></span>
        <span style="font-size:12px; color:var(--muted);"><%= new Date(n.date).toLocaleDateString('en-US', { month:'short', day:'numeric', year:'numeric' }) %></span>
      </div>
    </div>
  <% }); %>
</div>
