<%- include("../../../src/web/views/partials/layout-top", { title }) %>

<section class="card">
  <div class="section-header">
    <div>
      <h1>Welcome Messages</h1>
      <p class="command-subtitle">Send randomized Discord welcome messages when members join.</p>
    </div>
  </div>
  <div class="callout">
    <strong>Allowed placeholders</strong>
    <p>
      <% allowedPlaceholders.forEach((name) => { %>
      <code>{<%= name %>}</code>
      <% }) %>
    </p>
  </div>
</section>

<section class="card">
  <h2>Diagnostics</h2>
  <div class="table-wrap">
    <table class="table">
      <tbody>
        <tr>
          <th>Discord client</th>
          <td><%= diagnostics.clientAvailable ? (diagnostics.ready ? "Ready" : "Available, not ready") : "Unavailable" %></td>
        </tr>
        <tr>
          <th>Guild members intent</th>
          <td><%= diagnostics.memberIntent %><% if (diagnostics.memberIntent !== "configured") { %> - join events may not fire<% } %></td>
        </tr>
        <tr>
          <th>Welcome channel</th>
          <td><%= diagnostics.channel.message %></td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

<section class="card">
  <h2>Delivery</h2>
  <% if (isAdmin) { %>
  <form method="post" action="/plugins/welcome_messages/settings" class="form-grid">
    <div class="field">
      <label>Posting enabled</label>
      <label class="switch">
        <input type="checkbox" class="switch-input" name="enabled" <%= config.enabled ? "checked" : "" %> />
        <span class="switch-track" aria-hidden="true"></span>
        <span class="switch-text"><%= config.enabled ? "On" : "Off" %></span>
      </label>
    </div>
    <div class="field">
      <label>Welcome-back messages</label>
      <label class="switch">
        <input type="checkbox" class="switch-input" name="welcome_back_enabled" <%= config.welcomeBackEnabled ? "checked" : "" %> />
        <span class="switch-track" aria-hidden="true"></span>
        <span class="switch-text"><%= config.welcomeBackEnabled ? "On" : "Off" %></span>
      </label>
    </div>
    <div class="field full">
      <label>Welcome channel</label>
      <% if (textChannels.length) { %>
      <select name="channel_id">
        <option value="">Select a Discord text channel</option>
        <% textChannels.forEach((channel) => { %>
        <option value="<%= channel.id %>" <%= channel.id === config.channelId ? "selected" : "" %>><%= channel.label %></option>
        <% }) %>
      </select>
      <% } else { %>
      <input name="channel_id" value="<%= config.channelId %>" placeholder="Discord text channel ID" />
      <% } %>
      <p class="hint">Only regular text channels are accepted.</p>
    </div>
    <div class="field full">
      <button type="submit" class="button">Save delivery settings</button>
    </div>
  </form>
  <% } else { %>
  <p>Posting is <strong><%= config.enabled ? "enabled" : "disabled" %></strong>.</p>
  <p>Welcome-back messages are <strong><%= config.welcomeBackEnabled ? "enabled" : "disabled" %></strong>.</p>
  <p class="hint">Only admins can change delivery settings or the welcome channel.</p>
  <% } %>
</section>

<%- include("./message-section", {
  title: "Welcome messages",
  pool: "welcomeMessages",
  messages: config.welcomeMessages,
  previewMessage
}) %>

<%- include("./message-section", {
  title: "Welcome-back messages",
  pool: "welcomeBackMessages",
  messages: config.welcomeBackMessages,
  previewMessage
}) %>

<%- include("../../../src/web/views/partials/layout-bottom") %>
