Lumi/plugins/quotes/views/quotes.ejs

<%- include("../../../src/web/views/partials/layout-top", { title }) %>
<section class="card">
  <div class="section-header">
    <div>
      <h1>Quotes</h1>
      <p class="command-subtitle">Store, search, and manage memorable quotes.</p>
    </div>
  </div>
</section>

<% if (editingQuote) { %>
<section class="card">
  <h2>Edit quote #<%= editingQuote.id %></h2>
  <form method="post" action="/plugins/quotes/quotes/<%= editingQuote.id %>/update" class="form-grid">
    <div class="field full">
      <label>Quote text</label>
      <textarea name="quote_text" rows="3"><%= editingQuote.quote_text %></textarea>
    </div>
    <div class="field">
      <label>Quoted by</label>
      <input name="quoter" value="<%= editingQuote.quoter %>" />
    </div>
    <div class="field">
      <label>Game name</label>
      <input name="game_name" value="<%= editingQuote.game_name || '' %>" />
    </div>
    <div class="field">
      <label>Quote date/time</label>
      <input type="datetime-local" name="quote_datetime" value="<%= formatDateInput(editingQuote.quote_datetime) %>" />
    </div>
    <div class="field">
      <label>Hidden</label>
      <label class="switch">
        <input type="checkbox" class="switch-input" name="hidden" <%= editingQuote.hidden ? 'checked' : '' %> />
        <span class="switch-track" aria-hidden="true"></span>
        <span class="switch-text"><%= editingQuote.hidden ? 'Hidden' : 'Visible' %></span>
      </label>
    </div>
    <div class="field">
      <label>Archived</label>
      <label class="switch">
        <input type="checkbox" class="switch-input" name="archived" <%= editingQuote.archived ? 'checked' : '' %> />
        <span class="switch-track" aria-hidden="true"></span>
        <span class="switch-text"><%= editingQuote.archived ? 'Archived' : 'Active' %></span>
      </label>
    </div>
    <div class="field full">
      <button type="submit" class="button">Save changes</button>
      <a class="button subtle" href="/plugins/quotes">Cancel</a>
    </div>
    <div class="field full">
      <p class="hint">
        Last edited by <%= editingQuote.edited_by || 'system' %>
        <%= editingQuote.edited_last ? `on ${formatDateTime(editingQuote.edited_last)}` : '' %>
      </p>
    </div>
  </form>
</section>
<% } %>

<section class="card">
  <h2>Add quote</h2>
  <form method="post" action="/plugins/quotes/quotes/create" class="form-grid">
    <div class="field full">
      <label>Quote text</label>
      <textarea name="quote_text" rows="3" placeholder="This is a quote"></textarea>
    </div>
    <div class="field">
      <label>Quoted by</label>
      <input name="quoter" placeholder="Streamer" />
    </div>
    <div class="field">
      <label>Game name</label>
      <input name="game_name" placeholder="Optional" />
    </div>
    <div class="field">
      <label>Quote date/time</label>
      <input type="datetime-local" name="quote_datetime" value="<%= formatDateInput(Date.now()) %>" />
    </div>
    <div class="field">
      <label>Hidden</label>
      <label class="switch">
        <input type="checkbox" class="switch-input" name="hidden" />
        <span class="switch-track" aria-hidden="true"></span>
        <span class="switch-text">Visible</span>
      </label>
    </div>
    <div class="field">
      <label>Archived</label>
      <label class="switch">
        <input type="checkbox" class="switch-input" name="archived" />
        <span class="switch-track" aria-hidden="true"></span>
        <span class="switch-text">Active</span>
      </label>
    </div>
    <div class="field full">
      <button type="submit" class="button">Add quote</button>
    </div>
  </form>
</section>

<section class="card">
  <h2>All quotes</h2>
  <% if (!quotes.length) { %>
  <p>No quotes recorded yet.</p>
  <% } else { %>
  <div class="table-tools">
    <input
      type="search"
      class="table-search"
      placeholder="Search quotes"
      data-table-filter="quotes"
    />
    <div class="table-controls">
      <select class="table-search" data-table-filter-select="quotes" data-filter-key="status">
        <option value="">All statuses</option>
        <option value="active">Active</option>
        <option value="hidden">Hidden</option>
        <option value="archived">Archived</option>
      </select>
      <label class="table-page-size">
        Show
        <select data-table-size="quotes">
          <option value="25">25</option>
          <option value="50">50</option>
          <option value="100">100</option>
          <option value="250">250</option>
        </select>
      </label>
    </div>
  </div>
  <div class="table-wrap">
    <table
      class="table"
      data-table="quotes"
      data-pageable="true"
      data-page-size="25"
      data-page-sizes="25,50,100,250"
    >
      <thead>
        <tr>
          <th data-sort="id">ID</th>
          <th data-sort="text">Quote</th>
          <th data-sort="quoter">Quoted by</th>
          <th data-sort="game">Game</th>
          <th data-sort="date">Date</th>
          <th data-sort="status">Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <% quotes.forEach((quote) => { %>
        <% const status = quote.archived ? 'archived' : quote.hidden ? 'hidden' : 'active'; %>
        <% const dateLabel = formatDateTime(quote.quote_datetime); %>
        <tr
          data-search="<%= `${quote.id} ${quote.quote_text} ${quote.quoter} ${quote.game_name || ''} ${dateLabel}`.toLowerCase() %>"
          data-id="<%= quote.id %>"
          data-text="<%= (quote.quote_text || '').toLowerCase() %>"
          data-quoter="<%= (quote.quoter || '').toLowerCase() %>"
          data-game="<%= (quote.game_name || '').toLowerCase() %>"
          data-date="<%= quote.quote_datetime %>"
          data-status="<%= status %>"
        >
          <td>#<%= quote.id %></td>
          <td><%= quote.quote_text %></td>
          <td><%= quote.quoter %></td>
          <td><%= quote.game_name || '-' %></td>
          <td><%= dateLabel %></td>
          <td><%= status %></td>
          <td>
            <a class="button subtle" href="/plugins/quotes?edit=<%= quote.id %>">Edit</a>
            <% if (quote.hidden) { %>
            <form method="post" action="/plugins/quotes/quotes/<%= quote.id %>/unhide" class="inline-form">
              <button type="submit" class="button subtle">Unhide</button>
            </form>
            <% } else { %>
            <form method="post" action="/plugins/quotes/quotes/<%= quote.id %>/hide" class="inline-form">
              <button type="submit" class="button subtle">Hide</button>
            </form>
            <% } %>
            <% if (quote.archived) { %>
            <form method="post" action="/plugins/quotes/quotes/<%= quote.id %>/restore" class="inline-form">
              <button type="submit" class="button">Restore</button>
            </form>
            <% } else { %>
            <form method="post" action="/plugins/quotes/quotes/<%= quote.id %>/archive" class="inline-form">
              <button type="submit" class="button danger">Archive</button>
            </form>
            <% } %>
          </td>
        </tr>
        <% }) %>
      </tbody>
    </table>
  </div>
  <div class="table-pagination" data-table-pagination="quotes">
    <button type="button" class="button subtle" data-page-prev>Previous</button>
    <span class="table-page-label" data-page-label>Page 1 of 1</span>
    <button type="button" class="button subtle" data-page-next>Next</button>
  </div>
  <% } %>
</section>
<%- include("../../../src/web/views/partials/layout-bottom") %>