{% extends "base.html" %}
{% block title %}Team{% endblock %}
{% block page_title %}Team Management{% endblock %}
{% set active = "team" %}
{% block content %}
<div class="split-layout">
  <div class="card">
    <div class="card-header"><h3>Add Team Member</h3></div>
    <div class="card-body">
      <div class="alert alert-info" style="margin-bottom:14px;font-size:12px">
        <strong>Roles:</strong><br>
        <strong>Admin</strong> — Can manage all school data<br>
        <strong>Staff</strong> — Can view and edit timetables
      </div>
      <form hx-post="/team/add" hx-target="#team-list" hx-swap="outerHTML">
        <div class="form-group"><label class="form-label">Full Name</label><input type="text" name="name" class="form-input" required></div>
        <div class="form-group"><label class="form-label">Email</label><input type="email" name="email" class="form-input" required></div>
        <div class="form-group"><label class="form-label">Temporary Password</label><input type="password" name="password" class="form-input" required minlength="8"><div class="form-hint">They can change it after login</div></div>
        <div class="form-group"><label class="form-label">Role</label>
          <select name="role" class="form-select">
            <option value="staff">Staff (view + edit)</option>
            {% if user.role == 'owner' %}<option value="admin">Admin (full access)</option>{% endif %}
          </select>
        </div>
        <button type="submit" class="btn btn-primary w-full">Add Member</button>
      </form>
    </div>
  </div>
  <div id="team-list">{% include "partials/team_list.html" %}</div>
</div>
{% endblock %}