95 lines
3.2 KiB
HTML
95 lines
3.2 KiB
HTML
{{ define "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-calendar-alt{{end}} text-green-600"
|
|
></i>
|
|
<span class="text-sm font-medium">Appointments</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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">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>
|
|
<th class="px-6 py-3 whitespace-nowrap">Poll Question</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">{{ .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>
|
|
<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>
|
|
</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 }}
|