<%- include("partials/layout-top", { title }) %>
<section class="card">
  <%- include("partials/page-header", {
    eyebrow: "Administration",
    pageTitle: "Settings",
    description: "Manage core behavior, updates, and platform integrations."
  }) %>
  <form method="post" action="/admin/settings" class="form-grid" data-lumi-settings-form>
    <fieldset class="lumi-field-group">
      <legend>General and updates</legend>
      <p class="hint lumi-field-group-intro">Set Lumi's public name, command behavior, and how application updates are checked.</p>
      <div class="lumi-field-group-grid">
    <div class="field">
      <label>Site title</label>
      <input name="site_title" value="<%= settings.site_title || '' %>" />
    </div>
    <div class="field">
      <label>Command prefix</label>
      <input name="command_prefix" value="<%= settings.command_prefix || '!' %>" />
    </div>
    <div class="field">
      <label>Auto update enabled</label>
      <label class="switch">
        <input
          type="checkbox"
          class="switch-input"
          name="auto_update_enabled"
          <%= settings.auto_update_enabled ? 'checked' : '' %>
        />
        <span class="switch-track" aria-hidden="true"></span>
        <span class="switch-text"><%= settings.auto_update_enabled ? 'Enabled' : 'Disabled' %></span>
      </label>
    </div>
    <div class="field">
      <label>Auto update interval (minutes)</label>
      <input name="auto_update_interval_minutes" value="<%= settings.auto_update_interval_minutes || 60 %>" />
    </div>
    <div class="field">
      <label>Repository target</label>
      <input name="git_remote" value="<%= settings.git_remote || 'origin' %>" placeholder="origin or https://git.example/owner/repo(.git)" />
      <p class="hint">Use the Lumi repository URL. Advanced installs may use a configured remote alias such as <code>origin</code>. The <code>.git</code> suffix is optional.</p>
    </div>
    <div class="field">
      <label>Update branch</label>
      <% const selectedUpdateBranch = settings.git_branch || 'main'; %>
      <select name="git_branch">
        <option value="main" <%= selectedUpdateBranch === 'main' ? 'selected' : '' %>>Stable</option>
        <option value="experimental" <%= selectedUpdateBranch === 'experimental' ? 'selected' : '' %>>Experimental</option>
        <% if (selectedUpdateBranch !== 'main' && selectedUpdateBranch !== 'experimental') { %>
        <option value="<%= selectedUpdateBranch %>" selected>Experimental · <%= selectedUpdateBranch %></option>
        <% } %>
      </select>
      <p class="hint">Stable uses <code>main</code>. Experimental follows the newest <code>experimental-*</code> branch. Deploy and change an exact production branch from <a href="/admin/updates">Updates</a>.</p>
    </div>
    <div class="field full">
      <div class="inline-actions">
        <%- include("partials/state-button", {
          type: "submit",
          states: [
            { id: "idle", text: "Save settings" },
            { id: "loading", text: "Saving", spinner: true },
            { id: "success", text: "Saved" }
          ]
        }) %>
        <%- include("partials/state-button", {
          type: "submit",
          classes: "subtle",
          attrs: "formaction=\"/admin/check-update\" formmethod=\"post\" data-update-action",
          states: [
            { id: "idle", text: "Check for updates" },
            { id: "loading", text: "Checking", spinner: true },
            { id: "success", text: "Checked" }
          ]
        }) %>
        <%- include("partials/state-button", {
          type: "submit",
          classes: "subtle",
          attrs: "formaction=\"/admin/update\" formmethod=\"post\" data-update-action data-confirm-mode=\"modal\" data-confirm-title=\"Update Lumi\" data-confirm-text=\"Download the recommended update, create a backup, apply it, and restart Lumi if it succeeds.\" data-confirm-label=\"Update Lumi\"",
          states: [
            { id: "idle", text: "Update from repository" },
            { id: "loading", text: "Updating", spinner: true },
            { id: "success", text: "Updated" }
          ]
        }) %>
      </div>
      <p class="hint">Repository update checks use the configured target and selected channel.</p>
      <p class="hint" data-update-inline-result aria-live="polite"></p>
    </div>

      </div>
    </fieldset>

    <fieldset class="lumi-field-group">
      <legend>Platform integration</legend>
      <p class="hint">Enable or disable platform adapters and run the setup wizards.</p>
      <div class="platform-grid">
        <% (platforms || []).forEach((platform) => { %>
        <div class="platform-card">
          <div class="platform-card-header">
            <strong><%= platform.label %></strong>
            <% if (!platform.supported) { %>
            <span class="level-pill">Coming soon</span>
            <% } %>
          </div>
          <label class="platform-toggle-row switch">
            <input
              type="checkbox"
              class="switch-input"
              name="<%= platform.enabledKey %>"
              <%= platform.enabled ? 'checked' : '' %>
              <%= platform.supported ? '' : 'disabled' %>
            />
            <span class="switch-track" aria-hidden="true"></span>
            <span class="switch-text"><%= platform.enabled ? 'Enabled' : 'Disabled' %></span>
          </label>
          <% if (platform.supported) { %>
          <div class="platform-meta">
            <a class="link" href="<%= platform.wizardPath %>">Open wizard</a>
            <span class="hint"><%= platform.configured ? 'Configured' : 'Not configured' %></span>
          </div>
          <% } else { %>
          <p class="hint">Support planned for a future update.</p>
          <% } %>
        </div>
        <% }) %>
      </div>
    </fieldset>

    <% if (localhostLoginAvailable) { %>
    <fieldset class="lumi-field-group">
      <legend>Localhost login</legend>
      <p class="hint">Development-only login shown only on localhost. Defaults are admin / admin until changed.</p>
      <div class="lumi-field-group-grid">
        <div class="field">
          <label>Localhost username</label>
          <input name="localhost_login_username" value="<%= settings.localhost_login_username || 'admin' %>" autocomplete="off" />
        </div>
        <div class="field">
          <label>New localhost password</label>
          <input name="localhost_login_password" type="password" placeholder="Leave blank to keep current password" autocomplete="new-password" />
        </div>
      </div>
    </fieldset>
    <% } %>

    <fieldset class="lumi-field-group custom-placeholder-builder" data-custom-placeholder-builder>
      <legend>Reusable text values</legend>
      <div class="section-header">
        <div>
          <p class="hint">Create values such as <code>{{custom.stream.title}}</code> once, then insert them into supported command and content fields.</p>
        </div>
        <button type="button" class="button subtle" data-custom-placeholder-add>Add value</button>
      </div>
      <div class="custom-placeholder-list" data-custom-placeholder-list>
        <% (settings.custom_placeholders || []).forEach((entry) => { %>
        <div class="custom-placeholder-row" data-custom-placeholder-row>
          <label>Name<span class="hint">Starts with custom.</span><div class="input-prefix"><span>custom.</span><input name="custom_placeholder_name" value="<%= entry.name %>" placeholder="stream.title" /></div></label>
          <label>Value<textarea name="custom_placeholder_value" rows="2" maxlength="2000"><%= entry.value %></textarea></label>
          <label>Who may receive it<select name="custom_placeholder_visibility"><option value="user" <%= entry.visibility === "user" ? "selected" : "" %>>Users and staff</option><option value="mod" <%= entry.visibility === "mod" ? "selected" : "" %>>Moderators and admins</option><option value="admin" <%= entry.visibility === "admin" ? "selected" : "" %>>Admins only</option></select></label>
          <label>Description<input name="custom_placeholder_description" value="<%= entry.description || "" %>" maxlength="240" placeholder="Where this value should be used" /></label>
          <button type="button" class="button danger" data-custom-placeholder-remove>Remove</button>
        </div>
        <% }) %>
      </div>
      <p class="hint">Names use lowercase letters, numbers, underscores, and dots. Access rules apply to suggestions, previews, and final rendering; values marked for staff cannot be sent to ordinary users.</p>
    </fieldset>

    <fieldset class="lumi-field-group">
      <legend>Homepage content</legend>
      <p class="hint">Choose the links and featured content shown on the public homepage.</p>
      <div class="homepage-builder" data-homepage-builder="links">
      <div class="section-header">
        <div>
          <h3>Homepage link buttons</h3>
          <p class="hint">Add public or role-limited links shown as cards on the homepage.</p>
        </div>
        <button type="button" class="button subtle" data-homepage-add="links">Add link</button>
      </div>
      <textarea name="homepage_link_buttons" class="homepage-json-source" rows="8" spellcheck="false"><%= JSON.stringify(settings.homepage_link_buttons || [], null, 2) %></textarea>
      <div class="homepage-builder-list" data-homepage-list="links"></div>
      </div>
      <div class="homepage-builder" data-homepage-builder="heroes">
      <div class="section-header">
        <div>
          <h3>Featured homepage content</h3>
          <p class="hint">Lumi checks enabled items from lowest priority number to highest and shows the first one that is available.</p>
        </div>
        <button type="button" class="button subtle" data-homepage-add="heroes">Add featured content</button>
      </div>
      <textarea name="homepage_hero_entries" class="homepage-json-source" rows="10" spellcheck="false"><%= JSON.stringify(settings.homepage_hero_entries || [], null, 2) %></textarea>
      <div class="homepage-builder-list" data-homepage-list="heroes"></div>
      <details class="advanced-theme-controls">
        <summary>Advanced JSON</summary>
        <p class="hint">Expert option: edit the saved configuration directly only when the form does not offer the setting you need.</p>
      </details>
      </div>
    </fieldset>

    <div class="form-actions"><%- include("partials/state-button", {
      type: "submit",
      states: [
        { id: "idle", text: "Save settings" },
        { id: "loading", text: "Saving", spinner: true },
        { id: "success", text: "Saved" }
      ]
    }) %></div>
  </form>
</section>
<section class="card">
  <div class="section-header"><div><h2>Navigation icons</h2><p class="hint">Upload SVG or PNG icons for sidebar sublinks.</p></div></div>
  <div class="nav-icon-grid">
    <% (navIconItems || []).forEach((item) => { %>
    <div class="nav-icon-row">
      <div class="nav-icon-info">
        <img class="nav-icon-preview" src="<%= item.icon %>" alt="" />
        <div>
          <strong><%= item.label %></strong>
          <div class="hint"><%= item.path %></div>
        </div>
      </div>
      <div class="nav-icon-actions">
        <form method="post" action="/admin/settings/nav-icons" enctype="multipart/form-data" class="inline-form">
          <input type="hidden" name="item_id" value="<%= item.id %>" />
          <div class="input-action-row">
          <input type="file" name="icon_file" accept="image/svg+xml,image/png" aria-label="Upload icon for <%= item.label %>" />
          <button type="submit" class="button subtle">Upload</button>
          </div>
        </form>
        <form method="post" action="/admin/settings/nav-icons/reset" class="inline-form" data-confirm-mode="modal" data-confirm-title="Reset navigation icon" data-confirm-text="Reset the custom icon for <%= item.label %> to its default." data-confirm-label="Reset icon">
          <input type="hidden" name="item_id" value="<%= item.id %>" />
          <button type="submit" class="button subtle">Reset</button>
        </form>
      </div>
    </div>
    <% }) %>
  </div>
</section>
<script src="/homepage-builder.js?v=<%= assetVersion %>" defer></script>
<script src="/custom-placeholders.js?v=<%= assetVersion %>" defer></script>
<%- include("partials/layout-bottom") %>
