{% extends 'base.html' %}
{% block title %}New User — Settings{% endblock %}

{% block content %}
<div class="settings-wrapper">
  <div class="settings-header">
    <h2 class="section-title">Settings</h2>
    <div class="settings-tabs">
      <a href="{{ url_for('settings.index') }}" class="tab-link active">Users &amp; Access</a>
      <a href="{{ url_for('settings.api_keys') }}" class="tab-link">API Keys</a>
      <a href="{{ url_for('settings.modules') }}" class="tab-link">Modules</a>
    </div>
  </div>

  <div class="settings-section">
    <div class="section-toolbar">
      <h3>Create New User</h3>
      <a href="{{ url_for('settings.index') }}" class="btn btn-sm btn-secondary">← Back</a>
    </div>

    <form method="POST" class="form-card">
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Username</label>
          <input type="text" name="username" class="form-input" required autofocus />
        </div>
        <div class="form-group">
          <label class="form-label">Email</label>
          <input type="email" name="email" class="form-input" required />
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Password</label>
          <input type="password" name="password" class="form-input" required />
        </div>
        <div class="form-group form-group--check">
          <label class="form-label">Portal Role</label>
          <label class="toggle">
            <input type="checkbox" name="is_admin" />
            <span class="toggle-slider"></span>
            <span class="toggle-label">Platform administrator</span>
          </label>
        </div>
      </div>

      <div class="form-group">
        <label class="form-label">Application Access &amp; Role</label>
        <p style="font-size:0.82rem; color:var(--text-secondary); margin-bottom:0.75rem;">
          Select the access level for each application. "Admin" grants full management rights
          inside that app regardless of the portal role above.
        </p>
        <div class="app-role-grid">
          {% for app in registered_apps %}
          <div class="app-role-card" style="--app-color: {{ app.color }}; border-top-color: {{ app.color }};">
            <div class="app-role-card-header">
              <span style="font-size:1.5rem;">{{ app.icon }}</span>
              <strong>{{ app.name }}</strong>
            </div>
            <p class="app-role-desc">{{ app.description }}</p>
            <select name="role_{{ app['id'] }}" class="form-select app-role-new-select"
                    data-color="{{ app.color }}">
              <option value="none">— No access</option>
              <option value="user">✓ User</option>
              <option value="admin">★ Admin</option>
            </select>
          </div>
          {% endfor %}
        </div>
      </div>

      <div class="form-actions">
        <button type="submit" class="btn btn-primary">Create User</button>
        <a href="{{ url_for('settings.index') }}" class="btn btn-secondary">Cancel</a>
      </div>
    </form>
  </div>
</div>

<script>
  document.querySelectorAll('.app-role-new-select').forEach(function(sel) {
    function refresh() {
      var color = sel.dataset.color;
      if (sel.value !== 'none') {
        sel.style.borderColor = color;
        sel.style.color = color;
      } else {
        sel.style.borderColor = '';
        sel.style.color = '';
      }
    }
    refresh();
    sel.addEventListener('change', refresh);
  });
</script>
{% endblock %}