<%
  const isEdit = mode === 'edit';
  const pageTitle = (isEdit ? 'Edit record' : 'Add record') + ' · ETA Admin';
  const action = isEdit ? '/records/' + record.id : '/records';
%>
<%- 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"><%= isEdit ? 'Edit record' : 'Add record' %></h1>
        <p class="muted">
          <%= isEdit ? 'Updates are written to the manage table on save.' : 'This record will be inserted into the manage table.' %>
        </p>
      </div>
      <a href="/dashboard" class="btn btn--ghost">Back to records</a>
    </header>

    <% if (errors && errors.length) { %>
      <div class="alert alert--error" role="alert">
        <strong>Please fix the following:</strong>
        <ul class="alert__list">
          <% errors.forEach(function (e) { %><li><%= e %></li><% }); %>
        </ul>
      </div>
    <% } %>

    <form method="POST" action="<%= action %>" enctype="multipart/form-data" class="form card" novalidate>
      <input type="hidden" name="_csrf" value="<%= csrfToken %>" />

      <div class="form__grid">
        <section class="form__photo">
          <span class="field__label">Photo</span>
          <div class="photo-preview">
            <% if (record.photo_path) { %>
              <img id="photoPreview" src="<%= mediaUrl(record.photo_path) %>" alt="Current photo" />
            <% } else { %>
              <img id="photoPreview" alt="Photo preview" hidden />
              <span class="photo-preview__empty" id="photoEmpty">No photo selected</span>
            <% } %>
          </div>

          <label class="btn btn--ghost btn--block" for="photo">
            <%= record.photo_path ? 'Replace photo' : 'Choose photo' %>
          </label>
          <input
            class="visually-hidden"
            type="file"
            id="photo"
            name="photo"
            accept="image/jpeg,image/png,image/gif,image/webp"
          />
          <p class="hint" id="photoHint">JPG, PNG, GIF or WEBP · max 5 MB</p>

          <% if (isEdit && record.photo_path) { %>
            <button
              type="submit"
              class="btn btn--sm btn--danger btn--block"
              form="removePhotoForm"
            >Remove photo</button>
          <% } %>
        </section>

        <section class="form__fields">
          <div class="field">
            <label class="field__label" for="title">Title <span class="req">*</span></label>
            <input class="field__input" type="text" id="title" name="title"
                   value="<%= record.title || '' %>" required maxlength="200" />
          </div>

          <div class="field">
            <label class="field__label" for="payment_name">Payment Name <span class="req">*</span></label>
            <input class="field__input" type="text" id="payment_name" name="payment_name"
                   value="<%= record.payment_name || '' %>" required maxlength="255" />
          </div>

          <div class="field-row">
            <div class="field">
              <label class="field__label" for="payment_method1">Payment Method 1</label>
              <input class="field__input" type="text" id="payment_method1" name="payment_method1"
                     value="<%= record.payment_method1 || '' %>" maxlength="100"
                     placeholder="e.g. Telebirr" />
            </div>
            <div class="field">
              <label class="field__label" for="payment_number1">Payment Number 1</label>
              <input class="field__input" type="text" id="payment_number1" name="payment_number1"
                     value="<%= record.payment_number1 || '' %>" maxlength="100"
                     placeholder="e.g. 0912345678" inputmode="tel" />
            </div>
          </div>

          <div class="field-row">
            <div class="field">
              <label class="field__label" for="payment_method2">Payment Method 2</label>
              <input class="field__input" type="text" id="payment_method2" name="payment_method2"
                     value="<%= record.payment_method2 || '' %>" maxlength="100"
                     placeholder="e.g. CBE Birr" />
            </div>
            <div class="field">
              <label class="field__label" for="payment_number2">Payment Number 2</label>
              <input class="field__input" type="text" id="payment_number2" name="payment_number2"
                     value="<%= record.payment_number2 || '' %>" maxlength="100"
                     placeholder="e.g. 1000123456789" inputmode="tel" />
            </div>
          </div>

          <div class="field">
            <label class="field__label" for="ticket_price">Ticket Price <span class="req">*</span></label>
            <input class="field__input" type="number" id="ticket_price" name="ticket_price"
                   value="<%= record.ticket_price === null || record.ticket_price === undefined ? '' : record.ticket_price %>"
                   step="0.01" min="0" required inputmode="decimal" />
            <p class="hint">Numeric with up to two decimal places.</p>
          </div>

          <div class="field-row">
            <div class="field">
              <label class="field__label" for="count">Count</label>
              <input class="field__input" type="number" id="count" name="count"
                     value="<%= record.count === null || record.count === undefined ? '' : record.count %>"
                     step="1" min="0" inputmode="numeric" placeholder="0" />
              <p class="hint">Whole number. Empty counts as 0.</p>
            </div>
            <div class="field">
              <label class="field__label" for="ticket_number">Ticket Number</label>
              <input class="field__input" type="text" id="ticket_number" name="ticket_number"
                     value="<%= record.ticket_number || '' %>" maxlength="100"
                     placeholder="e.g. ET-0042" />
            </div>
          </div>

          <div class="field">
            <label class="field__label" for="result_count">Result Count</label>
            <input class="field__input" type="number" id="result_count" name="result_count"
                   value="<%= record.result_count === null || record.result_count === undefined ? '' : record.result_count %>"
                   step="1" min="0" inputmode="numeric" placeholder="0" />
            <p class="hint">Whole number. Empty counts as 0.</p>
          </div>

          <div class="field">
            <span class="field__label">Ready</span>
            <label class="check" for="ready">
              <input type="checkbox" id="ready" name="ready" value="true"
                     <%= record.ready ? 'checked' : '' %> />
              <span class="check__text">Mark this record as ready</span>
            </label>
            <p class="hint">Stored as <code>true</code> when ticked, <code>false</code> when not.</p>
          </div>
        </section>
      </div>

      <div class="form__actions">
        <a href="/dashboard" class="btn btn--ghost">Cancel</a>
        <button type="submit" class="btn btn--primary">
          <%= isEdit ? 'Update record' : 'Save record' %>
        </button>
      </div>
    </form>

    <% if (isEdit && record.photo_path) { %>
      <form id="removePhotoForm" method="POST" action="/records/<%= record.id %>/photo/delete" hidden>
        <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
      </form>
    <% } %>
  </main>

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