<div class="mx-3 md:max-w-3xl lg:max-w-5xl md:mx-auto">
  <div class="border-b border-gray-200 py-4 flex flex-col sm:flex-row sm:items-center justify-between">
    <div class="flex-1 min-w-0">
      <h1 class="text-2xl font-medium leading-6 text-gray-900 sm:truncate">
        <%= @page_title %>
      </h1>
    </div>
    <div class="flex mt-4 space-x-5 sm:mt-0 hidden">
      <!-- future actions -->
    </div>
  </div>

  <div class="mt-12 mb-3">
    <h3 class="text-lg leading-6 font-medium text-gray-900">
      <%= gettext("Event") %>: <%= @event.name %> (#<%= @event.code %>)
    </h3>

    <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
      <div class="relative bg-white pt-5 px-4 sm:pt-6 sm:px-6 pb-4 shadow rounded-lg overflow-hidden">
        <dt>
          <div class="absolute bg-primary-500 rounded-md p-3">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="2"
              stroke="currentColor"
              class="h-6 w-6 text-white"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M2.25 18 9 11.25l4.306 4.306a11.95 11.95 0 0 1 5.814-5.518l2.74-1.22m0 0-5.94-2.281m5.94 2.28-2.28 5.941"
              />
            </svg>
          </div>
          <p class="ml-16 text-sm font-medium text-gray-500 truncate">
            <%= gettext("Audience peak") %>
          </p>
        </dt>
        <dd class="ml-16 flex items-baseline">
          <p class="text-2xl font-semibold text-gray-900">
            <%= @event.audience_peak %>
            <span class="text-xs text-gray-500 font-normal">
              <%= ngettext("attendee", "attendees", @event.audience_peak) %>
            </span>
          </p>
        </dd>
      </div>

      <div class="relative bg-white pt-5 px-4 sm:pt-6 sm:px-6 pb-4 shadow rounded-lg overflow-hidden">
        <dt>
          <div class="absolute bg-primary-500 rounded-md p-3">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="2"
              stroke="currentColor"
              class="h-6 w-6 text-white"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"
              />
            </svg>
          </div>
          <p class="ml-16 text-sm font-medium text-gray-500 truncate">
            <%= gettext("Unique attendees") %>
          </p>
        </dt>
        <dd class="ml-16 flex items-baseline">
          <p class="text-2xl font-semibold text-gray-900">
            <%= @distinct_attendee_count %>
            <span class="text-xs text-gray-500 font-normal">
              <%= ngettext("attendee", "attendees", @distinct_attendee_count) %>
            </span>
          </p>
        </dd>
      </div>

      <div class="relative bg-white pt-5 px-4 sm:pt-6 sm:px-6 pb-4 shadow rounded-lg overflow-hidden">
        <dt>
          <div class="absolute bg-primary-500 rounded-md p-3">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6 text-white"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="2"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
              />
            </svg>
          </div>
          <p class="ml-16 text-sm font-medium text-gray-500 truncate">
            <%= gettext("Messages") %>
          </p>
        </dt>
        <dd class="ml-16 flex items-baseline">
          <p class="text-2xl font-semibold text-gray-900">
            <%= length(@posts) %>
            <span class="text-xs text-gray-500 font-normal">
              <%= ngettext(
                "from %{count} people",
                "from %{count} peoples",
                @distinct_poster_count
              ) %>
            </span>
          </p>
        </dd>
      </div>

      <div class="relative bg-white pt-5 px-4 sm:pt-6 sm:px-6 pb-4 shadow rounded-lg overflow-hidden">
        <dt>
          <div class="absolute bg-primary-500 rounded-md p-3">
            <svg
              class="h-6 w-6 text-white"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              aria-hidden="true"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
              />
            </svg>
          </div>
          <p class="ml-16 text-sm font-medium truncate text-gray-500">
            <%= gettext("Engagement rate") %>
          </p>
        </dt>
        <dd class="ml-16 flex items-baseline flex items-center">
          <p class="text-2xl font-semibold text-gray-900"><%= @engagement_rate %>%</p>
          <a
            href="https://docs.claper.co/usage/reports.html#metrics"
            target="_blank"
            rel="noopener noreferrer"
            class="ml-1"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="text-gray-400 w-4 h-4"
            >
              <path
                fill-rule="evenodd"
                d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-6 3.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM7.293 5.293a1 1 0 1 1 .99 1.667c-.459.134-1.033.566-1.033 1.29v.25a.75.75 0 1 0 1.5 0v-.115a2.5 2.5 0 1 0-2.518-4.153.75.75 0 1 0 1.061 1.06Z"
                clip-rule="evenodd"
              />
            </svg>
          </a>
        </dd>
      </div>
    </dl>
  </div>

  <div class="pt-5 pb-5">
    <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
      <%= gettext("Interactions") %>
    </h3>

    <div class="border-b border-gray-200">
      <nav class="-mb-px flex space-x-8" aria-label="Tabs">
        <button
          phx-click="change_tab"
          phx-value-tab="messages"
          class={"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm #{if @current_tab == :messages, do: "border-primary-500 text-primary-600", else: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"}"}
        >
          <%= gettext("Messages") %>
        </button>
        <button
          phx-click="change_tab"
          phx-value-tab="polls"
          class={"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm #{if @current_tab == :polls, do: "border-primary-500 text-primary-600", else: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"}"}
        >
          <%= gettext("Polls") %>
        </button>
        <button
          phx-click="change_tab"
          phx-value-tab="forms"
          class={"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm #{if @current_tab == :forms, do: "border-primary-500 text-primary-600", else: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"}"}
        >
          <%= gettext("Forms") %>
        </button>
        <button
          phx-click="change_tab"
          phx-value-tab="web_content"
          class={"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm #{if @current_tab == :web_content, do: "border-primary-500 text-primary-600", else: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"}"}
        >
          <%= gettext("Web Content") %>
        </button>
        <button
          phx-click="change_tab"
          phx-value-tab="quizzes"
          class={"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm #{if @current_tab == :quizzes, do: "border-primary-500 text-primary-600", else: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"}"}
        >
          <%= gettext("Quizzes") %>
        </button>
      </nav>
    </div>

    <div class="my-4">
      <%= case @current_tab do %>
        <% :polls -> %>
          <div>
            <%= if length(@event.presentation_file.polls) > 0 do %>
              <%= for poll <- @event.presentation_file.polls do %>
                <% total = Enum.map(poll.poll_opts, fn e -> e.vote_count end) |> Enum.sum() %>
                <div class="bg-gray-900 w-full p-6 my-5 text-black shadow-lg rounded-md">
                  <div class="w-full h-full flex items-center justify-between mb-4">
                    <p class="text-white text-xl font-semibold"><%= poll.title %></p>
                    <%= link to: ~p"/export/polls/#{poll.id}", class: "text-sm text-white bg-primary-500 hover:bg-primary-600 rounded-md px-3 py-1 flex items-center gap-1", method: :post, target: "_blank" do %>
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        class="w-5 h-5"
                      >
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><path d="M9 15h6" /><path d="M12.5 17.5l2.5 -2.5l-2.5 -2.5" />
                      </svg>
                      <span><%= gettext("Export") %> (CSV)</span>
                    <% end %>
                  </div>
                  <div>
                    <div class="flex flex-col space-y-3">
                      <%= if (length poll.poll_opts) > 0 do %>
                        <%= for {opt, idx} <- Enum.with_index(poll.poll_opts) do %>
                          <% percentage =
                            if total > 0,
                              do:
                                Float.round(opt.vote_count / total * 100)
                                |> :erlang.float_to_binary(decimals: 0),
                              else: 0 %>
                          <div
                            id={"poll-opt-#{idx}"}
                            class="bg-gray-500 px-3 py-2 rounded-lg flex justify-between items-center relative text-white"
                          >
                            <div
                              style={"width: #{percentage}%;"}
                              class={"bg-gradient-to-r from-primary-500 to-secondary-500 h-full absolute left-0 transition-all rounded-l-lg #{if percentage == "100", do: "rounded-r-lg"}"}
                            >
                            </div>
                            <div class="flex space-x-3 items-center z-10 text-left">
                              <span class="flex-1 pr-2"><%= opt.content %></span>
                            </div>
                            <span class="text-sm z-10">
                              <%= percentage %>% (<%= opt.vote_count %>)
                            </span>
                          </div>
                        <% end %>
                      <% end %>
                    </div>
                  </div>
                </div>
              <% end %>
            <% else %>
              <p class="italic text-gray-500"><%= gettext("No poll has been created") %></p>
            <% end %>
          </div>
        <% :forms -> %>
          <div>
            <%= if length(@event.presentation_file.forms) > 0 do %>
              <%= for form <- @event.presentation_file.forms do %>
                <div class="flex justify-between items-center mb-5">
                  <span class="text-xl font-semibold text-gray-900">
                    <%= form.title %>
                  </span>

                  <%= if length(form.form_submits) > 0 do %>
                    <%= link to: ~p"/export/forms/#{form.id}", class: "text-sm text-white bg-primary-500 hover:bg-primary-600 rounded-md px-3 py-1 flex items-center gap-1", method: :post, target: "_blank" do %>
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        class="w-5 h-5"
                      >
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><path d="M9 15h6" /><path d="M12.5 17.5l2.5 -2.5l-2.5 -2.5" />
                      </svg>
                      <span><%= gettext("Export") %> (CSV)</span>
                    <% end %>
                  <% end %>
                </div>

                <%= if length(form.form_submits) == 0 do %>
                  <p class="italic text-gray-500">
                    <%= gettext("No form submission has been sent") %>
                  </p>
                <% end %>

                <div class="mb-10">
                  <%= for fs <- form.form_submits do %>
                    <div id={"#{fs.id}-form"}>
                      <div class="px-4 pb-2 pt-3 rounded-b-lg rounded-tr-lg bg-white relative shadow-md text-black break-all mt-4">
                        <div class="flex space-x-3 items-center">
                          <%= if fs.attendee_identifier do %>
                            <img
                              class="h-8 w-8"
                              src={"https://api.dicebear.com/7.x/personas/svg?seed=#{fs.attendee_identifier}.svg"}
                            />
                          <% else %>
                            <img
                              class="h-8 w-8"
                              src={"https://api.dicebear.com/7.x/personas/svg?seed=#{fs.user_id}.svg"}
                            />
                          <% end %>

                          <div>
                            <%= for res <- fs.response do %>
                              <p><strong><%= elem(res, 0) %>:</strong> <%= elem(res, 1) %></p>
                            <% end %>
                          </div>
                        </div>
                      </div>
                    </div>
                  <% end %>
                </div>
              <% end %>
            <% else %>
              <p class="italic text-gray-500"><%= gettext("No form has been created") %></p>
            <% end %>
          </div>
        <% :web_content -> %>
          <div>
            <%= if length(@event.presentation_file.embeds) > 0 do %>
              <%= for embed <- @event.presentation_file.embeds do %>
                <span class="text-xl font-semibold text-gray-900 mb-4">
                  <%= embed.title %>
                </span>
                <div class="text-black break-all mt-4 mb-10">
                  <.live_component
                    id={"embed-component-#{embed.id}"}
                    module={ClaperWeb.EventLive.EmbedIframeComponent}
                    provider={embed.provider}
                    content={embed.content}
                  />
                </div>
              <% end %>
            <% else %>
              <p class="italic text-gray-500">
                <%= gettext("No web content has been created") %>
              </p>
            <% end %>
          </div>
        <% :messages -> %>
          <div>
            <%= if length(@posts) > 0 do %>
              <div class="flex justify-start mb-4">
                <%= link to: ~p"/export/#{@event.uuid}/messages", class: "text-sm text-white bg-primary-500 hover:bg-primary-600 rounded-md px-3 py-1 flex items-center gap-1", method: :post, target: "_blank" do %>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="w-5 h-5"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><path d="M9 15h6" /><path d="M12.5 17.5l2.5 -2.5l-2.5 -2.5" />
                  </svg>
                  <span><%= gettext("Export") %> (CSV)</span>
                <% end %>
              </div>
            <% end %>

            <%= if length(@posts) == 0 do %>
              <p class="italic text-gray-500"><%= gettext("No messages has been sent") %></p>
            <% end %>

            <div>
              <.live_component
                :for={post <- @posts}
                module={ClaperWeb.EventLive.ManageablePostComponent}
                readonly={true}
                id={post.uuid}
                event={@event}
                post={post}
              />
            </div>
          </div>
        <% :quizzes -> %>
          <div>
            <%= if length(@event.presentation_file.quizzes) > 0 do %>
              <div>
                <%= for quiz <- @event.presentation_file.quizzes do %>
                  <div class="bg-gray-900 w-full p-4 text-black shadow-lg rounded-md mb-10">
                    <div class="mb-4">
                      <div class="w-full flex items-center justify-between">
                        <p class="text-white text-xl font-semibold mb-2"><%= quiz.title %></p>
                        <%= link to: ~p"/export/quizzes/#{quiz.id}", class: "text-sm text-white bg-primary-500 hover:bg-primary-600 rounded-md px-3 py-1 flex items-center gap-1", method: :post, target: "_blank" do %>
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="2"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            class="w-5 h-5"
                          >
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><path d="M9 15h6" /><path d="M12.5 17.5l2.5 -2.5l-2.5 -2.5" />
                          </svg>
                          <span><%= gettext("Export") %> (CSV)</span>
                        <% end %>
                      </div>
                      <p class="text-gray-400 text-sm">
                        <%= gettext("Average score") %>:
                        <span class="font-semibold">
                          <%= Claper.Quizzes.calculate_average_score(quiz.id) %>/<%= length(
                            quiz.quiz_questions
                          ) %>
                        </span>
                      </p>

                      <p class="text-gray-400 text-sm">
                        <%= gettext("Total submissions") %>:
                        <span class="font-semibold">
                          <%= Claper.Quizzes.get_submission_count(quiz.id) %>
                        </span>
                      </p>
                    </div>

                    <div class="flex flex-col space-y-3 overflow-y-auto max-h-[500px]">
                      <%= for {question, _idx} <- Enum.with_index(quiz.quiz_questions) do %>
                        <div class="border-t border-gray-700 pt-4 mt-4 first:border-t-0 first:pt-0 first:mt-0">
                          <p class="text-white text-lg font-medium mb-3">
                            <%= question.content %>
                          </p>
                          <div class="space-y-2">
                            <%= for opt <- question.quiz_question_opts do %>
                              <div class={"bg-gray-500 px-3 py-2 rounded-lg flex justify-between items-center relative text-white #{if opt.is_correct, do: "bg-green-600"}"}>
                                <div class="flex justify-between items-center z-10 text-left w-full">
                                  <div class="flex items-center text-left space-x-3">
                                    <%= if opt.is_correct do %>
                                      <div class="h-5 w-5 mt-0.5 rounded-md point-select bg-white">
                                      </div>
                                    <% else %>
                                      <div class="h-5 w-5 mt-0.5 rounded-md point-select border-2 border-white">
                                      </div>
                                    <% end %>
                                    <span class="flex-1 pr-2"><%= opt.content %></span>
                                  </div>
                                  <span class="text-sm">
                                    <%= opt.percentage %>% (<%= opt.response_count %>)
                                  </span>
                                </div>
                              </div>
                            <% end %>
                          </div>
                        </div>
                      <% end %>
                    </div>
                  </div>
                <% end %>
              </div>
            <% else %>
              <p class="italic text-gray-500"><%= gettext("No quiz has been created") %></p>
            <% end %>
          </div>
      <% end %>
    </div>
  </div>
</div>
