<%- include("partials/layout-top", { title }) %>
<section class="card">
  <h1>YouTube setup wizard</h1>
  <p>We will verify your YouTube settings before saving anything.</p>
  <ol class="wizard-steps">
    <li>Create a Google Cloud project and enable the YouTube Data API v3.</li>
    <li>Create OAuth credentials and add the redirect URI below.</li>
    <li>Connect the YouTube bot account to grant chat and moderation access.</li>
    <li>Click <strong>Verify and save</strong>.</li>
  </ol>

  <% if (errors && errors.length) { %>
  <div class="flash error">
    <strong>We could not verify your YouTube 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="youtube_client_id" value="<%= form.youtube_client_id || '' %>" required />
      <span class="hint">Copy this from Google Cloud OAuth credentials.</span>
    </div>
    <div class="field">
      <label>Client Secret</label>
      <input
        name="youtube_client_secret"
        type="password"
        placeholder="Leave blank to keep existing"
      />
      <span class="hint">Use the client secret from your OAuth credentials.</span>
    </div>
    <div class="field full">
      <label>Redirect URI</label>
      <input
        name="youtube_redirect_uri"
        value="<%= form.youtube_redirect_uri || '' %>"
        placeholder="https://your-domain.com/auth/youtube/callback"
      />
      <span class="hint">Use the same redirect URI in the OAuth client settings.</span>
    </div>

    <div class="field full">
      <label>YouTube bot connection</label>
      <% if (botConnected) { %>
      <span class="hint">
        Connected as
        <strong><%= botChannelName || "YouTube channel" %></strong>
        <% if (botChannelId) { %>
        (Channel ID: <%= botChannelId %>)
        <% } %>
      </span>
      <% } else { %>
      <span class="hint">Not connected yet.</span>
      <% } %>
    </div>

    <div class="field full">
      <button type="submit" formaction="<%= connectPath %>" class="button subtle">
        Connect YouTube bot
      </button>
    </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") %>
