{{ define "content" }}
<!-- Main Content -->
<div class="flex-1 flex flex-col overflow-hidden">
  <!-- Top Navigation -->
  <div class="bg-white border-b border-gray-200 px-6 py-3">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-4">
        <div class="flex items-center gap-2">
          <i
            class="{{if .PageIcon}}{{.PageIcon}}{{else}}fas fa-map-marker-alt{{end}} text-green-600"
          ></i>
          <span class="text-sm font-medium"> Address Database </span>
        </div>
      </div>
      <!-- Records Info -->
      {{if .Pagination}}
      <div class="text-sm text-gray-600">
        Showing {{.Pagination.StartRecord}}-{{.Pagination.EndRecord}} of
        {{.Pagination.TotalRecords}} addresses
      </div>
      {{end}}
    </div>
  </div>

  <!-- Toolbar -->
  <div class="bg-gray-50 border-b border-gray-200 px-6 py-3">
    <div class="flex items-center justify-between">
      <!-- Search -->
      <div class="flex items-center gap-4 text-sm">
        <div class="flex items-center gap-2">
          <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 Addresses"
              class="w-full pl-8 pr-3 py-2 text-sm border border-gray-200 rounded bg-white"
            />
          </div>
        </div>
        <div class="flex items-center gap-4">
          <button
            class="px-6 py-2 border border-gray-300 text-gray-700 text-sm font-medium hover:bg-gray-50 transition-colors rounded"
          >
            <i class="fas fa-upload mr-2"></i>Import Data
          </button>
        </div>
      </div>

      <!-- Pagination Controls -->
      {{if .Pagination}}
      <div class="flex items-center gap-4 text-sm">
        <!-- Page Size Selector -->
        <div class="flex items-center gap-2">
          <label for="pageSize" class="text-gray-600">Per page:</label>
          <select
            id="pageSize"
            onchange="changePageSize(this.value)"
            class="px-3 py-1 text-sm border border-gray-200 rounded bg-white"
          >
            <option value="20" {{if eq .Pagination.PageSize 20}}selected{{end}}>
              20
            </option>
            <option value="50" {{if eq .Pagination.PageSize 50}}selected{{end}}>
              50
            </option>
            <option
              value="100"
              {{if
              eq
              .Pagination.PageSize
              100}}selected{{end}}
            >
              100
            </option>
          </select>
        </div>

        <!-- Page Navigation -->
        <div class="flex items-center gap-2">
          <!-- Previous Button -->
          <button
            onclick="goToPage({{.Pagination.PreviousPage}})"
            {{if
            not
            .Pagination.HasPrevious}}disabled{{end}}
            class="px-3 py-1 text-sm border border-gray-200 rounded {{if .Pagination.HasPrevious}}hover:bg-gray-50 text-gray-700{{else}}text-gray-400 cursor-not-allowed{{end}}"
          >
            <i class="fas fa-chevron-left"></i>
          </button>

          <!-- Page Info -->
          <span class="px-2 text-gray-600">
            {{.Pagination.CurrentPage}} / {{.Pagination.TotalPages}}
          </span>

          <!-- Next Button -->
          <button
            onclick="goToPage({{.Pagination.NextPage}})"
            {{if
            not
            .Pagination.HasNext}}disabled{{end}}
            class="px-3 py-1 text-sm border border-gray-200 rounded {{if .Pagination.HasNext}}hover:bg-gray-50 text-gray-700{{else}}text-gray-400 cursor-not-allowed{{end}}"
          >
            <i class="fas fa-chevron-right"></i>
          </button>
        </div>
      </div>
      {{end}}
    </div>
  </div>

  <!-- Table Wrapper -->
  <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">
      <!-- Table Head -->
      <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-4 py-3 whitespace-nowrap">ID</th>
          <th class="px-6 py-3 whitespace-nowrap">Address</th>
          <th class="px-6 py-3 whitespace-nowrap">Street</th>
          <th class="px-6 py-3 whitespace-nowrap">House #</th>
          <th class="px-6 py-3 whitespace-nowrap">Longitude</th>
          <th class="px-6 py-3 whitespace-nowrap">Latitude</th>
          <th class="px-6 py-3 whitespace-nowrap">Validated</th>
        </tr>
      </thead>

      <!-- Table Body -->
      <tbody class="divide-y divide-gray-200">
        {{ range .Addresses }}
        <tr class="hover:bg-gray-50">
          <td class="px-6 py-3 whitespace-nowrap">{{ .AddressID }}</td>
          <td class="px-6 py-3 whitespace-nowrap">{{ .Address }}</td>
          <td class="px-6 py-3 whitespace-nowrap">
            {{ .StreetName }} {{ .StreetType }} {{ .StreetQuadrant }}
          </td>
          <td class="px-6 py-3 whitespace-nowrap">{{ .HouseNumber }}</td>
          <td class="px-6 py-3 whitespace-nowrap">{{ .Longitude }}</td>
          <td class="px-6 py-3 whitespace-nowrap">{{ .Latitude }}</td>
          <td class="px-6 py-3 whitespace-nowrap">
            {{ if .VisitedValidated }}
            <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> Valid
            </span>
            {{ else }}
            <span
              class="inline-flex items-center px-2 py-1 text-xs font-medium bg-red-100 text-red-700 rounded-full"
            >
              <i class="fas fa-times mr-1"></i> Invalid
            </span>
            {{ end }}
          </td>
        </tr>
        {{ else }}
        <tr>
          <td colspan="7" class="px-6 py-8 text-center text-gray-500">
            No addresses found
          </td>
        </tr>
        {{ end }}
      </tbody>
    </table>
  </div>

  <!-- Pagination Controls -->
  {{if .Pagination}}
  <div class="bg-white border-t border-gray-200 px-6 py-3">
    <div class="flex items-center justify-center">
      <!-- Records Info -->
      <div class="text-sm text-gray-600">
        Showing {{.Pagination.StartRecord}}-{{.Pagination.EndRecord}} of
        {{.Pagination.TotalRecords}} addresses
      </div>
    </div>
  </div>
  {{end}}
</div>

<script>
  function goToPage(page) {
    var urlParams = new URLSearchParams(window.location.search);
    urlParams.set("page", page);
    window.location.search = urlParams.toString();
  }

  function changePageSize(pageSize) {
    var urlParams = new URLSearchParams(window.location.search);
    urlParams.set("pageSize", pageSize);
    urlParams.set("page", 1);
    window.location.search = urlParams.toString();
  }
</script>
{{ end }}