path: root/lib/lsg_web/live/chat_live.html.heex

<div class="chat" data-turbo="false">

  <div class="py-4 px-4 bg-gradient-to-b from-black to-gray-900">
    <div class="grid grid-cols-2">
      <h1 class="text-gray-50 tracking-tight font-extrabold text-xl">
        <%= @network %>
        <span class="font-bold"><%= @chan %></span>
      </h1>
      <div class="text-right">
        <a href="/" class="text-gray-400"><%= @account_id %></a>
      </div>
    </div>
  </div>

  <div class="body">

    <div class="log">
      <%= if Enum.empty?(@backlog) do %>
      <p class="disconnected text-center text-6xl tracking-tight font-extrabold text-red-800 w-full my-24 mx-auto overflow-y-auto">
        Disconnected
      </p>
      <p class="phx-errored text-center text-6xl tracking-tight font-extrabold text-red-800 w-full my-24 mx-auto overflow-y-auto">
        Oh no error
      </p>
      <% end %>

      <ul class="pt-4 pl-4">
          <%= for message <- @backlog do %>
              <%= if is_map(message) && Map.get(message, :__struct__) == IRC.Message do %>
              <li class="flex gap-2 place-items-center message"
                  data-account-id={message.account.id}>
                  <LSGWeb.Component.naive_date_time_utc datetime={message.at} format="time-24-with-seconds" />
                  <span class="inline-block font-bold flex-none cursor-default"><%= message.sender.nick %></span>
                  <span class="inline-block flex-grow cursor-default">
                    <LSGWeb.MessageComponent.content
                      self={message.account.id == @account_id}
                      text={message.text}
                      />
                    </span>
                </li>
              <% end %>

              <%= if is_binary(message) do %>
                <li class="notice"><%= message %></li>
              <% end %>

              <%= if is_map(message) && Map.get(message, :type) do %>
                <li class="flex gap-2 place-items-center event">
                  <LSGWeb.Component.naive_date_time_utc datetime={message.at} format="time-24-with-seconds" />
                    <span class="inline-block font-bold flex-none cursor-default text-gray-700">*&nbsp;*&nbsp;*</span>
                    <span class="inline-block flex-grow cursor-default text-gray-700">
                      <LSGWeb.EventComponent.content event={message}
                                                     self={@users[message.user_id] && @users[message.user_id].account == @account_id}
                                                     user={@users[message.user_id]}
                                                     />
                    </span>
                  </li>
              <% end %>
          <% end %>
        </ul>
    </div>

    <aside>
      <%= for {_, user} <- @users do %>
          <details class="user dropdown">
            <summary><%= user.nick %></summary>
            <div class="content">
              <h3 class="text-xl font-bold"><%= user.nick %></h3>

              <ul class="mt-4 space-y-2">
                <li class="">User: <span class="font-bold"><%= user.username %></span></li>
                <li class="">Name: <%= user.realname || user.nick %></li>
                <li class="">Host: <span class="font-mono"><%= user.host %></span></li>
              </ul>

              <div class="mt-4 font-xs text-gray-300 text-center">
                UID: <%= user.id %>
                <br />
                AID: <%= user.account %>
              </div>
            </div>
          </details>
      <% end %>
    </aside>

  </div>

  <.form let={f} id={"form-#{@counter}"} for={:message} phx-submit="send" class="w-full px-4 pt-4">
    <div>
      <div class="mt-1 flex rounded-md shadow-sm border border-gray-300">
          <%= text_input f, :text, class: "focus:ring-indigo-500 focus:border-indigo-500 block w-full border rounded-md pl-4 sm:text-sm border-gray-300", autofocus: true, 'phx-hook': "AutoFocus", autocomplete: "off", placeholder: "Don't be shy, say something…" %>
          <%= submit content_tag(:span, "Send"), class: "-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium rounded-r-md text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"%>
      </div>
    </div>
  </.form>
</div>