{% extends "base.html" %}
{% block title %}Initial setup — {{ app_name }}{% endblock %}
{% block body_class %}page-auth{% endblock %}
{% block content %}
<div class="auth-wrap">
  <div class="form-card form-card-wide">
    <div style="margin-bottom:1.25rem">
      <div class="brand-name" style="font-size:1.35rem">OneOpen</div>
      <p class="muted" style="margin-top:.25rem">
        {{ setup.label }} setup — create your {{ setup.org_label|lower }} and first admin
      </p>
    </div>

    <form id="setup-form">
      <h3 style="margin:0 0 .75rem;font-size:1rem">{{ setup.org_label }}</h3>
      <div class="form-group">
        <label for="org-name">{{ setup.org_label }} name</label>
        <input type="text" id="org-name" required placeholder="{% if setup.mode == 'enterprise' %}Acme Corp{% else %}My Lab{% endif %}" autocomplete="organization">
      </div>
      <div class="form-group">
        <label for="org-slug">Slug <span class="muted">(optional)</span></label>
        <input type="text" id="org-slug" placeholder="auto from name" autocomplete="off">
      </div>
      <div class="form-group">
        <label for="workspace-name">Default workspace</label>
        <input type="text" id="workspace-name" placeholder="Default workspace" value="Default workspace">
      </div>

      <h3 style="margin:1.25rem 0 .75rem;font-size:1rem">First admin account</h3>
      <div class="form-group">
        <label for="display-name">Display name</label>
        <input type="text" id="display-name" placeholder="Admin" autocomplete="name">
      </div>
      <div class="form-group">
        <label for="admin-email">Email</label>
        <input type="email" id="admin-email" required placeholder="you@company.com" autocomplete="username">
      </div>
      <div class="form-group">
        <label for="admin-password">Password</label>
        <input type="password" id="admin-password" required minlength="8" placeholder="At least 8 characters" autocomplete="new-password">
      </div>
      <div class="form-group">
        <label for="admin-password2">Confirm password</label>
        <input type="password" id="admin-password2" required minlength="8" autocomplete="new-password">
      </div>

      <p id="setup-error" class="field-hint" style="color:var(--danger);min-height:1.2em" role="alert"></p>
      <div class="form-actions" style="justify-content:flex-start;margin-top:1rem">
        <button class="btn btn-primary" id="setup-btn" type="submit">Create {{ setup.org_label|lower }} &amp; sign in</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
document.getElementById('setup-form')?.addEventListener('submit', async (e) => {
  e.preventDefault();
  const err = document.getElementById('setup-error');
  err.textContent = '';
  const pw = document.getElementById('admin-password').value;
  const pw2 = document.getElementById('admin-password2').value;
  if (pw.length < 8) {
    err.textContent = 'Password must be at least 8 characters';
    return;
  }
  if (pw !== pw2) {
    err.textContent = 'Passwords do not match';
    return;
  }
  const btn = document.getElementById('setup-btn');
  btn.disabled = true;
  try {
    await api('/api/setup', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        org_name: document.getElementById('org-name').value.trim(),
        org_slug: document.getElementById('org-slug').value.trim(),
        workspace_name: document.getElementById('workspace-name').value.trim(),
        display_name: document.getElementById('display-name').value.trim(),
        admin_email: document.getElementById('admin-email').value.trim(),
        admin_password: pw,
      }),
    });
    location.href = '/orgs';
  } catch (ex) {
    err.textContent = ex.message || 'Setup failed';
    btn.disabled = false;
  }
});
</script>
{% endblock %}