<% title = 'Dashboard — WHM Monitor' %>
<%- include('_header', { user }) %>

<div class="list-tabs">
  <% lists.forEach(l => { %>
    <a class="tab <%= l.id === activeListId ? 'active' : '' %>" href="/?list=<%= l.id %>">
      <%= l.name %><%= l.is_main ? ' (main)' : '' %>
    </a>
  <% }) %>
  <form method="POST" action="/lists/new" class="inline-form">
    <input type="text" name="name" placeholder="New list name" required>
    <button type="submit">+ Add list</button>
  </form>
</div>

<% const activeList = lists.find(l => l.id === activeListId); %>
<% if (activeList) { %>
  <div class="card public-toggle">
    <form method="POST" action="/lists/<%= activeList.id %>/public" class="inline-form">
      <% if (activeList.public_enabled) { %>
        <span class="status-up">Public status page enabled:</span>
        <a href="/status/<%= activeList.public_token %>" target="_blank">/status/<%= activeList.public_token %></a>
        <input type="hidden" name="enable" value="0">
        <button type="submit">Disable</button>
      <% } else { %>
        <span>No public status page for this list.</span>
        <input type="hidden" name="enable" value="1">
        <button type="submit">Enable public page</button>
      <% } %>
    </form>
  </div>
<% } %>

<div class="card">
  <table class="monitor-table">
    <thead>
      <tr>
        <th>Status</th>
        <th>Name</th>
        <th>Target</th>
        <th>Type</th>
        <th>Last check</th>
        <th>Response</th>
        <th>Interval</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <% if (monitors.length === 0) { %>
        <tr><td colspan="8" class="empty">No monitors in this list yet. <a href="/monitors/new?list=<%= activeListId %>">Add one</a>.</td></tr>
      <% } %>
      <% monitors.forEach(m => { %>
        <tr>
          <td><span class="badge badge-<%= m.current_status %>"><%= m.current_status %></span></td>
          <td><%= m.name %></td>
          <td><%= m.target %><%= m.type === 'tcp' ? ':' + m.port : '' %></td>
          <td><%= m.type.toUpperCase() %></td>
          <td><%= m.last_checked_at || '—' %></td>
          <td><%= m.last_response_ms != null ? m.last_response_ms + 'ms' : '—' %></td>
          <td><%= m.check_interval_min %> min</td>
          <td class="actions">
            <form method="POST" action="/monitors/<%= m.id %>/check" class="inline-form">
              <button type="submit">Check now</button>
            </form>
            <form method="POST" action="/monitors/<%= m.id %>/delete" class="inline-form" onsubmit="return confirm('Delete this monitor?')">
              <button type="submit" class="danger">Delete</button>
            </form>
          </td>
        </tr>
        <% if (m.last_error) { %>
          <tr class="error-row"><td colspan="8">⚠️ <%= m.last_error %></td></tr>
        <% } %>
      <% }) %>
    </tbody>
  </table>
</div>

<%- include('_footer') %>