<div class="hidden sm:flex justify-between items-center gap-4 shadow sticky top-0 z-50 bg-slate-800 p-4">
  <h1 class="text-2xl font-medium">New Conversation</h1>
</div>

<div class="p-4">

  <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
    <% Bot.published.order(:name).each do |bot| %>
      <div class="card flex cursor-pointer border-4 px-4 w-full items-center xl:items-end relative"
          data-id="<%= bot.id %>" data-name="<%= bot.name&.force_encoding("UTF-8") %>"
          data-placeholder="<%= it("Start a new conversation with #{bot.name.force_encoding("UTF-8")}") %>"
          data-hello="<%= hello_in_user_language&.force_encoding("UTF-8") %>">
        <div class="max-w-[140px]">
          <%= image_tag bot.image_url, class: "object-fit" %>
        </div>
        <div class="flex flex-col gap-1 p-4 h-full">
          <div class="text-gray-800 font-bold">
            <%= bot.name&.force_encoding("UTF-8") %>
            <div class="text-sm text-gray-500">
              <%= it(bot.role&.force_encoding("UTF-8")) %>
            </div>
          </div>
        </div>
      </div>
    <% end %>

  <% if current_admin? %>
    <% Bot.unpublished.order(:name).each do |bot| %>
      <div class="card flex cursor-pointer border-4 px-4 w-full items-center xl:items-end relative"
          data-id="<%= bot.id %>" data-name="<%= bot.name&.force_encoding("UTF-8") %>"
          data-placeholder="<%= it("Start a new conversation with #{bot.name.force_encoding("UTF-8")}") %>"
          data-hello="<%= hello_in_user_language&.force_encoding("UTF-8") %>"
          data-controller="botselect" data-action="click->botselect#select">
        <div class="max-w-[140px]">
          <%= image_tag bot.image_url, class: "object-fit" %>
        </div>
        <div class="flex flex-col gap-1 p-4 h-full">
          <div class="text-gray-800 font-bold">
            <%= bot.name&.force_encoding("UTF-8") %>
            <%= link_to "📝", [:admin, bot] %>
            (Draft)
            <div class="text-sm text-gray-500">
              <%= it(bot.role&.force_encoding("UTF-8")) %>
            </div>
          </div>
        </div>
      </div>
    <% end %>
  <% end %>
</div>

<div class="hidden">
  <%= form_with model: @conversation do |f| %>
    <%= f.hidden_field :bot_id %>
    <%= f.text_field :first_message, class: "w-full rounded-md bg-gray-700 text-white", data: { controller: "conversation focus", action: "change->conversation#submit" } %>
  <% end %>
</div>
