{{ define "content" }}
<div class="flex-1 flex flex-col overflow-hidden ">
  <!-- Main Content -->
  <div class="flex-1 p-4 md:p-6 overflow-auto">
    <div class="space-y-6">
      {{ range .TeamLeads }} 
      {{ $teamLeadID := .ID }}
      <!-- Team Lead Card -->
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        <!-- Team Lead Header -->
        <div class="bg-gray-50 border-b border-gray-200 px-6 py-4">
          <div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4">
            <!-- Team Lead Info -->
            <div class="flex items-center space-x-3">
              <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
                <i class="fas fa-user-tie text-white"></i>
              </div>
              <div>
                <h3 class="text-lg font-semibold text-gray-900">{{ .Name }}</h3>
                <p class="text-sm text-gray-600">
                  {{ if .Volunteers }}
                    {{ len .Volunteers }} volunteer{{ if ne (len .Volunteers) 1 }}s{{ end }} assigned
                  {{ else }}
                    No volunteers assigned
                  {{ end }}
                </p>
              </div>
            </div>

            <!-- Add Volunteer Form -->
            {{ if $.UnassignedVolunteers }}
            <form action="/team_builder" method="POST" class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 w-full lg:w-auto">
              <input type="hidden" name="team_lead_id" value="{{ .ID }}" />
              <select
                name="volunteer_id"
                class="px-4 py-2 text-sm border border-gray-300 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 min-w-0 flex-1 sm:w-64"
                required
              >
                <option value="">Select volunteer to assign</option>
                {{ range $.UnassignedVolunteers }}
                <option value="{{ .ID }}">{{ .Name }}</option>
                {{ end }}
              </select>
              <button
                type="submit"
                class="flex items-center justify-center px-4 py-2 bg-blue-500 text-white text-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium rounded-lg transition-colors whitespace-nowrap"
              >
                <i class="fas fa-plus mr-2"></i> Add Volunteer
              </button>
            </form>
            {{ else }}
            <div class="text-sm text-gray-500 bg-gray-100 px-4 py-2 rounded-lg">
              <i class="fas fa-info-circle mr-2"></i>
              All volunteers have been assigned
            </div>
            {{ end }}
          </div>
        </div>

        <!-- Desktop Volunteer List -->
        <div class="hidden md:block">
          {{ if .Volunteers }}
          <div class="overflow-x-auto">
            <table class="w-full">
              <thead class="bg-gray-50 border-b border-gray-200">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Volunteer
                  </th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Status
                  </th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    Actions
                  </th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-100">
                {{ range .Volunteers }}
                <tr class="hover:bg-gray-50">
                  <td class="px-6 py-4">
                    <div class="flex items-center space-x-3">
                      <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center">
                        <i class="fas fa-user text-gray-500 text-sm"></i>
                      </div>
                      <div class="text-sm font-medium text-gray-900">{{ .Name }}</div>
                    </div>
                  </td>
                  <td class="px-6 py-4">
                    <span class="inline-flex items-center px-2 py-1 text-xs font-medium bg-green-100 text-green-700 rounded-full">
                      <i class="fas fa-check mr-1"></i> Assigned
                    </span>
                  </td>
                  <td class="px-6 py-4">
                    <form action="/team_builder/remove_volunteer" method="POST" class="inline-block">
                      <input type="hidden" name="team_lead_id" value="{{ $teamLeadID }}" />
                      <input type="hidden" name="volunteer_id" value="{{ .ID }}" />
                      <button
                        type="submit"
                        class="text-red-400 hover:text-red-600 p-1"
                        title="Remove {{ .Name }} from team"
                        onclick="return confirm('Remove {{ .Name }} from this team?')"
                      >
                        <i class="fas fa-trash"></i>
                      </button>
                    </form>
                  </td>
                </tr>
                {{ end }}
              </tbody>
            </table>
          </div>
          {{ else }}
          <div class="px-6 py-8 text-center">
            <div class="text-gray-400 mb-4">
              <i class="fas fa-users text-4xl"></i>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2">No volunteers assigned</h3>
            <p class="text-gray-500">Use the form above to assign volunteers to this team lead.</p>
          </div>
          {{ end }}
        </div>

        <!-- Mobile Volunteer Cards -->
        <div class="md:hidden">
          {{ if .Volunteers }}
          <div class="divide-y divide-gray-100">
            {{ range .Volunteers }}
            <div class="px-6 py-4">
              <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3 flex-1 min-w-0">
                  <div class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-user text-gray-500"></i>
                  </div>
                  <div class="flex-1 min-w-0">
                    <div class="text-sm font-medium text-gray-900 truncate">{{ .Name }}</div>
                    <div class="flex items-center mt-1">
                      <span class="inline-flex items-center px-2 py-1 text-xs font-medium bg-green-100 text-green-700 rounded-full">
                        <i class="fas fa-check mr-1"></i> Assigned
                      </span>
                    </div>
                  </div>
                </div>
                <form action="/team_builder/remove_volunteer" method="POST" class="ml-4">
                  <input type="hidden" name="team_lead_id" value="{{ $teamLeadID }}" />
                  <input type="hidden" name="volunteer_id" value="{{ .ID }}" />
                  <button
                    type="submit"
                    class="px-3 py-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-lg transition-colors text-sm font-medium"
                    onclick="return confirm('Remove {{ .Name }} from this team?')"
                  >
                    <i class="fas fa-trash mr-1"></i> Remove
                  </button>
                </form>
              </div>
            </div>
            {{ end }}
          </div>
          {{ else }}
          <div class="px-6 py-8 text-center">
            <div class="text-gray-400 mb-4">
              <i class="fas fa-users text-4xl"></i>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2">No volunteers assigned</h3>
            <p class="text-gray-500 text-sm">Use the form above to assign volunteers to this team lead.</p>
          </div>
          {{ end }}
        </div>
      </div>
      {{ end }}
      
      <!-- No Team Leads State -->
      {{ if not .TeamLeads }}
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        <div class="px-6 py-12 text-center">
          <div class="text-gray-400 mb-4">
            <i class="fas fa-user-tie text-6xl"></i>
          </div>
          <h3 class="text-xl font-medium text-gray-900 mb-2">No Team Leads Available</h3>
          <p class="text-gray-500">Add team leads to start building teams and assigning volunteers.</p>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</div>

<style>
  /* Consistent styling with addresses component */
  input, select, button {
    transition: all 0.2s ease;
  }

  button {
    font-weight: 500;
    letter-spacing: 0.025em;
  }

  /* Ensure proper responsive behavior */
  @media (max-width: 640px) {
    .space-x-4 > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(1rem * var(--tw-space-x-reverse));
      margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
    }
  }
</style>
{{ end }}