{{ define "content" }}
<div class="container mx-auto mt-6">
  <h2 class="text-2xl font-bold mb-4">Assigned Addresses</h2>

  <table class="min-w-full border border-gray-300 shadow-md">
    <thead>
      <tr class="bg-gray-200">
        <th class="px-4 py-2 border">ID</th>
        <th class="px-4 py-2 border">Address</th>
        <th class="px-4 py-2 border">Assigned</th>
        <th class="px-4 py-2 border">Volunteer</th>
        <th class="px-4 py-2 border">Email</th>
        <th class="px-4 py-2 border">Phone</th>
        <th class="px-4 py-2 border">Appointment Date</th>
        <th class="px-4 py-2 border">Appointment Time</th>
      </tr>
    </thead>
    <tbody>
      {{range .AssignedList}}
      <tr class="hover:bg-gray-100">
        <td class="px-4 py-2 border">{{.AddressID}}</td>
        <td class="px-4 py-2 border">
          {{.Address}} {{.StreetName}} {{.StreetType}} {{.StreetQuadrant}}
        </td>
        <td class="px-4 py-2 border">
          {{if .Assigned}}✅ Yes{{else}}❌ No{{end}}
        </td>
        <td class="px-4 py-2 border">{{.UserName}}</td>
        <td class="px-4 py-2 border">{{.UserEmail}}</td>
        <td class="px-4 py-2 border">{{.UserPhone}}</td>
        <td class="px-4 py-2 border">{{.AppointmentDate}}</td>
        <td class="px-4 py-2 border">{{.AppointmentTime}}</td>
      </tr>
      {{end}}
    </tbody>
  </table>
</div>
{{ end }}