{{ define "content" }}
<div class="flex-1 flex flex-col overflow-hidden">
  <!-- Toolbar -->
  <div class="bg-gray-50 border-b border-gray-200 px-6 py-3">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-4 text-sm">
        <div class="relative">
          <i
            class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"
          ></i>
          <input
            type="text"
            placeholder="Search Appointments"
            class="w-full pl-8 pr-3 py-2 text-sm border border-gray-200 rounded bg-white"
          />
        </div>
      </div>
    </div>
  </div>

  <!-- Table -->
  <div
    class="flex-1 overflow-x-auto overflow-y-auto bg-white border border-gray-100"
  >
    <table class="w-full divide-gray-200 text-sm table-auto">
      <thead class="bg-gray-50 divide-gray-200 sticky top-0">
        <tr
          class="text-left text-gray-700 font-medium border-b border-gray-200"
        >
          <th class="px-6 py-3 whitespace-nowrap">Poll</th>
          <th class="px-6 py-3 whitespace-nowrap">Address</th>
          <th class="px-6 py-3 whitespace-nowrap">Coordinates</th>
          <th class="px-6 py-3 whitespace-nowrap">Appointment Date</th>
          <th class="px-6 py-3 whitespace-nowrap">Appointment Time</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200">
        {{ range .Appointments }}
        <tr class="hover:bg-gray-50">
          <td class="px-6 py-3 whitespace-nowrap">
            {{ if .HasPollResponse }}
            <span class="{{ .PollButtonClass }}"> {{ .PollButtonText }} </span>
            {{ else }}
            <a
              href="/poll?address_id={{ .AddressID }}"
              class="{{ .PollButtonClass }}"
            >
              {{ .PollButtonText }}
            </a>
            {{ end }}
          </td>
          <td class="px-6 py-3 whitespace-nowrap">{{ .Address }}</td>
          <td class="px-6 py-3 whitespace-nowrap">
            <a
              href="https://www.google.com/maps/search/?api=1&query={{ .Latitude }},{{ .Longitude }}"
              target="_blank"
              class="text-blue-600 hover:underline"
            >
              ({{ .Latitude }}, {{ .Longitude }})
            </a>
          </td>
          <td class="px-6 py-3 whitespace-nowrap">
            {{ .AppointmentDate.Format "2006-01-02" }}
          </td>
          <td class="px-6 py-3 whitespace-nowrap">
            {{ .AppointmentTime.Format "15:04" }}
          </td>
        </tr>
        {{ else }}
        <tr>
          <td colspan="5" class="px-6 py-8 text-center text-gray-500">
            No appointments found
          </td>
        </tr>
        {{ end }}
      </tbody>
    </table>
  </div>
</div>
{{ end }}