<div class="p-4 max-w-[30vw] min-w-[250px] bg-gray-800 bg-gradient-to-l from-gray-900 text-gray-300 flex flex-col gap-3 items-start h-screen">
  <% if current_user && @latest_conversations %>
    <%= link_to [:conversations] do %>
      <%= image_tag("nav_logo.svg", class: "h-6 xl:h-10 object-fit m-auto") %>
    <% end %>
    <div class="flex flex-col gap-5 w-full overflow-y-auto h-full">
      <% @latest_conversations.group_by(&:bot_id).each do |_, conversations| %>
        <div>
          <div class="flex items-end justify-between border-b border-gray-500 mb-1">
            <div class="font-medium">
              <%= [conversations.first.bot.name, it(conversations.first.bot.role).presence].compact.join(", ") %>
            </div>
            <%= image_tag conversations.first.bot.image_url, class: "w-12 object-cover -ml-3" %>
          </div>
          <%= render conversations %>
        </div>
      <% end %>
      <% if @latest_conversations.any? %>
        <label class="block text-gray-500 text-xs mb-2">
          <%= it("Displaying 10 most recent conversations...") %>
          <%= link_to it("see all"), conversations_path, class: " font-medium text-gray-400" %>
        </label>
      <% else %>
        <div class="text-gray-300 space-y-4">
          <p><%= it("Welcome to MagmaChat, the most advanced platform for interacting with OpenAI's GPT large language model.
               To begin, choose a bot and start a new conversation. Oh, and don't forget that you can
               change your default language preference in Settings (link below) if English is not your primary preference.") %></p>
          <p><%= it("Not ready to start chatting? You can also learn more about
                  <a href='https://magmalabs.io' target='_blank' class='text-magma-red font-bold'>MagmaLabs</a>
                  or check out the project source code on <a href='https://github.com/magma-labs/magma-conversation'
                  class='font-bold text-white' target='_blank'>Github</a>.").html_safe %>
        </div>
      <% end %>
    </div>

    <div class="text-sm">
      <div class="font-medium mb-1">
        <%= current_user.email %>
      </div>
      <div class="flex gap-2">
        <%= link_to it("Settings"), "/settings", class: "text-gray-400 hover:text-yellow-500 block" %>
        <%= link_to "Bots", "/admin/bots", class: "text-gray-400 hover:text-yellow-500 block" if current_admin? %>
        <%= link_to it("Sign out"), "/logout", class: "text-gray-400 hover:text-yellow-500 block" %>
      </div>
    </div>
  <% end %>
</div>
