defmodule Paleta.Components.AppHeader do
  use Phoenix.Component

  attr(:search, :boolean, default: false)
  attr(:search_module, :any, default: nil)
  attr(:results_title, :string, default: "Users")
  attr(:results, :list, default: [])

  @spec app_header(map) :: Phoenix.LiveView.Rendered.t()
  def app_header(assigns) do
    assigns =
      assigns
      |> assign_new(:notifications, fn -> nil end)
      |> assign_new(:right_side, fn -> nil end)

    ~H"""
    <div class="header-container relative flex w-full bg-white dark:bg-navy-750 print:hidden">
      <!-- Header Items -->
      <div class="flex w-full items-center justify-between">
        <!-- Left: Sidebar Toggle Button -->
        <div class="h-7 w-7">
          <button
            class="menu-toggle ml-0.5 flex h-7 w-7 flex-col justify-center space-y-1.5 text-primary outline-none focus:outline-none dark:text-accent-light/80"
            x-bind:class="$store.global.isSidebarExpanded && 'active'"
            @click="$store.global.isSidebarExpanded = !$store.global.isSidebarExpanded"
          >
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
        <!-- Right: Header buttons -->
        <div class="-mr-1.5 flex items-center space-x-2 md:ml-auto">
          <!-- Mobile Search Toggle -->
          <button
            @click="$store.global.isSearchbarActive = !$store.global.isSearchbarActive"
            class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:hidden"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5.5 w-5.5 text-slate-500 dark:text-navy-100"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="1.5"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
              />
            </svg>
          </button>
          <!-- Main Searchbar -->
          <%= if @search do %>
            <%= live_component(Paleta.Components.Live.GlobalSearch,
              id: "global-search",
              search_module: @search_module
            ) %>
          <% end %>
          <!-- Dark Mode Toggle -->
          <button
            @click="$store.global.isDarkModeEnabled = !$store.global.isDarkModeEnabled"
            class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
          >
            <svg
              x-show="$store.global.isDarkModeEnabled"
              x-transition:enter="transition-transform duration-200 ease-out absolute origin-top"
              x-transition:enter-start="scale-75"
              x-transition:enter-end="scale-100 static"
              class="h-6 w-6 text-amber-400"
              fill="currentColor"
              viewBox="0 0 24 24"
            >
              <path d="M11.75 3.412a.818.818 0 01-.07.917 6.332 6.332 0 00-1.4 3.971c0 3.564 2.98 6.494 6.706 6.494a6.86 6.86 0 002.856-.617.818.818 0 011.1 1.047C19.593 18.614 16.218 21 12.283 21 7.18 21 3 16.973 3 11.956c0-4.563 3.46-8.31 7.925-8.948a.818.818 0 01.826.404z" />
            </svg>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              x-show="!$store.global.isDarkModeEnabled"
              x-transition:enter="transition-transform duration-200 ease-out absolute origin-top"
              x-transition:enter-start="scale-75"
              x-transition:enter-end="scale-100 static"
              class="h-6 w-6 text-amber-400"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
                clip-rule="evenodd"
              />
            </svg>
          </button>
          <!-- Monochrome Mode Toggle -->
          <button
            @click="$store.global.isMonochromeModeEnabled = !$store.global.isMonochromeModeEnabled"
            class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
          >
            <i class="fa-solid fa-paleta bg-gradient-to-r from-sky-400 to-blue-600 bg-clip-text text-lg font-semibold text-transparent">
            </i>
          </button>
          <!-- Notification-->
          <div
            :if={@notifications}
            x-effect="if($store.global.isSearchbarActive) isShowPopper = false"
            x-data="usePopper({placement:'bottom-end',offset:12})"
            @click.outside="if(isShowPopper) isShowPopper = false"
            class="flex"
          >
            <button
              @click="isShowPopper = !isShowPopper"
              x-ref="popperRef"
              class="btn relative h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5 text-slate-500 dark:text-navy-100"
                stroke="currentColor"
                fill="none"
                viewBox="0 0 24 24"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                  d="M15.375 17.556h-6.75m6.75 0H21l-1.58-1.562a2.254 2.254 0 01-.67-1.596v-3.51a6.612 6.612 0 00-1.238-3.85 6.744 6.744 0 00-3.262-2.437v-.379c0-.59-.237-1.154-.659-1.571A2.265 2.265 0 0012 2c-.597 0-1.169.234-1.591.65a2.208 2.208 0 00-.659 1.572v.38c-2.621.915-4.5 3.385-4.5 6.287v3.51c0 .598-.24 1.172-.67 1.595L3 17.556h12.375zm0 0v1.11c0 .885-.356 1.733-.989 2.358A3.397 3.397 0 0112 22a3.397 3.397 0 01-2.386-.976 3.313 3.313 0 01-.989-2.357v-1.111h6.75z"
                />
              </svg>

              <span class="absolute -top-px -right-px flex h-3 w-3 items-center justify-center">
                <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-secondary opacity-80">
                </span>
                <span class="inline-flex h-2 w-2 rounded-full bg-secondary"></span>
              </span>
            </button>
            <div x-bind:class="isShowPopper && 'show'" class="popper-root" x-ref="popperRoot">
              <div
                x-data="{activeTab:'tabAll'}"
                class="popper-box mx-4 mt-1 flex max-h-[calc(100vh-6rem)] w-[calc(100vw-2rem)] flex-col rounded-lg border border-slate-150 bg-white shadow-soft dark:border-navy-800 dark:bg-navy-700 dark:shadow-soft-dark sm:m-0 sm:w-80"
              >
                <div class="rounded-t-lg bg-slate-100 text-slate-600 dark:bg-navy-800 dark:text-navy-200">
                  <div class="flex items-center justify-between px-4 pt-2">
                    <div class="flex items-center space-x-2">
                      <h3 class="font-medium text-slate-700 dark:text-navy-100">
                        Notifications
                      </h3>
                      <div class="badge h-5 rounded-full bg-primary/10 px-1.5 text-primary dark:bg-accent-light/15 dark:text-accent-light">
                        26
                      </div>
                    </div>

                    <button class="btn -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="h-4.5 w-4.5"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        stroke-width="1.5"
                      >
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
                        />
                        <path
                          stroke-linecap="round"
                          stroke-linejoin="round"
                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                        />
                      </svg>
                    </button>
                  </div>

                  <div class="is-scrollbar-hidden flex shrink-0 overflow-x-auto px-3">
                    <button
                      @click="activeTab = 'tabAll'"
                      x-bind:class="activeTab === 'tabAll' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
                      class="btn shrink-0 rounded-none border-b-2 px-3.5 py-2.5"
                    >
                      <span>All</span>
                    </button>
                    <button
                      @click="activeTab = 'tabAlerts'"
                      x-bind:class="activeTab === 'tabAlerts' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
                      class="btn shrink-0 rounded-none border-b-2 px-3.5 py-2.5"
                    >
                      <span>Alerts</span>
                    </button>
                    <button
                      @click="activeTab = 'tabEvents'"
                      x-bind:class="activeTab === 'tabEvents' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
                      class="btn shrink-0 rounded-none border-b-2 px-3.5 py-2.5"
                    >
                      <span>Events</span>
                    </button>
                    <button
                      @click="activeTab = 'tabLogs'"
                      x-bind:class="activeTab === 'tabLogs' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
                      class="btn shrink-0 rounded-none border-b-2 px-3.5 py-2.5"
                    >
                      <span>Logs</span>
                    </button>
                  </div>
                </div>

                <div class="tab-content flex flex-col overflow-hidden">
                  <div
                    x-show="activeTab === 'tabAll'"
                    x-transition:enter="transition-all duration-300 easy-in-out"
                    x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
                    x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
                    class="is-scrollbar-hidden space-y-4 overflow-y-auto px-4 py-4"
                  >
                    <div class="flex items-center space-x-3">
                      <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-secondary/10 dark:bg-secondary-light/15">
                        <i class="fa fa-user-edit text-secondary dark:text-secondary-light"></i>
                      </div>
                      <div>
                        <p class="font-medium text-slate-600 dark:text-navy-100">
                          User Photo Changed
                        </p>
                        <div class="mt-1 text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
                          John Doe changed his avatar photo
                        </div>
                      </div>
                    </div>
                    <div class="flex items-center space-x-3">
                      <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-info/10 dark:bg-info/15">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          class="h-5 w-5 text-info"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke="currentColor"
                          stroke-width="1.5"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                          />
                        </svg>
                      </div>
                      <div>
                        <p class="font-medium text-slate-600 dark:text-navy-100">
                          Mon, June 14, 2021
                        </p>
                        <div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
                          <span class="shrink-0">08:00 - 09:00</span>
                          <div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>

                          <span class="line-clamp-1">Frontend Conf</span>
                        </div>
                      </div>
                    </div>
                    <div class="flex items-center space-x-3">
                      <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 dark:bg-accent-light/15">
                        <i class="fa-solid fa-image text-primary dark:text-accent-light"></i>
                      </div>
                      <div>
                        <p class="font-medium text-slate-600 dark:text-navy-100">
                          Images Added
                        </p>
                        <div class="mt-1 text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
                          Mores Clarke added new image gallery
                        </div>
                      </div>
                    </div>
                    <div class="flex items-center space-x-3">
                      <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-success/10 dark:bg-success/15">
                        <i class="fa fa-leaf text-success"></i>
                      </div>
                      <div>
                        <p class="font-medium text-slate-600 dark:text-navy-100">
                          Design Completed
                        </p>
                        <div class="mt-1 text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
                          Robert Nolan completed the design of the CRM
                          application
                        </div>
                      </div>
                    </div>
                    <div class="flex items-center space-x-3">
                      <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-info/10 dark:bg-info/15">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          class="h-5 w-5 text-info"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke="currentColor"
                          stroke-width="1.5"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                          />
                        </svg>
                      </div>
                      <div>
                        <p class="font-medium text-slate-600 dark:text-navy-100">
                          Wed, June 21, 2021
                        </p>
                        <div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
                          <span class="shrink-0">16:00 - 20:00</span>
                          <div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>

                          <span class="line-clamp-1">UI/UX Conf</span>
                        </div>
                      </div>
                    </div>
                    <div class="flex items-center space-x-3">
                      <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-warning/10 dark:bg-warning/15">
                        <i class="fa fa-project-diagram text-warning"></i>
                      </div>
                      <div>
                        <p class="font-medium text-slate-600 dark:text-navy-100">
                          ER Diagram
                        </p>
                        <div class="mt-1 text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
                          Team completed the ER diagram app
                        </div>
                      </div>
                    </div>
                    <div class="flex items-center space-x-3">
                      <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-warning/10 dark:bg-warning/15">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          class="h-5 w-5 text-warning"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke="currentColor"
                          stroke-width="1.5"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"
                          />
                        </svg>
                      </div>
                      <div>
                        <p class="font-medium text-slate-600 dark:text-navy-100">
                          THU, May 11, 2021
                        </p>
                        <div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
                          <span class="shrink-0">10:00 - 11:30</span>
                          <div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
                          <span class="line-clamp-1">Interview, Konnor Guzman </span>
                        </div>
                      </div>
                    </div>
                    <div class="flex items-center space-x-3">
                      <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-error/10 dark:bg-error/15">
                        <i class="fa fa-history text-error"></i>
                      </div>
                      <div>
                        <p class="font-medium text-slate-600 dark:text-navy-100">
                          Weekly Report
                        </p>
                        <div class="mt-1 text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
                          The weekly report was uploaded
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    x-show="activeTab === 'tabAlerts'"
                    x-transition:enter="transition-all duration-300 easy-in-out"
                    x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
                    x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
                    class="is-scrollbar-hidden space-y-4 overflow-y-auto px-4 py-4"
                  >
                    <div class="flex items-center space-x-3">
                      <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-secondary/10 dark:bg-secondary-light/15">
                        <i class="fa fa-user-edit text-secondary dark:text-secondary-light"></i>
                      </div>
                      <div>
                        <p class="font-medium text-slate-600 dark:text-navy-100">
                          User Photo Changed
                        </p>
                        <div class="mt-1 text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
                          John Doe changed his avatar photo
                        </div>
                      </div>
                    </div>
                    <div class="flex items-center space-x-3">
                      <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 dark:bg-accent-light/15">
                        <i class="fa-solid fa-image text-primary dark:text-accent-light"></i>
                      </div>
                      <div>
                        <p class="font-medium text-slate-600 dark:text-navy-100">
                          Images Added
                        </p>
                        <div class="mt-1 text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
                          Mores Clarke added new image gallery
                        </div>
                      </div>
                    </div>
                    <div class="flex items-center space-x-3">
                      <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-success/10 dark:bg-success/15">
                        <i class="fa fa-leaf text-success"></i>
                      </div>
                      <div>
                        <p class="font-medium text-slate-600 dark:text-navy-100">
                          Design Completed
                        </p>
                        <div class="mt-1 text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
                          Robert Nolan completed the design of the CRM
                          application
                        </div>
                      </div>
                    </div>
                    <div class="flex items-center space-x-3">
                      <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-warning/10 dark:bg-warning/15">
                        <i class="fa fa-project-diagram text-warning"></i>
                      </div>
                      <div>
                        <p class="font-medium text-slate-600 dark:text-navy-100">
                          ER Diagram
                        </p>
                        <div class="mt-1 text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
                          Team completed the ER diagram app
                        </div>
                      </div>
                    </div>
                    <div class="flex items-center space-x-3">
                      <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-error/10 dark:bg-error/15">
                        <i class="fa fa-history text-error"></i>
                      </div>
                      <div>
                        <p class="font-medium text-slate-600 dark:text-navy-100">
                          Weekly Report
                        </p>
                        <div class="mt-1 text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
                          The weekly report was uploaded
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    x-show="activeTab === 'tabEvents'"
                    x-transition:enter="transition-all duration-300 easy-in-out"
                    x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
                    x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
                    class="is-scrollbar-hidden space-y-4 overflow-y-auto px-4 py-4"
                  >
                    <div class="flex items-center space-x-3">
                      <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-info/10 dark:bg-info/15">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          class="h-5 w-5 text-info"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke="currentColor"
                          stroke-width="1.5"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                          />
                        </svg>
                      </div>
                      <div>
                        <p class="font-medium text-slate-600 dark:text-navy-100">
                          Mon, June 14, 2021
                        </p>
                        <div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
                          <span class="shrink-0">08:00 - 09:00</span>
                          <div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>

                          <span class="line-clamp-1">Frontend Conf</span>
                        </div>
                      </div>
                    </div>
                    <div class="flex items-center space-x-3">
                      <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-info/10 dark:bg-info/15">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          class="h-5 w-5 text-info"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke="currentColor"
                          stroke-width="1.5"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                          />
                        </svg>
                      </div>
                      <div>
                        <p class="font-medium text-slate-600 dark:text-navy-100">
                          Wed, June 21, 2021
                        </p>
                        <div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
                          <span class="shrink-0">16:00 - 20:00</span>
                          <div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>

                          <span class="line-clamp-1">UI/UX Conf</span>
                        </div>
                      </div>
                    </div>
                    <div class="flex items-center space-x-3">
                      <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-warning/10 dark:bg-warning/15">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          class="h-5 w-5 text-warning"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke="currentColor"
                          stroke-width="1.5"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"
                          />
                        </svg>
                      </div>
                      <div>
                        <p class="font-medium text-slate-600 dark:text-navy-100">
                          THU, May 11, 2021
                        </p>
                        <div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
                          <span class="shrink-0">10:00 - 11:30</span>
                          <div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
                          <span class="line-clamp-1">Interview, Konnor Guzman </span>
                        </div>
                      </div>
                    </div>
                    <div class="flex items-center space-x-3">
                      <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-info/10 dark:bg-info/15">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          class="h-5 w-5 text-info"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke="currentColor"
                          stroke-width="1.5"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                          />
                        </svg>
                      </div>
                      <div>
                        <p class="font-medium text-slate-600 dark:text-navy-100">
                          Mon, Jul 16, 2021
                        </p>
                        <div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
                          <span class="shrink-0">06:00 - 16:00</span>
                          <div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>

                          <span class="line-clamp-1">Laravel Conf</span>
                        </div>
                      </div>
                    </div>
                    <div class="flex items-center space-x-3">
                      <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-warning/10 dark:bg-warning/15">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          class="h-5 w-5 text-warning"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke="currentColor"
                          stroke-width="1.5"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"
                          />
                        </svg>
                      </div>
                      <div>
                        <p class="font-medium text-slate-600 dark:text-navy-100">
                          Wed, Jun 16, 2021
                        </p>
                        <div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
                          <span class="shrink-0">15:30 - 11:30</span>
                          <div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
                          <span class="line-clamp-1">Interview, Jonh Doe </span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    x-show="activeTab === 'tabLogs'"
                    x-transition:enter="transition-all duration-300 easy-in-out"
                    x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
                    x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
                    class="is-scrollbar-hidden overflow-y-auto px-4"
                  >
                    <div class="mt-8 pb-8 text-center">
                      <img class="mx-auto w-36" src="/images/empty-girl-box.svg" alt="image" />
                      <div class="mt-5">
                        <p class="text-base font-semibold text-slate-700 dark:text-navy-100">
                          No any logs
                        </p>
                        <p class="text-slate-400 dark:text-navy-300">
                          There are no unread logs yet
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Right Sidebar Toggle -->
          <button
            :if={@right_side}
            @click="$store.global.isRightSidebarExpanded = true"
            class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5.5 w-5.5 text-slate-500 dark:text-navy-100"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
                d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>
    """
  end
end