<section class="card">
  <h2><%= title %></h2>
  <form method="post" action="/plugins/welcome_messages/messages/create" class="form-grid">
    <input type="hidden" name="pool" value="<%= pool %>" />
    <div class="field full">
      <label>New message</label>
      <textarea name="text" rows="3" placeholder="Welcome {displayname}!"></textarea>
      <p class="hint">Preview uses sample values after saving.</p>
    </div>
    <div class="field">
      <label>Enabled</label>
      <label class="switch">
        <input type="checkbox" class="switch-input" name="enabled" checked />
        <span class="switch-track" aria-hidden="true"></span>
        <span class="switch-text">On</span>
      </label>
    </div>
    <div class="field full">
      <button type="submit" class="button">Add message</button>
    </div>
  </form>

  <% if (!messages.length) { %>
  <p>No messages configured.</p>
  <% } else { %>
  <div class="form-grid">
    <% messages.forEach((message) => { %>
    <div class="card">
      <form method="post" action="/plugins/welcome_messages/messages/<%= message.id %>/update" class="form-grid">
        <input type="hidden" name="pool" value="<%= pool %>" />
        <div class="field full">
          <label>Message</label>
          <textarea name="text" rows="3"><%= message.text %></textarea>
        </div>
        <div class="field">
          <label>Status</label>
          <label class="switch">
            <input type="checkbox" class="switch-input" name="enabled" <%= message.enabled && !message.archived ? "checked" : "" %> <%= message.archived ? "disabled" : "" %> />
            <span class="switch-track" aria-hidden="true"></span>
            <span class="switch-text"><%= message.archived ? "Archived" : message.enabled ? "On" : "Off" %></span>
          </label>
        </div>
        <div class="field full">
          <p class="hint">Preview: <%= previewMessage(message.text) %></p>
        </div>
        <div class="field full">
          <% if (!message.archived) { %>
          <button type="submit" class="button">Save message</button>
          <% } %>
        </div>
      </form>
      <div class="inline-actions">
        <form method="post" action="/plugins/welcome_messages/messages/<%= message.id %>/duplicate" class="inline-form">
          <input type="hidden" name="pool" value="<%= pool %>" />
          <button type="submit" class="button subtle">Duplicate</button>
        </form>
        <% if (message.archived) { %>
        <form method="post" action="/plugins/welcome_messages/messages/<%= message.id %>/restore" class="inline-form">
          <input type="hidden" name="pool" value="<%= pool %>" />
          <button type="submit" class="button">Restore</button>
        </form>
        <% } else { %>
        <form method="post" action="/plugins/welcome_messages/messages/<%= message.id %>/archive" class="inline-form" data-confirm-mode="modal" data-confirm-title="Archive welcome message" data-confirm-text="Archive this welcome message?" data-confirm-label="Archive message">
          <input type="hidden" name="pool" value="<%= pool %>" />
          <button type="submit" class="button danger">Archive</button>
        </form>
        <% } %>
      </div>
    </div>
    <% }) %>
  </div>
  <% } %>
</section>
