{% extends "base.html" %}
{% block title %}Company Admin{% endblock %}
{% block content %}
<div class="container mt-4">
  <h2>{{ company.name }} Administration</h2>

  <!-- Groups Management Section -->
  <div class="card mt-3">
    <div class="card-header d-flex justify-content-between align-items-center">
      <span>Groups</span>
      <a href="{{ url_for('create_group_page', company_id=company.id) }}" class="btn btn-sm btn-primary">Create Group</a>
    </div>
    <div class="card-body">
      <div class="list-group" id="groupList">
        {% for group in groups %}
        <div class="list-group-item d-flex justify-content-between align-items-center">
          <div>
            <h5 class="mb-1">{{ group.name }}</h5>
            <small class="text-muted">
              {% if group.user_ids %}
                Members: {{ group.user_ids|json_parse|length }}
              {% else %}
                No members
              {% endif %}
            </small>
          </div>
          <div>
            <a href="{{ url_for('group_members_page', group_id=group.id) }}" class="btn btn-sm btn-secondary">Manage Members</a>
            <button type="button" class="btn btn-sm btn-danger" onclick="deleteGroup({{ group.id }}, '{{ group.name }}')">Delete</button>
          </div>
        </div>
        {% else %}
        <div class="alert alert-info">No groups found. Create one to organize your users.</div>
        {% endfor %}
      </div>
    </div>
  </div>

  <!-- Invite Users Section -->
  <div class="card mt-3">
    <div class="card-header">Invite Users</div>
    <div class="card-body">
      <form method="POST">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
        <div class="input-group">
          <input type="email" name="email" class="form-control" placeholder="Enter email to invite" required>
          <button type="submit" class="btn btn-primary">Send Invitation</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Active Invitations -->
  <div class="card mt-3">
    <div class="card-header">Active Invitations</div>
    <ul class="list-group list-group-flush">
      {% for invite in invitations %}
      <li class="list-group-item">
        {{ invite.email }} - Expires {{ invite.expires_at|datetimeformat }}
      </li>
      {% else %}
      <li class="list-group-item">No active invitations</li>
      {% endfor %}
    </ul>
  </div>

  <!-- Company Users -->
  <div class="card mt-3">
    <div class="card-header">Company Users</div>
    <ul class="list-group list-group-flush">
      {% for user in users %}
      <li class="list-group-item d-flex justify-content-between align-items-center">
        <div>
          {{ user.email }}
          {% if user.invited_by %}
          <small class="text-muted">(Invited by {{ user.invited_by.email }})</small>
          {% else %}
          <small class="text-muted">(Self-registered)</small>
          {% endif %}
        </div>
        <div>
          {% if user.is_company_admin %}
          <span class="badge bg-primary">Admin</span>
          {% endif %}
        </div>
      </li>
      {% endfor %}
    </ul>
  </div>

<script>
function deleteGroup(groupId, groupName) {
  if (confirm(`Are you sure you want to delete the group "${groupName}"? This will also remove its resource permissions.`)) {
    fetch(`/api/delete-group/${groupId}`, {
        method: 'POST',
        headers: {
            'X-CSRF-Token': document.querySelector('input[name="csrf_token"]').value
        }
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        alert('Group deleted successfully');
        location.reload();
      } else {
        alert('Error: ' + data.error);
      }
    })
    .catch(error => {
      console.error('Error:', error);
      alert('Error deleting group');
    });
  }
}
</script>
{% endblock %}