{% extends "base.html" %}
{% block title %}Create operator account — PhantomSignal{% endblock %}
{% block content %}
<div style="max-width:24rem;margin:4rem auto;padding:0 1rem;">
  <h1 style="margin-bottom:0.5rem;">Create operator account</h1>
  <p style="color:var(--text-dim);margin-bottom:1.5rem;">
    The setup token is in the server's startup output. On Docker, run
    <code>docker logs phantomsignal</code>.
  </p>
  <form action="{{ url_for('auth.setup') }}" method="POST">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="form-group" style="margin-bottom:0.75rem;">
      <label class="form-label" for="setup_token">SETUP TOKEN</label>
      <input class="input-field" id="setup_token" name="setup_token" autocomplete="off" required autofocus>
    </div>
    <div class="form-group" style="margin-bottom:0.75rem;">
      <label class="form-label" for="username">USERNAME</label>
      <input class="input-field" id="username" name="username" autocomplete="username" required>
    </div>
    <div class="form-group" style="margin-bottom:0.75rem;">
      <label class="form-label" for="password">PASSWORD (at least {{ min_length }} characters)</label>
      <input class="input-field" id="password" name="password" type="password" minlength="{{ min_length }}" autocomplete="new-password" required>
    </div>
    <div class="form-group" style="margin-bottom:1.25rem;">
      <label class="form-label" for="confirm_password">CONFIRM PASSWORD</label>
      <input class="input-field" id="confirm_password" name="confirm_password" type="password" minlength="{{ min_length }}" autocomplete="new-password" required>
    </div>
    <button type="submit" class="btn btn-primary">Create account</button>
  </form>
</div>
{% endblock %}