{{ define "content" }}
<div class="p-6 space-y-6">
  <h1 class="text-2xl font-bold mb-4">Team Builder</h1>

  {{range .TeamLeads}}
  <div class="mb-4 p-4 bg-white rounded shadow">
    <div class="flex justify-between items-center">
      <span class="font-bold">{{.Name}}</span>
      <form action="/team_builderx" method="POST" class="flex space-x-2">
        <input type="hidden" name="team_lead_id" value="{{.ID}}" />
        <select name="volunteer_id" class="border px-2 py-1 rounded">
          <option value="">--Select Volunteer--</option>
          {{range $.UnassignedVolunteers}}
          <option value="{{.ID}}">{{.Name}}</option>
          {{end}}
        </select>
        <button type="submit" class="bg-blue-500 text-white px-3 py-1 rounded">
          Add
        </button>
      </form>
    </div>

    <!-- List of already assigned volunteers -->
    {{if .Volunteers}}
    <ul class="mt-2 list-disc list-inside">
      {{range .Volunteers}}
      <li>{{.Name}}</li>
      {{end}}
    </ul>
    {{else}}
    <p class="text-gray-500 mt-1">No volunteers assigned yet.</p>
    {{end}}
  </div>
  {{end}}
</div>
{{ end }}