<div class="mx-3 max-w-7xl sm: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" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
            </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">
            <!-- Heroicon name: outline/users -->
            <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">
            <!-- Heroicon name: outline/mail-open -->
            <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="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
          </div>
          <p class="ml-16 text-sm font-medium text-gray-500 truncate"><%= gettext "Average voters" %></p>
        </dt>
        <dd class="ml-16 flex items-baseline">
          <p class="text-2xl font-semibold text-gray-900">
            <%= @average_voters %> <span class="text-xs text-gray-500 font-normal"><%= ngettext "from %{count} poll", "from %{count} polls", length(@event.presentation_file.polls) %> </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">
            <!-- Heroicon name: outline/cursor-click -->
            <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 text-gray-500 truncate"><%= gettext "Engagement rate" %></p>
        </dt>
        <dd class="ml-16 flex items-baseline">
          <p class="text-2xl font-semibold text-gray-900"><%= @engagement_rate %>%</p>
        </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 history" %></h3>
    <%= for position <- 0..@event.presentation_file.length-1 do %>
    <div class="my-10">
      <%= if System.get_env("PRESENTATION_STORAGE", "local") == "local" do %>
      <img class="w-1/3 mx-auto" src={"/uploads/#{@event.presentation_file.hash}/#{position+1}.jpg"} />
      <% else %>
        <img class="w-1/2 md:w-1/3 mb-4" src={"https://#{System.get_env("AWS_PRES_BUCKET")}.s3.#{System.get_env("AWS_REGION")}.amazonaws.com/presentations/#{@event.presentation_file.hash}/#{position+1}.jpg"} />
      <% end %>

      <%= for poll <- Enum.filter(@event.presentation_file.polls, fn p -> p.position == position end) do %>
        <% total = Enum.map(poll.poll_opts, fn e -> e.vote_count end) |> Enum.sum() %>
        <div class="bg-black w-full py-3 px-6 my-5 text-black shadow-lg rounded-md">

          <div class="block w-full h-full cursor-pointer">
            <p class="text-white text-lg font-semibold mb-4"> <%= poll.title %> </p>
          </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 %>
                  <button id={"poll-opt-#{idx}"} class="bg-gray-500 px-3 py-2 rounded-full 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-full #{if percentage == "100", do: 'rounded-r-full'}"}></div>
                    <div class="flex space-x-3 z-10 text-left">
                    <span class="flex-1"><%= opt.content %></span>
                    </div>
                    <span class="text-sm z-10"><%= percentage %>% (<%= opt.vote_count %>)</span>
                  </button>
                <% end %>
              <% end %>
            </div>
          </div>
        </div>
      <% end %>


      <% posts = Enum.filter(@posts, fn p -> p.position == position end) %>

      <%= if length(posts) == 0 do  %>

        <p class="italic text-gray-500"><%= gettext "No messages has been sent" %></p>

      <% end %>

      <div class="h-64 pb-5 px-2 overflow-y-auto"> 
        <%= for post <- posts do %>

          <div id={"#{post.id}-post"}>
            <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 post.attendee_identifier do %>
                  <img class="h-8 w-8" src={"https://avatars.dicebear.com/api/identicon/#{post.attendee_identifier}.svg"} />
                <% else %>
                  <img class="h-8 w-8" src={"https://avatars.dicebear.com/api/identicon/#{post.user_id}.svg"} />
                <% end %>

                <p class="text-xl"><%= post.body %></p>
              </div>


              <%= if post.like_count > 0 || post.love_count > 0 || post.lol_count > 0 do %>
                <div class="flex h-6 space-x-2 text-base text-gray-500 pb-3 items-center mt-5">
                  <div class="flex items-center">
                    <%= if post.like_count > 0 do %>
                      <img src="/images/icons/thumb.svg" class="h-4" />
                      <span class="ml-1"><%= post.like_count %></span>
                    <% end %>
                  </div>
                  <div class="flex items-center">
                    <%= if post.love_count > 0 do %>
                    <img src="/images/icons/heart.svg" class="h-4" />
                    <span class="ml-1"><%= post.love_count %></span>
                    <% end %>
                  </div>
                  <div class="flex items-center">
                    <%= if post.lol_count > 0 do %>
                    <img src="/images/icons/laugh.svg" class="h-4" />
                    <span class="ml-1"><%= post.lol_count %></span>
                    <% end %>
                  </div>
                </div>
              <% end %>
            </div>
          </div>
        <% end %>
      </div>
    </div>
    <% end %>
</div>


</div>
