{{ define "title" }}notifications{{ end }}

{{ define "content" }}
  <div class="p-6">
    <div class="flex items-center justify-between mb-4">
      <p class="text-xl font-bold dark:text-white">Notifications</p>
      <a href="/settings/notifications" class="flex items-center gap-2">
        {{ i "settings" "w-4 h-4" }}
        preferences
      </a>
    </div>
  </div>

  <div class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto drop-shadow-sm dark:text-white">
    {{if .Notifications}}
      <div class="flex flex-col gap-4" id="notifications-list">
        {{range .Notifications}}
          {{template "notifications/fragments/item" .}}
        {{end}}
      </div>

      {{if .HasMore}}
        <div class="mt-6 text-center">
          <button
            class="btn gap-2 group"
            hx-get="/notifications?offset={{.NextOffset}}&limit={{.Limit}}"
            hx-target="#notifications-list"
            hx-swap="beforeend"
          >
            {{ i "chevron-down" "w-4 h-4 group-[.htmx-request]:hidden" }}
            {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
            Load more
          </button>
        </div>
      {{end}}
    {{else}}
      <div class="text-center py-12">
        <div class="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600">
          {{ i "bell-off" "w-16 h-16" }}
        </div>
        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No notifications</h3>
        <p class="text-gray-600 dark:text-gray-400">When you receive notifications, they'll appear here.</p>
      </div>
    {{end}}
  </div>
{{ end }}