{{ define "content" }}
<div class="flex-1 flex flex-col overflow-hidden">
  <!-- Toolbar -->
  <div class="bg-white border-b border-gray-200 px-4 md:px-6 py-4 flex justify-between items-center">
    <h1 class="text-lg font-semibold text-gray-900">My Schedule</h1>
    <button
      onclick="openAddAvailabilityPanel()"
      class="px-4 py-2 bg-blue-500 text-white text-sm font-medium rounded-lg hover:bg-blue-600 transition-colors"
    >
      <i class="fas fa-plus mr-2"></i> Add Availability
    </button>
  </div>

  <!-- Table Container -->
  <div class="flex-1 p-4 md:p-6 overflow-auto">
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
      <!-- Desktop Table -->
      <div class="hidden lg:block overflow-x-auto">
        <table class="w-full min-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 whitespace-nowrap">Day</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">Start Time</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">End Time</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">Actions</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-100">
            {{ range .Availability }}
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4 text-sm text-gray-900">{{ .DayOfWeek }}</td>
              <td class="px-6 py-4 text-sm text-gray-900">{{ .StartTime }}</td>
              <td class="px-6 py-4 text-sm text-gray-900">{{ .EndTime }}</td>
              <td class="px-6 py-4">
                <form method="POST" action="/volunteer/schedule/delete" class="inline-block">
                  <input type="hidden" name="id" value="{{.AvailabilityID}}" />
                  <button type="submit" class="text-red-500 hover:text-red-700 p-1" title="Delete">
                    <i class="fas fa-trash"></i>
                  </button>
                </form>
              </td>
            </tr>
            {{ else }}
            <tr>
              <td colspan="4" class="px-6 py-8 text-center text-gray-500">
                No availability set yet
              </td>
            </tr>
            {{ end }}
          </tbody>
        </table>
      </div>

      <!-- Mobile Cards -->
      <div class="lg:hidden p-4 space-y-4">
        {{ range .Availability }}
        <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-4 space-y-3">
          <div class="flex justify-between">
            <span class="text-sm font-semibold text-gray-900">{{ .DayOfWeek }}</span>
            <form method="POST" action="/volunteer/schedule/delete">
              <input type="hidden" name="id" value="{{.AvailabilityID}}" />
              <button type="submit" class="text-red-500 hover:text-red-700">
                <i class="fas fa-trash"></i>
              </button>
            </form>
          </div>
          <div class="flex justify-between text-sm text-gray-600">
            <span>Start</span>
            <span class="font-medium text-gray-900">{{ .StartTime }}</span>
          </div>
          <div class="flex justify-between text-sm text-gray-600">
            <span>End</span>
            <span class="font-medium text-gray-900">{{ .EndTime }}</span>
          </div>
        </div>
        {{ else }}
        <div class="text-center py-8 text-gray-500">No availability set yet</div>
        {{ end }}
      </div>
    </div>
  </div>
</div>

<!-- Add Availability Drawer -->
<div id="addAvailabilityOverlay" class="fixed inset-0 bg-black bg-opacity-50 hidden z-40"></div>
<div id="addAvailabilityPanel" class="fixed top-0 right-0 h-full w-full max-w-md bg-white shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out z-50 flex flex-col">
  <!-- Panel Header -->
  <div class="flex justify-between items-center px-6 py-4 border-b border-gray-200 bg-gray-50">
    <h2 class="text-lg font-semibold text-gray-900">Add Availability</h2>
    <button onclick="closeAddAvailabilityPanel()" class="text-gray-400 hover:text-gray-600">
      <i class="fas fa-times text-xl"></i>
    </button>
  </div>

  <!-- Panel Body -->
  <form method="POST" id="assignForm" action="/volunteer/schedule/post" class="flex-1 p-6 space-y-6">
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-2">Day</label>
      <input type="date" name="day" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" />
    </div>
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-2">Start Time</label>
      <input type="time" name="start_time" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" />
    </div>
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-2">End Time</label>
      <input type="time" name="end_time" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500" />
    </div>
  </form>

  <!-- Panel Footer -->
  <div class="flex justify-end gap-3 px-6 py-4 border-t border-gray-200 bg-gray-50">
    <button type="button" onclick="closeAddAvailabilityPanel()" class="px-6 py-2 border border-gray-300 text-gray-700 bg-white rounded-lg hover:bg-gray-50">Cancel</button>
    <button type="submit" form="assignForm" class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
      <i class="fas fa-check mr-2"></i> Save
    </button>
  </div>
</div>

<script>
  function openAddAvailabilityPanel() {
    document.getElementById("addAvailabilityOverlay").classList.remove("hidden");
    document.getElementById("addAvailabilityPanel").classList.remove("translate-x-full");
  }
  function closeAddAvailabilityPanel() {
    document.getElementById("addAvailabilityOverlay").classList.add("hidden");
    document.getElementById("addAvailabilityPanel").classList.add("translate-x-full");
  }
  document.getElementById("addAvailabilityOverlay").addEventListener("click", closeAddAvailabilityPanel);
  document.addEventListener("keydown", function (e) {
    if (e.key === "Escape") closeAddAvailabilityPanel();
  });
</script>
{{ end }}