<%= if @started do %>
  <div class="relative min-h-screen lg:flex lg:flex-col lg:items-center lg:w-full bg-black lg:bg-gradient-to-tl from-primary-500 to-secondary-500">
    <div class="relative w-full">
      <div
        id="side-menu-shadow"
        phx-click={toggle_side_menu()}
        class="hidden fixed z-20 h-screen bg-black bg-opacity-70 w-full"
      >
      </div>

      <div
        id="side-menu"
        class="hidden fixed h-screen w-64 bg-white rounded-r-lg flex z-30 px-4 flex-col justify-start lg:left-0"
      >
        <div>
          <img src="/images/logo-large-black.svg" class="h-16 my-3" />

          <span class="font-bold text-xl"><%= @event.name %></span>
        </div>

        <a
          class="flex items-center px-3 py-2 bg-gray-200 mb-15 rounded-lg mt-5"
          href={~p"/?disconnected_from=#{@event.uuid}"}
        >
          <img src="/images/icons/exit-outline.svg" class="h-5 mr-3" />
          <span><%= gettext("Leave") %></span>
        </a>
      </div>
    </div>

    <div
      id="content"
      class="w-full bg-black fixed z-10 lg:w-1/3"
      style="box-shadow: 0px 15px 14px 1px rgba(0,0,0,0.75); -webkit-box-shadow: 0px 15px 14px 1px rgba(0,0,0,0.75); -moz-box-shadow: 0px 15px 14px 1px rgba(0,0,0,0.75);"
    >
      <div id="banner" class="hidden w-full bg-gray-800 text-center" phx-hook="EmbeddedBanner">
        <a href="https://claper.co" target="_blank" class="text-xs text-white py-3 w-full">
          <%= gettext("Create your next presentation with") %>
          <span class="underline">Claper</span>
        </a>
      </div>
      <div class="flex justify-between items-center px-5 py-3">
        <button
          phx-click={toggle_side_menu()}
          class="bg-black rounded-full text-sm px-3 py-1 bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 text-white uppercase flex items-center"
        >
          <img src="/images/icons/menu-outline.svg" class="h-6" />
          <span class="ml-1">#<%= @event.code %></span>
        </button>

        <div class="inline-flex justify-between items-center text-white text-sm">
          <img src="/images/icons/online-users.svg" class="h-6 mr-2" />
          <span id="counter" phx-update="ignore" phx-hook="UpdateAttendees">
            <%= @attendees_nb %>
          </span>
        </div>
      </div>
    </div>

    <%= case @current_interaction do %>
      <% %Claper.Polls.Poll{} -> %>
        <div
          id="poll-wrapper-parent"
          class="animate__animated animate__zoomInDown w-full lg:w-1/3 lg:mx-auto fixed top-16 z-10 px-2 lg:px-7 pb-6 max-h-screen overflow-y-auto"
        >
          <div class="transition-all" id="poll-wrapper">
            <.live_component
              module={ClaperWeb.EventLive.PollComponent}
              id={"#{@current_interaction.id}-poll"}
              poll={@current_interaction}
              current_user={@current_user}
              attendee_identifier={@attendee_identifier}
              event={@event}
              selected_poll_opt={@selected_poll_opt}
              current_poll_vote={@current_poll_vote}
              show_results={@current_interaction.show_results}
            />
          </div>
        </div>
      <% %Claper.Forms.Form{} -> %>
        <div
          id="form-wrapper-parent"
          class="animate__animated animate__zoomInDown w-full lg:w-1/3 lg:mx-auto fixed top-16 z-10 px-2 pb-6 lg:px-7 max-h-screen overflow-y-auto"
        >
          <div class="transition-all" id="form-wrapper">
            <.live_component
              module={ClaperWeb.EventLive.FormComponent}
              id={"#{@current_interaction.id}-form"}
              form={@current_interaction}
              current_user={@current_user}
              attendee_identifier={@attendee_identifier}
              event={@event}
              current_form_submit={@current_form_submit}
            />
          </div>
        </div>
      <% %Claper.Embeds.Embed{} -> %>
        <div
          :if={@current_interaction.attendee_visibility == true}
          id="embed-wrapper-parent"
          class="animate__animated animate__zoomInDown w-full lg:w-1/3 lg:mx-auto fixed top-16 z-10 px-2 pb-6 lg:px-7 max-h-screen overflow-y-auto"
        >
          <div class="transition-all" id="embed-wrapper">
            <.live_component
              module={ClaperWeb.EventLive.EmbedComponent}
              id={"#{@current_interaction.id}-embed"}
              embed={@current_interaction}
              current_user={@current_user}
              attendee_identifier={@attendee_identifier}
              event={@event}
            />
          </div>
        </div>
      <% _ -> %>
        <!-- Handle any other types of interactions here if needed -->
    <% end %>

    <div
      class="flex flex-col space-y-4 px-5 pt-20 pb-32 lg:w-1/3 bg-black min-h-screen"
      id="post-list"
      phx-update="stream"
      data-posts-nb={Enum.count(@streams.posts)}
      phx-hook="Scroll"
      data-target="body"
    >
      <.live_component
        :for={{id, post} <- @streams.posts}
        module={ClaperWeb.EventLive.PostComponent}
        id={id}
        post={post}
        leaders={@leaders}
        is_leader={@is_leader}
        current_user={@current_user}
        attendee_identifier={@attendee_identifier}
        event={@event}
        reaction_enabled={@state.message_reaction_enabled}
        liked_posts={@liked_posts}
        loved_posts={@loved_posts}
        loled_posts={@loled_posts}
      />
    </div>

    <%= if @post_count == 0 && @state.chat_enabled do %>
      <div class="text-2xl text-white block fixed bottom-32 left-0 w-full lg:w-1/3 lg:left-1/2 lg:transform lg:-translate-x-1/2 text-center opacity-30">
        <span><%= gettext("Be the first to react !") %></span>
        <img src="/images/icons/arrow-white.svg" class="h-24 rotate-180 ml-12 mt-8" />
      </div>
    <% end %>

    <div
      id="reacts"
      phx-hook="GlobalReacts"
      data-class-name="h-12"
      class="fixed right-5 bottom-12 z-30 w-1/3"
      phx-update="ignore"
    >
    </div>

    <div
      id="nickname-popup"
      class="hidden fixed bottom-0 h-36 w-full lg:w-1/3 lg:mx-auto bg-black text-white z-40 shadow-md rounded-md p-4 flex flex-col gap-y-2"
    >
      <%= if @state.anonymous_chat_enabled do %>
        <button
          phx-click={JS.push("set-nickname") |> toggle_nickname_popup()}
          phx-value-nickname=""
          phx-hook="EmptyNickname"
          id="setAnonymous"
          class="w-full bg-gray-900 text-left text-white px-3 py-2 rounded-md flex space-x-2 items-center"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-5 h-5"
            viewBox="0 0 24 24"
            stroke-width="2"
            stroke="currentColor"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M3 11h18"></path>
            <path d="M5 11v-4a3 3 0 0 1 3 -3h8a3 3 0 0 1 3 3v4"></path>
            <path d="M7 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
            <path d="M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
            <path d="M10 17h4"></path>
          </svg>
          <span><%= gettext("Anonymous") %></span>
        </button>
      <% else %>
        <button class="w-full bg-gray-900 opacity-50 text-left text-white px-3 py-2 rounded-md flex space-x-2 items-center cursor-default">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-5 h-5"
            viewBox="0 0 24 24"
            stroke-width="2"
            stroke="currentColor"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M3 11h18"></path>
            <path d="M5 11v-4a3 3 0 0 1 3 -3h8a3 3 0 0 1 3 3v4"></path>
            <path d="M7 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
            <path d="M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
            <path d="M10 17h4"></path>
          </svg>
          <span><%= gettext("Anonymous") %> (<%= gettext("disabled") %>)</span>
        </button>
      <% end %>

      <button
        id="nicknamepicker"
        phx-click={toggle_nickname_popup()}
        data-prompt={gettext("Enter your name")}
        phx-hook="NicknamePicker"
        class="w-full bg-gray-900 text-left text-white px-3 py-2 rounded-md flex space-x-2 items-center"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="w-5 h-5"
        >
          <path d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z" />
          <path d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0010 3H4.75A2.75 2.75 0 002 5.75v9.5A2.75 2.75 0 004.75 18h9.5A2.75 2.75 0 0017 15.25V10a.75.75 0 00-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5z" />
        </svg>
        <span><%= gettext("Use your name") %></span>
      </button>
      <button
        phx-click={toggle_nickname_popup()}
        class="w-full text-left text-primary-500 text-sm px-3 py-0 rounded-md"
      >
        <%= gettext("Close") %>
      </button>
    </div>

    <div class={"fixed w-full " <> if @state.message_reaction_enabled, do: "bottom-12", else: "bottom-3"}>
      <%= if @state.chat_enabled do %>
        <%= if !@state.anonymous_chat_enabled && (@nickname && @nickname == "") do %>
          <.form
            :let={f}
            for={@post_changeset}
            id="nickname-form"
            class="w-full lg:w-1/3 lg:mx-auto"
            phx-submit="save-nickname"
          >
            <div
              class="rounded-lg text-base px-3 py-2 mx-5 relative"
              style="
              background: rgb(17,134,213);
              background: linear-gradient(333deg, rgba(17,134,213,0.4962359943977591) 0%, rgba(163,39,255,0.5046393557422969) 100%);
              box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
              backdrop-filter: blur(11.5px);
              -webkit-backdrop-filter: blur(11.5px);"
            >
              <%= text_input(f, :name,
                class:
                  "bg-transparent outline-none w-full text-white h-10 placeholder-white resize-none pr-20 leading-4 overflow-y-hidden focus:overflow-y-auto",
                placeholder: gettext("Enter your name")
              ) %>
              <p class="font-semibold text-sm">
                <%= error_tag(f, :name) %>
              </p>
              <%= submit(gettext("Join"), class: "absolute right-5 top-2 p-2 bg-white rounded-md") %>
            </div>
          </.form>
        <% else %>
          <.form
            :let={f}
            for={@post_changeset}
            id="post-form"
            class="w-full lg:w-1/3 lg:mx-auto"
            phx-hook="PostForm"
            data-nickname={@nickname}
            phx-submit="save"
          >
            <div
              class="rounded-lg text-base px-3 py-2 mx-5 relative"
              style="
              background: rgb(17,134,213);
              background: linear-gradient(333deg, rgba(17,134,213,0.4962359943977591) 0%, rgba(163,39,255,0.5046393557422969) 100%);
              box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
              backdrop-filter: blur(11.5px);
              -webkit-backdrop-filter: blur(11.5px);"
            >
              <div class="ml-0">
                <a
                  href="#"
                  phx-click={toggle_nickname_popup()}
                  class="px-2 py-0.5 text-xs text-white rounded-full w-fit bg-gray-900 flex gap-x-1 items-center"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    class="w-4 h-4"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M19.5 8.25l-7.5 7.5-7.5-7.5"
                    />
                  </svg>
                  <%= if @nickname && @nickname == "" do %>
                    <span><%= gettext("Anonymous") %></span>
                  <% else %>
                    <span><%= @nickname %></span>
                  <% end %>
                </a>
              </div>

              <button class="absolute right-5 top-6 opacity-50" id="submitBtn">
                <img src="/images/icons/send.svg" class="h-6" />
              </button>

              <div class="flex space-x-2 items-center">
                <%= textarea(f, :body,
                  id: "postFormTA",
                  class:
                    "bg-transparent outline-none w-full text-white h-10 placeholder-white pt-3 resize-none pr-20 leading-4 overflow-y-hidden focus:overflow-y-auto",
                  placeholder: gettext("Ask, comment...")
                ) %>
              </div>
            </div>
            <%= submit("Save", phx_disable_with: "Saving...", id: "hiddenSubmit", class: "hidden") %>
          </.form>
        <% end %>
      <% else %>
        <div id="post-form" class="w-full lg:w-1/3 lg:mx-auto">
          <div
            class="rounded-lg text-base px-4 py-2 mx-5 relative"
            style="
            background: rgb(17,134,213);
            background: linear-gradient(333deg, rgba(17,134,213,0.4962359943977591) 0%, rgba(163,39,255,0.5046393557422969) 100%);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(11.5px);
            -webkit-backdrop-filter: blur(11.5px);"
          >
            <div class="flex space-x-2 items-center">
              <div class="opacity-50 bg-transparent outline-none w-full text-white h-10 placeholder-white pt-3 resize-none pr-20 leading-4 overflow-y-hidden focus:overflow-y-auto">
                <%= gettext("Messages deactivated") %>
              </div>
            </div>
          </div>
        </div>
      <% end %>
    </div>

    <div
      :if={@state.message_reaction_enabled}
      class="flex space-x-6 fixed justify-center bottom-3 w-full lg:w-1/3 lg:mx-auto"
    >
      <a
        phx-click="global-react"
        phx-hook="ClickFeedback"
        id="react-heart"
        class="cursor-pointer"
        phx-value-type="heart"
      >
        <img class="h-6" src="/images/icons/heart.svg" />
      </a>

      <a
        phx-click="global-react"
        phx-hook="ClickFeedback"
        id="react-clap"
        class="cursor-pointer"
        phx-value-type="clap"
      >
        <img class="h-6" src="/images/icons/clap.svg" />
      </a>

      <a
        phx-click="global-react"
        phx-hook="ClickFeedback"
        id="react-hundred"
        class="cursor-pointer"
        phx-value-type="hundred"
      >
        <img class="h-6" src="/images/icons/hundred.svg" />
      </a>

      <a
        phx-click="global-react"
        phx-hook="ClickFeedback"
        id="react-raisehand"
        class="cursor-pointer"
        phx-value-type="raisehand"
      >
        <img class="h-6" src="/images/icons/raisehand.svg" />
      </a>
    </div>
  </div>
<% else %>
  <div class="w-full">
    <div class="flex bg-black h-screen">
      <div class="flex items-center text-center lg:text-left justify-center lg:justify-start lg:px-12 w-full lg:w-1/2">
        <div class="w-full mx-12 lg:w-auto lg:mx-0">
          <h1 class="py-5 text-5xl font-semibold text-white md:text-6xl"><%= @event.name %></h1>

          <h2
            x-data={"{date: moment.utc('#{@event.started_at}').local().format('LLLL')}"}
            class="py-5 text-2xl text-gray-300 md:text-4xl"
            x-text="date.charAt(0).toUpperCase() + date.slice(1)"
          >
          </h2>

          <div class="text-white flex justify-between items-center mt-12">
            <div class="flex flex-col items-center mr-10">
              <span class="text-5xl font-bold">
                <%= if @remaining_days < 10, do: "0" %><%= @remaining_days %>
              </span>
              <span class="text-gray-400"><%= gettext("days") %></span>
            </div>
            <div class="flex flex-col items-center mr-10">
              <span class="text-5xl font-bold">
                <%= if @remaining_hours < 10, do: "0" %><%= @remaining_hours %>
              </span>
              <span class="text-gray-400"><%= gettext("hours") %></span>
            </div>
            <div class="flex flex-col items-center mr-10">
              <span class="text-5xl font-bold">
                <%= if @remaining_minutes < 10, do: "0" %><%= @remaining_minutes %>
              </span>
              <span class="text-gray-400"><%= gettext("minutes") %></span>
            </div>
            <div class="flex flex-col items-center">
              <span class="text-5xl font-bold">
                <%= if @remaining_seconds < 10, do: "0" %><%= @remaining_seconds %>
              </span>
              <span class="text-gray-400"><%= gettext("seconds") %></span>
            </div>
          </div>
        </div>
      </div>
      <div class="hidden lg:block lg:w-1/2">
        <div class="h-full object-cover bg-gradient-animate">
          <div class="h-full bg-black text-white bg-opacity-50 text-center flex flex-col items-center justify-center">
            <span class="text-4xl font-semibold mb-10">
              <%= gettext("Scan to interact in real-time") %>
            </span>
            <div
              phx-hook="QRCode"
              id="qr"
              phx-update="ignore"
              class="rounded-lg mx-auto bg-black h-64 w-64 p-12 flex items-center justify-center mb-14"
            >
            </div>
            <span class="text-4xl font-semibold mb-10"><%= gettext("Or use the code:") %></span>
            <span class="text-5xl font-semibold mb-10">#<%= String.upcase(@event.code) %></span>
          </div>
        </div>
      </div>
    </div>
  </div>
<% end %>
