source: Klonkt/src/views/pages/admin-shows.ejs@ d70cab7

<%
  var ss = (typeof shows !== 'undefined') ? shows : [];
  var msg = (typeof msg !== 'undefined') ? msg : '';
  var smtp = (typeof smtp !== 'undefined') ? smtp : false;
  var nc = (typeof notifyCount !== 'undefined') ? notifyCount : 0;
%>
<section class="ash">
  <p><a href="/admin" class="btn">&larr; <%= t('ashow.back_admin') %></a></p>
  <h1><%= t('ashow.title') %></h1>

  <% if (msg) { %><div class="ash-msg ash-<%= (typeof msgKind!=='undefined')?msgKind:'' %>"><%= msg %></div><% } %>

  <% var agOn = (typeof agendaEnabled !== 'undefined') && agendaEnabled; %>
  <form method="POST" action="<%= siteUrlBase %>/admin/shows/toggle" style="margin:0 0 14px">
    <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600">
      <input type="checkbox" name="enabled" value="1" <%= agOn ? 'checked' : '' %> onchange="this.form.submit()" style="width:18px;height:18px;accent-color:var(--accent)">
      <span><%= t('ashow.show_toggle') %> <small style="font-weight:400;opacity:.7"><%= t('ashow.show_toggle_hint') %></small></span>
    </label>
    <noscript><button type="submit" class="btn"><%= t('ashow.save') %></button></noscript>
  </form>
  <% if (!agOn) { %><div class="ash-msg"><%= t('ashow.off_notice_1') %> <strong><%= t('ashow.off') %></strong> <%= t('ashow.off_notice_2') %></div><% } %>

  <p class="ash-note"><strong><%= nc %></strong> <%= t('ashow.subscribers') %>
    <% if (!smtp) { %><br><%= t('ashow.smtp_warn') %><% } %></p>

  <form method="POST" action="<%= siteUrlBase %>/admin/shows" class="ash-form">
    <div class="ash-grid">
      <label><%= t('ashow.f_date') %><input type="date" name="date" required></label>
      <label><%= t('ashow.f_time') %><input type="time" name="time"></label>
      <label><%= t('ashow.f_city') %><input type="text" name="city" required placeholder="Amsterdam"></label>
      <label><%= t('ashow.f_country') %><input type="text" name="country" placeholder="NL"></label>
      <label class="ash-wide"><%= t('ashow.f_venue') %><input type="text" name="venue" placeholder="Paradiso"></label>
      <label class="ash-wide"><%= t('ashow.f_ticket') %><input type="url" name="ticket_url" placeholder="https://..."></label>
      <label class="ash-wide"><%= t('ashow.f_notes') %><input type="text" name="notes" placeholder="<%= t('ashow.f_notes_ph') %>"></label>
    </div>
    <label class="ash-check"><input type="checkbox" name="notify" value="1" <%= smtp ? '' : 'disabled' %>> <%= t('ashow.notify_label') %><%= smtp ? '' : ' ' + t('ashow.smtp_required') %></label>
    <button type="submit" class="ash-add"><%= t('ashow.add_event') %></button>
  </form>

  <% if (ss.length) { %>
    <% var _delConfirm = t('ashow.del_confirm'); %>
    <ul class="ash-list">
      <% ss.forEach(function(s){ %>
        <li class="ash-item">
          <span class="ash-when"><%= s.date %><% if (s.time) { %> <%= s.time %><% } %></span>
          <span class="ash-where"><%= s.city %><% if (s.venue) { %> — <%= s.venue %><% } %></span>
          <form method="POST" action="<%= siteUrlBase %>/admin/shows/<%= s.id %>/delete" onsubmit="return confirm('<%= _delConfirm %>')" style="margin:0">
            <button type="submit" class="ash-del">🗑</button>
          </form>
        </li>
      <% }); %>
    </ul>
  <% } else { %>
    <p class="ash-empty"><%= t('ashow.empty') %></p>
  <% } %>
</section>

<style>
  .ash { max-width: 680px; margin: 0 auto; padding: 24px 18px 64px; }
  .ash h1 { margin: .4rem 0 14px; }
  .ash-msg { padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; }
  .ash-ok { background: rgba(60,160,90,.15); } .ash-bad { background: rgba(200,60,60,.15); }
  .ash-note { font-size: 13px; opacity: .8; margin: 0 0 18px; }
  .ash-form { border: 1px solid rgba(128,128,128,.2); border-radius: 14px; padding: 16px; margin-bottom: 24px; }
  /* Mobiel-eerst: één kolom (twee 1fr-kolommen met niet-krimpbare date/text-inputs
     liepen samen ~374px > telefoonbreedte). Twee kolommen pas vanaf 520px. */
  .ash-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
  @media (min-width: 520px) { .ash-grid { grid-template-columns: 1fr 1fr; } }
  .ash-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; min-width: 0; }
  .ash-grid .ash-wide { grid-column: 1 / -1; }
  .ash-grid input { min-width: 0; padding: 9px 11px; border-radius: 8px; border: 1px solid rgba(128,128,128,.4); background: transparent; color: inherit; font: inherit; font-weight: 400; }
  .ash-check { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 13.5px; }
  .ash-add { padding: 10px 18px; border-radius: 10px; border: none; background: var(--accent,#6b8f71); color: #fff; font-weight: 600; cursor: pointer; }
  .ash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .ash-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(128,128,128,.18); border-radius: 10px; }
  .ash-when { font-variant-numeric: tabular-nums; font-weight: 600; flex: 0 0 auto; }
  .ash-where { flex: 1 1 auto; opacity: .85; }
  .ash-del { background: none; border: none; cursor: pointer; font-size: 16px; opacity: .6; }
  .ash-empty { opacity: .7; }
</style>