<% const pageTitle = 'Dashboard · ETA Admin'; %>
<%- include('partials/head', { pageTitle }) %>
<body class="app">
  <button class="nav-toggle" id="navToggle" aria-label="Toggle navigation" aria-expanded="false">&#9776;</button>
  <div class="scrim" id="scrim" hidden style="display: none"></div>
  <%- include('partials/sidebar') %>

  <main class="main">
    <header class="main__header">
      <div>
        <h1 class="main__title">Dashboard</h1>
        <p class="muted">
          <%= records.length %> record<%= records.length === 1 ? '' : 's' %> in the
          <code>manage</code> table.
        </p>
      </div>
      <a href="/records/new" class="btn btn--primary">+ Add Record</a>
    </header>

    <% if (flash) { %>
      <div class="alert alert--<%= flash.type === 'success' ? 'success' : 'error' %>" role="status">
        <%= flash.message %>
      </div>
    <% } %>

    <% if (records.length === 0) { %>
      <div class="empty">
        <div class="empty__icon" aria-hidden="true">&#128193;</div>
        <h2 class="empty__title">No records yet</h2>
        <p class="muted">Create your first record and it will be inserted into PostgreSQL.</p>
        <a href="/records/new" class="btn btn--primary">Add your first record</a>
      </div>
    <% } else { %>
      <div class="table-wrap">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">Photo</th>
              <th scope="col">Title</th>
              <th scope="col">Payment Name</th>
              <th scope="col">Method 1 / Number</th>
              <th scope="col">Method 2 / Number</th>
              <th scope="col" class="ta-right">Ticket Price</th>
              <th scope="col" class="ta-right">Count</th>
              <th scope="col">Ticket Number</th>
              <th scope="col">Ready</th>
              <th scope="col" class="ta-right">Actions</th>
            </tr>
          </thead>
          <tbody>
            <% records.forEach(function (record) { %>
              <tr>
                <td data-label="Photo">
                  <% if (record.photo_path) { %>
                    <img class="thumb" src="<%= mediaUrl(record.photo_path) %>" alt="<%= record.title %>" loading="lazy" />
                  <% } else { %>
                    <span class="thumb thumb--empty" aria-label="No photo">&#128247;</span>
                  <% } %>
                </td>
                <td data-label="Title"><strong><%= record.title %></strong></td>
                <td data-label="Payment Name"><%= record.payment_name || '—' %></td>
                <td data-label="Method 1">
                  <div class="pay-cell">
                    <% if (record.payment_method1) { %><span class="chip"><%= record.payment_method1 %></span><% } %>
                    <% if (record.payment_number1) { %><span class="pay-cell__number"><%= record.payment_number1 %></span><% } %>
                    <% if (!record.payment_method1 && !record.payment_number1) { %>—<% } %>
                  </div>
                </td>
                <td data-label="Method 2">
                  <div class="pay-cell">
                    <% if (record.payment_method2) { %><span class="chip"><%= record.payment_method2 %></span><% } %>
                    <% if (record.payment_number2) { %><span class="pay-cell__number"><%= record.payment_number2 %></span><% } %>
                    <% if (!record.payment_method2 && !record.payment_number2) { %>—<% } %>
                  </div>
                </td>
                <td data-label="Ticket Price" class="ta-right">
                  <%= record.ticket_price === null ? '—' : Number(record.ticket_price).toFixed(2) %>
                </td>
                <td data-label="Count" class="ta-right">
                  <span class="num"><%= record.count === null || record.count === undefined ? '—' : record.count %></span>
                </td>
                <td data-label="Ticket Number">
                  <% if (record.ticket_number) { %>
                    <span class="pay-cell__number"><%= record.ticket_number %></span>
                  <% } else { %>—<% } %>
                </td>
                <td data-label="Ready">
                  <span class="badge badge--<%= record.ready ? 'yes' : 'no' %>">
                    <%= record.ready ? 'Ready' : 'Not ready' %>
                  </span>
                </td>
                <td data-label="Actions" class="ta-right">
                  <div class="row-actions">
                    <a class="btn btn--sm btn--ghost" href="/records/<%= record.id %>/edit">Edit</a>
                    <form method="POST" action="/records/<%= record.id %>/delete" data-confirm-delete="<%= record.title %>">
                      <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
                      <button type="submit" class="btn btn--sm btn--danger">Delete</button>
                    </form>
                  </div>
                </td>
              </tr>
            <% }); %>
          </tbody>
        </table>
      </div>
    <% } %>
  </main>

  <%- include('partials/confirm-modal') %>

  <script src="/static/js/app.js?v=<%= typeof assetVersion !== 'undefined' ? assetVersion : '1' %>" defer></script>
</body>
</html>
