{{ define "content" }}
<div class="min-h-screen bg-gray-50">
  <!-- Main Content -->
  <div class="p-6 space-y-6">
    {{range .TeamLeads}} {{ $teamLeadID := .ID }}
    <!-- store team lead ID -->

    <div class="bg-white border border-gray-200 shadow-sm">
      <!-- Team Lead Header -->
      <div
        class="flex justify-between items-center px-4 py-3 border-b border-gray-200"
      >
        <div class="flex items-center space-x-3">
          <i class="fas fa-user-tie text-blue-600"></i>
          <span class="font-semibold text-gray-900">{{.Name}}</span>
        </div>
        <form
          action="/team_builder"
          method="POST"
          class="flex items-center space-x-3"
        >
          <input type="hidden" name="team_lead_id" value="{{.ID}}" />

          <select
            name="volunteer_id"
            class="px-3 py-2 border border-gray-300 bg-white text-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
          >
            <option value="">--Select Volunteer--</option>
            {{range $.UnassignedVolunteers}}
            <option value="{{.ID}}">{{.Name}}</option>
            {{end}}
          </select>
          <button
            type="submit"
            class="px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
          >
            <i class="fas fa-plus mr-2"></i> Add
          </button>
        </form>
      </div>

      <!-- Assigned Volunteers -->
      <div class="px-6 py-4">
        {{if .Volunteers}}
        <ul class="space-y-2">
          {{range .Volunteers}}
          <li
            class="flex items-center justify-between text-gray-800 border-b border-gray-200 py-2"
          >
            <div class="flex items-center space-x-2">
              <i class="fas fa-user text-gray-500"></i>
              <span>{{.Name}}</span>
            </div>
            <form
              action="/team_builder/remove_volunteer"
              method="POST"
              class="flex-shrink-0"
            >
              <input
                type="hidden"
                name="team_lead_id"
                value="{{ $teamLeadID }}"
              />
              <input type="hidden" name="volunteer_id" value="{{.ID}}" />
              <button
                type="submit"
                aria-label="Remove {{.Name}}"
                class="px-3 py-1 bg-red-600 text-white hover:bg-red-700 focus:outline-none focus:ring-1 focus:ring-red-500"
              >
                <i class="fas fa-times"></i> Remove
              </button>
            </form>
          </li>
          {{end}}
        </ul>
        {{else}}
        <p class="text-gray-500 italic">No volunteers assigned yet.</p>
        {{end}}
      </div>
    </div>
    {{end}}
  </div>
</div>

<style>
  /* Square corners across UI */
  * {
    border-radius: 0 !important;
  }

  input,
  select,
  button {
    transition: all 0.2s ease;
  }

  button {
    font-weight: 500;
    letter-spacing: 0.025em;
  }
</style>
{{ end }}