{% extends "base.html" %}
{% block title %}Contract Assignments — {{ user.display_name }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <div>
    <h2><i class="bi bi-briefcase text-primary me-2"></i>Contract Assignments</h2>
    <p class="text-muted mb-0">
      Inspector <strong>{{ user.display_name }}</strong> can only access facilities
      belonging to the contracts ticked below.
    </p>
  </div>
  <a href="{{ url_for('auth.list_users') }}" class="btn btn-sm btn-outline-secondary">
    <i class="bi bi-arrow-left"></i> Back to Users
  </a>
</div>

<form method="POST">
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

  <div class="card shadow-sm mb-4">
    <div class="card-header bg-light d-flex justify-content-between align-items-center">
      <span class="fw-semibold">Active Contracts</span>
      <div class="d-flex align-items-center gap-2">
        <span class="badge bg-primary" id="assignedCount">{{ assigned_pids|length }} assigned</span>
        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="setAll(true)">Select All</button>
        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="setAll(false)">Deselect All</button>
      </div>
    </div>

    {% if projects %}
    <div class="list-group list-group-flush">
      {% for project in projects %}
      <label class="list-group-item list-group-item-action d-flex align-items-center gap-3 py-3">
        <input class="form-check-input flex-shrink-0" type="checkbox"
               name="project_ids" value="{{ project.id }}"
               {{ 'checked' if project.id in assigned_pids }}>
        <div>
          <div class="fw-semibold">{{ project.name }}</div>
          {% if project.description %}
          <div class="text-muted small">{{ project.description }}</div>
          {% endif %}
          <div class="text-muted small">
            {{ project.facilities.count() }} facilit{{ 'ies' if project.facilities.count() != 1 else 'y' }}
          </div>
        </div>
      </label>
      {% endfor %}
    </div>
    {% else %}
    <div class="card-body text-muted">
      No active contracts exist. Create a contract first.
    </div>
    {% endif %}
  </div>

  {% if projects %}
  <div class="d-flex gap-2">
    <button type="submit" class="btn btn-primary">
      <i class="bi bi-floppy me-1"></i>Save Assignments
    </button>
    <a href="{{ url_for('auth.list_users') }}" class="btn btn-outline-secondary">Cancel</a>
  </div>
  {% endif %}
</form>
{% endblock %}

{% block extra_js %}
<script>
function setAll(checked) {
  document.querySelectorAll('input[name="project_ids"]').forEach(cb => cb.checked = checked);
  updateCount();
}

function updateCount() {
  const n = document.querySelectorAll('input[name="project_ids"]:checked').length;
  document.getElementById('assignedCount').textContent = n + ' assigned';
}

document.querySelectorAll('input[name="project_ids"]').forEach(cb => {
  cb.addEventListener('change', updateCount);
});
</script>
{% endblock %}