{% extends "base.html" %}
{% block title %}Add account{% endblock %}
{% block content %}
<div class="pagehead"><div><div class="crumbs"><a href="{{ url_for('admin_users') }}">Users</a> / New</div><h1>Add an account</h1></div></div>
<div class="card" style="max-width:640px">
  <form method="post">
    <input type="hidden" name="_csrf" value="{{ csrf_token() }}">
    <div class="field">
      <label>Account type</label>
      <select name="role" id="role">
        {% for r, label in [('student','Student'),('teacher','Teacher'),('admin','Admin / developer')] %}
          <option value="{{ r }}" {{ 'selected' if form.get('role') == r }}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="field"><label>Full name</label><input type="text" name="full_name" required value="{{ form.get('full_name','') }}"></div>
    <div class="cols2">
      <div class="field" id="classbox"><label>Class <span class="hint">(students)</span></label><input type="text" name="class_name" placeholder="e.g. JSS1A" value="{{ form.get('class_name','') }}"></div>
      <div class="field"><label id="userlabel">Student ID</label><input type="text" name="username" id="username" value="{{ form.get('username','') }}" placeholder="Leave blank to auto-generate">
        <div class="hint" id="userhint">Auto IDs look like RXH0001.</div></div>
    </div>
    <div class="field"><label>Password</label><input type="text" name="password" placeholder="Leave blank to generate one" value="{{ form.get('password','') }}">
      <div class="hint">You will see the password once on the next screen.</div></div>
    <button class="btn primary" type="submit">Create account</button>
  </form>
</div>
{% endblock %}
{% block scripts %}
<script>
  const role = document.getElementById('role');
  function sync() {
    const s = role.value === 'student';
    document.getElementById('classbox').style.display = s ? '' : 'none';
    document.getElementById('userlabel').textContent = s ? 'Student ID' : 'Username';
    document.getElementById('username').placeholder = s ? 'Leave blank to auto-generate' : 'Required';
    document.getElementById('username').required = !s;
    document.getElementById('userhint').textContent = s ? 'Auto IDs look like RXH0001.' : 'Letters and numbers, no spaces.';
  }
  role.addEventListener('change', sync); sync();
</script>
{% endblock %}