{% extends "base.html" %}
{% block title %}Group Members - {{ group.name }}{% endblock %}
{% block content %}
<div class="container mt-4">
  <a href="{{ url_for('company_admin', company_id=group.company_id) }}" class="btn btn-secondary mb-3">&larr; Back to Admin</a>
  
  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h4>Group: {{ group.name }}</h4>
      <a href="{{ url_for('create_group_page', company_id=group.company_id) }}" class="btn btn-sm btn-primary">Create New Group</a>
    </div>
    <div class="card-body">
      {% if group.user_ids %}
        {% set group_member_ids = group.user_ids|json_parse %}
        {% if group_member_ids and group_member_ids|length > 0 %}
      <div class="alert alert-info">
        <strong>Group Members ({{ group_member_ids|length }}):</strong>
        <ul class="mb-0">
          {% for uid in group_member_ids %}
            {% set user = users|selectattr('id', 'equalto', uid)|first %}
            {% if user %}
            <li>
              <span class="fw-bold">{{ user.email }}</span>
              {% if user.id == current_user.id %}
              <span class="badge bg-secondary">You</span>
              {% endif %}
            </li>
            {% else %}
            <li>
              <span class="fw-bold text-muted">User ID: {{ uid }}</span>
            </li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>
        {% endif %}
        {% else %}
      <div class="alert alert-warning">
        <strong>No members yet.</strong> Use the form below to add users to this group.
      </div>
      {% endif %}
      
      <h5>Add/Remove Members</h5>
      
      <form method="POST" class="mb-3">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
        <div class="row">
          <div class="col-md-8">
            <select class="form-select" name="user_id">
              <option value="">Select a user...</option>
              {% for user in users %}
              {% if user.company_id == group.company_id %}
              <option value="{{ user.id }}">{{ user.email }}</option>
              {% endif %}
              {% endfor %}
            </select>
          </div>
          <div class="col-md-4">
            <div class="btn-group w-100">
              <button type="submit" name="action" value="add" class="btn btn-success">Add to Group</button>
              {% if group.user_ids %}
              <button type="submit" name="action" value="remove" class="btn btn-danger">Remove from Group</button>
              {% endif %}
            </div>
          </div>
        </div>
      </form>
      
      <hr>
      
      <h5>Current Members</h5>
      {% if group_member_ids and group_member_ids|length > 0 %}
      <div class="list-group">
        {% for uid in group_member_ids %}
          {% set user = users|selectattr('id', 'equalto', uid)|first %}
          {% if user %}
          <a href="{{ url_for('company_admin', company_id=group.company_id) }}" class="list-group-item list-group-item-action">
            <div class="d-flex w-100 justify-content-between align-items-center">
              <h6 class="mb-0">{{ user.email }}</h6>
              <small>Member</small>
            </div>
          </a>
          {% endif %}
        {% endfor %}
      </div>
      {% else %}
      <p class="text-muted">No members added yet. Use the form above to add users.</p>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}