{% from "oldman/dashboard/components/modal.html" import modal with context %}
{% from "oldman/dashboard/partials/confirm.html" import confirm_body with context %}

{% macro notification_modal_footer() %}
  <button type="button" class="om-button om-button-light" data-om-modal-close>{{ _("Close") }}</button>
  <button type="button" class="om-button om-button-danger" id="delete-notification" data-om-activity-notification-delete-selected>{{ _("Delete notifications") }}</button>
{% endmacro %}

{% macro dashboard_topbar(activity_notifications=(), activity_href=none, user_notification_urls=none, language_switcher=none, account_controls=none) %}
<header id="page-topbar" class="topbar oldman-topbar">
  <div class="flex w-full items-center justify-between gap-3">
    <div class="flex min-w-0 items-center gap-2">
      <button type="button" class="oldman-icon-button" id="topnav-hamburger-icon" data-om-sidebar-toggle aria-label="{{ _('Toggle navigation') }}">
        <span class="hamburger-icon inline-flex" aria-hidden="true"><i class="ri-menu-line text-lg leading-none"></i></span>
      </button>
      <span class="oldman-topbar-separator" data-om-topbar-breadcrumb-separator aria-hidden="true" hidden></span>
      <nav class="min-w-0" data-om-topbar-breadcrumb aria-label="{{ _('Breadcrumb') }}"></nav>
    </div>

    <div class="flex shrink-0 items-center gap-1">
      {% if language_switcher %}{{ language_switcher() }}{% endif %}

      <button type="button" class="oldman-icon-button hidden sm:inline-flex" data-toggle="fullscreen" aria-label="{{ _('Fullscreen') }}">
        <i class="ri-fullscreen-line text-lg"></i>
      </button>

      <button type="button" class="oldman-icon-button hidden sm:inline-flex light-dark-mode" aria-label="{{ _('Toggle theme') }}">
        <i class="ri-moon-line text-lg"></i>
      </button>

      <div class="om-dropdown" id="notificationDropdown" data-om-component="dropdown">
        <button type="button" class="oldman-icon-button relative" id="page-header-notifications-dropdown" data-om-dropdown-toggle aria-haspopup="true" aria-expanded="false" aria-label="{{ _('Notifications') }}">
          <i class="ri-notification-3-line text-lg"></i>
          {% if user_notification_urls %}
            <span data-om-user-notification-count class="topbar-badge oldman-topbar-dot" hidden>0</span>
          {% endif %}
        </button>
        <div class="om-dropdown-menu om-dropdown-menu-end om-notification-menu hidden" data-om-dropdown-menu hidden aria-labelledby="page-header-notifications-dropdown">
          <div class="om-notification-menu-header">
            <h2 class="om-notification-menu-title">{{ _("Notifications") }}</h2>
          </div>

          {% if user_notification_urls %}
            <section
              data-om-user-notification-topbar
              data-om-topbar-url="{{ user_notification_urls.topbar }}"
              data-om-center-url="{{ user_notification_urls.center }}"
              class="border-b border-border-soft"
            >
              <div class="om-notification-section-header">
                <h3 class="om-notification-section-title">{{ _("User notifications") }}</h3>
                <span data-om-user-notification-count class="om-badge om-badge-danger" hidden>0</span>
              </div>
              <div data-om-user-notification-slot class="om-notification-list"></div>
              <div class="om-notification-footer">
                <a href="{{ user_notification_urls.center }}" class="om-button om-button-link om-button-sm">
                  {{ _("View all notifications") }} <i class="ri-arrow-right-line"></i>
                </a>
              </div>
            </section>
          {% endif %}

          <section data-om-activity-notifications>
            <div class="om-notification-section-header">
              <h3 class="om-notification-section-title">{{ _("Current activity") }}</h3>
              <span data-om-activity-notification-count class="om-badge om-badge-default">{{ activity_notifications | length }}</span>
            </div>
            <div data-om-activity-notification-list class="om-notification-list">
              {% for item in activity_notifications %}
                <div data-om-activity-notification-item class="notification-item om-notification-item group">
                  <span class="om-notification-icon om-notification-icon-{{ item.tone }}">
                    <i class="{{ item.icon }}"></i>
                  </span>
                  <div class="min-w-0 flex-1">
                    <a href="{{ item.href }}" class="om-notification-title">{{ item.title }}</a>
                    <p class="om-notification-body">{{ item.description }}</p>
                    <p class="om-notification-time">{{ item.time or "-" }}</p>
                  </div>
                  <label class="notification-check flex shrink-0 items-start pt-1">
                    <input data-om-activity-notification-select class="om-check notification-check-input" type="checkbox" value="" id="dashboard-activity-notification-check{{ loop.index }}">
                    <span class="sr-only">{{ _("Select notification") }}</span>
                  </label>
                </div>
              {% endfor %}
              {% if activity_href %}
                <div data-om-activity-view-all class="view-all om-notification-footer -mx-1 mt-1"{% if not activity_notifications %} hidden{% endif %}>
                  <a href="{{ activity_href }}" class="om-button om-button-link om-button-sm">
                    {{ _("View all notifications") }} <i class="ri-arrow-right-line"></i>
                  </a>
                </div>
              {% endif %}
            </div>

            <div data-om-activity-notification-actions class="flex items-center justify-between gap-3 border-t border-border-soft px-3 py-2 text-xs text-content-muted" hidden>
              <span>{{ _("Select") }} <span data-om-activity-notification-selection-count class="font-medium text-content-strong">0</span> {{ _("Result") }}</span>
              <button type="button" class="om-button om-button-ghost-danger om-button-sm" data-om-modal-target="#removeNotificationModal">{{ _("Remove") }}</button>
            </div>
          </section>
        </div>
      </div>

      {% if account_controls %}{{ account_controls() }}{% endif %}
    </div>
  </div>
</header>

{% call modal(
  "removeNotificationModal",
  _("Remove notifications"),
  close_label=_("Close"),
  managed=false,
  root_tag="section",
  title_tag="h2",
  title_id="removeNotificationModal-title",
  close_button_class="om-close-button",
  close_button_id="NotificationModalbtn-close",
  close_icon_class="ri-close-line text-lg",
  dialog_class="om-modal-dialog-sm",
  footer=notification_modal_footer
) %}
  {{ confirm_body(_("Are you sure?"), _("Selected notifications will be removed from this dropdown."), tone="warning", title_tag="h3") }}
{% endcall %}
{% endmacro %}