source: Klonkt/src/views/pages/shows.ejs@ b258a79

<%
  var ss = (typeof shows !== 'undefined') ? shows : [];
  var st = (typeof notifyState !== 'undefined') ? notifyState : null;
%>
<section class="sh">
  <h1 class="sh-h1"><%= t('agenda.title') %></h1>

  <% if (st === 'done') { %><div class="sh-msg"><%= t('agenda.msg_done') %></div>
  <% } else if (st === 'check') { %><div class="sh-msg"><%= t('agenda.msg_check') %></div>
  <% } else if (st === 'error') { %><div class="sh-msg sh-bad"><%= (typeof notifyMsg!=='undefined')?notifyMsg:'Er ging iets mis.' %></div><% } %>

  <% if (!ss.length) { %>
    <p class="sh-empty"><%= t('agenda.empty') %></p>
  <% } else { %>
    <ul class="sh-list">
      <% ss.forEach(function(s){ %>
        <li class="sh-item">
          <span class="sh-date">
            <span class="sh-day"><%= (s.date||'').slice(8) %></span>
            <span class="sh-mon"><%= (s.date||'').slice(5,7) %>/<%= (s.date||'').slice(0,4) %></span>
          </span>
          <span class="sh-meta">
            <span class="sh-city"><%= s.city %><% if (s.country) { %>, <%= s.country %><% } %></span>
            <% if (s.venue) { %><span class="sh-venue"><%= s.venue %><% if (s.time) { %> · <%= s.time %><% } %></span><% } else if (s.time) { %><span class="sh-venue"><%= s.time %></span><% } %>
            <% if (s.notes) { %><span class="sh-notes"><%= s.notes %></span><% } %>
          </span>
          <% if (s.ticket_url) { %><a class="sh-tix" href="<%= s.ticket_url %>" target="_blank" rel="noopener"><%= t('agenda.tickets') %></a><% } %>
        </li>
      <% }); %>
    </ul>
  <% } %>

  <% if (!(typeof footerNewsletter !== 'undefined' && footerNewsletter)) { %>
  <div class="sh-notify">
    <h2 class="sh-h2"><%= t('agenda.notify_h') %></h2>
    <p class="sh-sub"><%= t('agenda.notify_sub') %></p>
    <form method="POST" action="<%= siteUrlBase %>/shows/notify" class="sh-form">
      <input type="email" name="email" required placeholder="<%= t('common.email_placeholder') %>" autocomplete="email">
      <button type="submit" class="sh-btn"><%= t('agenda.notify_btn') %></button>
    </form>
  </div>
  <% } %>
</section>

<style>
  .sh { max-width: 640px; margin: 0 auto; padding: 32px 18px 64px; }
  .sh-h1 { font-size: clamp(26px,5vw,38px); margin: 0 0 18px; }
  .sh-msg { padding: 11px 14px; border-radius: 10px; background: rgba(60,160,90,.15); margin-bottom: 16px; }
  .sh-bad { background: rgba(200,60,60,.15); }
  .sh-list { list-style: none; margin: 0 0 36px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .sh-item { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border: 1px solid rgba(128,128,128,.2); border-radius: 12px; }
  .sh-date { flex: 0 0 auto; text-align: center; min-width: 54px; }
  .sh-day { display: block; font-size: 22px; font-weight: 700; line-height: 1; }
  .sh-mon { font-size: 11px; opacity: .6; }
  .sh-meta { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
  .sh-city { font-weight: 600; }
  .sh-venue { font-size: 13px; opacity: .7; }
  .sh-notes { font-size: 12.5px; opacity: .6; margin-top: 2px; }
  .sh-tix { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; background: var(--accent,#6b8f71); color: #fff; text-decoration: none; font-weight: 600; font-size: 13px; }
  .sh-empty { opacity: .7; margin-bottom: 36px; }
  .sh-notify { border-top: 1px solid rgba(128,128,128,.2); padding-top: 24px; }
  .sh-h2 { margin: 0 0 6px; font-size: 18px; }
  .sh-sub { opacity: .8; margin: 0 0 14px; }
  .sh-form { display: flex; gap: 10px; flex-wrap: wrap; }
  .sh-form input { flex: 1 1 200px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(128,128,128,.4); background: transparent; color: inherit; font-size: 15px; }
  .sh-btn { padding: 12px 18px; border-radius: 10px; border: none; background: var(--accent,#6b8f71); color: #fff; font-weight: 600; cursor: pointer; }
</style>