<div class="mx-3 md:max-w-3xl lg:max-w-5xl md:mx-auto">
  <div id="product-tour-btn" class="hidden fixed bottom-5 right-5 z-30">
    <button class="close absolute -top-1.5 -right-1.5 bg-red-500 text-white rounded-full">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-4 w-4"
      >
        <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
      </svg>
    </button>

    <button class="open text-sm text-primary-500 bg-white shadow-md border border-primary-500 rounded-md pl-2 pr-4 py-2 flex items-center justify-center space-x-2">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5"
      >
        <path
          fill-rule="evenodd"
          d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM8.94 6.94a.75.75 0 1 1-1.061-1.061 3 3 0 1 1 2.871 5.026v.345a.75.75 0 0 1-1.5 0v-.5c0-.72.57-1.172 1.081-1.287A1.5 1.5 0 1 0 8.94 6.94ZM10 15a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
          clip-rule="evenodd"
        />
      </svg>

      <span><%= gettext("How it works ?") %></span>
    </button>
  </div>
  <%= if @live_action in [:new, :edit] do %>
    <.live_component
      module={ClaperWeb.EventLive.EventFormComponent}
      id="event-create"
      event={@event}
      page_title={@page_title}
      action={@live_action}
      return_to={~p"/events"}
      current_user={@current_user}
    />
  <% else %>
    <div
      id="quick-create-modal"
      class={"#{if @live_action != :quick_create, do: "hidden" } fixed z-30 inset-0 overflow-y-auto p-4 sm:p-6 md:p-24
      transform transition-all duration-150"}
      role="dialog"
      aria-modal="true"
    >
      <div
        phx-click="toggle-quick-create"
        class="fixed inset-0 bg-gray-800 bg-opacity-75 transition-opacity w-full h-full"
        aria-hidden="true"
      >
      </div>
      <div class="mx-auto max-w-xl transform divide-y divide-gray-100 overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
        <button phx-click="toggle-quick-create" class="absolute right-0 top-0">
          <svg
            class="text-gray-500 h-9 transform rotate-45"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
              clip-rule="evenodd"
            />
          </svg>
        </button>

        <div id="modal-content" class="bg-gray-100 pt-7 pb-5 px-3">
          <.form
            :let={f}
            :if={@live_action == :quick_create}
            for={@quick_event_changeset}
            phx-change="validate"
            phx-submit="save"
          >
            <ClaperWeb.Component.Input.text
              form={f}
              key={:name}
              name=""
              readonly={false}
              class="h-12"
              placeholder={gettext("Name of your event")}
            />
            <button
              type="submit"
              phx_disable_with="Loading..."
              class="mt-5 w-full lg:w-auto px-6 text-white py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500"
            >
              <%= gettext("Create") %>
            </button>
          </.form>
        </div>
      </div>
    </div>
    <div
      class="border-b border-gray-200 py-4 flex items-start flex-col space-y-5 sm:space-y-0 sm:flex-row sm:items-center justify-between relative"
      id="events-header"
      phx-hook="TourGuide"
      data-btn-trigger="#product-tour-btn"
      data-group="welcome"
      data-next-label={gettext("Next")}
      data-prev-label={gettext("Back")}
      data-finish-label={gettext("Finish")}
    >
      <div class="flex-1 min-w-0">
        <h1 class="text-2xl font-medium leading-6 text-gray-900 sm:truncate">
          <%= gettext("My events") %>
        </h1>
      </div>
      <div class="flex flex-col w-full items-center sm:w-auto sm:flex-row mt-0">
        <.link
          data-tg-group="welcome"
          data-tg-tour={
            gettext(
              "If you don't have time and just want interactions without a presentation file, you can create a new event here."
            )
          }
          data-tg-order="2"
          data-tg-title={"#{gettext("In a hurry ?")} 🏃‍♂️"}
          phx-click="toggle-quick-create"
          class="relative w-full justify-center sm:w-auto inline-flex items-center px-5 py-2 text-sm rounded-md text-gray-500"
        >
          <svg
            class="-ml-1 mr-1 h-5 w-5"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
              clip-rule="evenodd"
            />
          </svg>
          <span>
            <%= gettext("Quick event") %>
          </span>
        </.link>
        <.link
          data-tg-group="welcome"
          data-tg-order="1"
          data-tg-tour={gettext("Welcome to Claper! You can create a new event here.")}
          data-tg-title={"#{gettext("Your first steps with Claper")} 👋"}
          href={~p"/events/new"}
          class="relative w-full sm:w-auto inline-flex justify-center items-center px-5 py-2 text-lg font-medium rounded-md text-white bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500"
        >
          <svg
            class="-ml-1 mr-1 h-5 w-5"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fill-rule="evenodd"
              d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
              clip-rule="evenodd"
            />
          </svg>
          <span>
            <%= gettext("Create event") %>
          </span>
        </.link>
      </div>
    </div>

    <nav class="flex space-x-4 mt-4 border-b border-gray-200 pb-4" aria-label="Tabs">
      <button
        phx-click="change-tab"
        phx-value-tab="not_expired"
        class={"#{if @active_tab == "not_expired", do: "bg-primary-100 text-primary-700", else: "text-gray-500 hover:text-gray-700"} px-3 py-2 font-medium rounded-md"}
      >
        <%= gettext("Active") %>
      </button>
      <button
        phx-click="change-tab"
        phx-value-tab="expired"
        disabled={not @has_expired_events}
        class={"#{if @active_tab == "expired", do: "bg-primary-100 text-primary-700", else: "text-gray-500 hover:text-gray-700"} px-3 py-2 font-medium rounded-md #{if not @has_expired_events, do: "opacity-50"}"}
      >
        <%= gettext("Finished") %>
      </button>
      <button
        phx-click="change-tab"
        phx-value-tab="invited"
        disabled={not @has_invited_events}
        class={"#{if @active_tab == "invited", do: "bg-primary-100 text-primary-700", else: "text-gray-500 hover:text-gray-700"} px-3 py-2 font-medium rounded-md #{if not @has_invited_events, do: "opacity-50"}"}
      >
        <%= gettext("Shared with you") %>
      </button>
    </nav>

    <div class="mt-2 relative">
      <ul role="event-list" id="events">
        <% current_time = NaiveDateTime.utc_now() %>
        <%= for event <- @events do %>
          <.live_component
            module={ClaperWeb.EventLive.EventCardComponent}
            id={"event-#{event.id}"}
            event={event}
            current_time={current_time}
            is_leader={@active_tab == "invited"}
          />
        <% end %>
      </ul>
      <%= if @page < @total_pages do %>
        <div class="flex justify-center my-4">
          <button
            phx-click="load-more"
            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-primary-700 bg-primary-100 hover:bg-primary-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
          >
            <%= gettext("Load more") %>
          </button>
        </div>
      <% end %>
      <%= if Enum.count(@events) == 0 do %>
        <div class="w-full text-2xl text-black opacity-25 text-center">
          <img src="/images/icons/arrow.svg" class="h-20 float-right mr-16 -mt-5" />
          <p class="pt-12 clear-both"><%= gettext("Create your first event") %></p>
        </div>
      <% end %>
    </div>
  <% end %>
</div>
