{% extends "base.html" %}
{% block title %}Create Group - {{ company.name }}{% endblock %}
{% block content %}
<div class="container mt-4">
  <a href="{{ url_for('company_admin', company_id=company.id) }}" class="btn btn-secondary mb-3">&larr; Back to Admin</a>
  
  <div class="card">
    <div class="card-header">
      <h4>Create New Group</h4>
    </div>
    <div class="card-body">
      <form method="POST">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
        <div class="mb-3">
          <label for="group_name" class="form-label">Group Name</label>
          <input type="text" class="form-control" id="group_name" name="name" required autofocus placeholder="e.g., Developers, Marketing Team">
        </div>
        
        <div class="mb-3">
          <label class="form-label">Description</label>
          <textarea class="form-control" id="group_description" name="description" rows="3" placeholder="Optional description for the group"></textarea>
        </div>
        
        <hr>
        
        <h5>Group Members</h5>
        <p class="text-muted">Select users to add to this group:</p>
        
        <div class="mb-3">
          <label for="users_select" class="form-label">Select Users</label>
          <select class="form-select" id="users_select" name="user_ids[]" multiple size="10">
          {% for user in users %}
            <option value="{{ user.id }}">{{ user.email }}</option>
          {% endfor %}
          </select>
        </div>
        
        <div class="alert alert-info">
          <strong>Tip:</strong> Hold Ctrl/Cmd to select multiple users at once.
        </div>
        
        <div class="mb-3">
          <button type="submit" class="btn btn-primary">Create Group</button>
          <a href="{{ url_for('company_admin', company_id=company.id) }}" class="btn btn-secondary">Cancel</a>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
// Auto-resize textarea
const textarea = document.getElementById('group_description');
if (textarea) {
  textarea.addEventListener('input', function() {
    this.style.height = 'auto';
    this.style.height = this.scrollHeight + 'px';
  });
}
</script>
{% endblock %}