<%- include("partials/layout-top", { title }) %>
<section class="card">
  <h1>Twitch setup wizard</h1>
  <p>We will verify your Twitch settings before saving anything.</p>
  <ol class="wizard-steps">
    <li>Create a Twitch developer app and copy the Client ID and Client Secret.</li>
    <li>Optional: generate a bot chat token and paste it with the bot username.</li>
    <li>Click <strong>Verify and save</strong>.</li>
  </ol>

  <% if (errors && errors.length) { %>
  <div class="flash error">
    <strong>We could not verify your Twitch settings:</strong>
    <ul class="wizard-list">
      <% errors.forEach((error) => { %>
      <li><%= error %></li>
      <% }) %>
    </ul>
  </div>
  <% } %>

  <% if (checks && checks.length) { %>
  <div class="flash success">
    <strong>Verification checks passed:</strong>
    <ul class="wizard-list">
      <% checks.forEach((check) => { %>
      <li><%= check %></li>
      <% }) %>
    </ul>
  </div>
  <% } %>

  <form method="post" action="<%= actionBase %>/verify" class="form-grid">
    <div class="field">
      <label>Client ID</label>
      <input name="twitch_client_id" value="<%= form.twitch_client_id || '' %>" required />
      <span class="hint">Find this in the Twitch Developer Console for your app.</span>
    </div>
    <div class="field">
      <label>Client Secret</label>
      <input name="twitch_client_secret" type="password" placeholder="Leave blank to keep existing" />
      <span class="hint">Generate it in the Twitch Developer Console.</span>
    </div>
    <div class="field full">
      <label>Redirect URI</label>
      <input
        name="twitch_redirect_uri"
        value="<%= form.twitch_redirect_uri || '' %>"
        placeholder="https://your-domain.com/auth/twitch/callback"
      />
      <span class="hint">Use the same redirect URI in the Twitch app settings.</span>
    </div>

    <div class="field full">
      <label>Twitch bot username (optional)</label>
      <input name="twitch_bot_username" value="<%= form.twitch_bot_username || '' %>" />
    </div>
    <div class="field full">
      <label>Twitch bot OAuth token (optional)</label>
      <input name="twitch_bot_oauth" type="password" placeholder="oauth:xxxx" />
      <span class="hint">Get a chat token from https://twitchapps.com/tmi/</span>
    </div>
    <div class="field full">
      <label>Twitch channels (comma-separated)</label>
      <input name="twitch_channels" value="<%= form.twitch_channels || '' %>" />
      <span class="hint">Example: cozycarnage, anotherchannel</span>
    </div>

    <button type="submit" class="button">Verify and save</button>
    <button
      type="submit"
      formaction="<%= actionBase %>/cancel"
      formnovalidate
      class="button subtle"
    >
      Cancel
    </button>
  </form>
</section>
<%- include("partials/layout-bottom") %>
