<%= form_with(model: [:admin, @bot.becomes(Bot)], data: { controller: "settings", gid: @bot.persisted? && @bot.to_global_id.to_s }) do |form| %>
  <div class="container mx-auto">
    <%= link_to "/", class: "flex gap-3 items-center" do %>
      <%= image_tag("logo.svg", class: "w-12 object-fit sm:m-auto") %>
      <span class="hidden sm:inline text-2xl flex-1 text-gray-100 tracking-widest text-gray-950">MagmaChat</span>
    <% end %>
    <div class="ml-16 flex gap-2 text-sm text-gray-700">
      <%= link_to [:conversations], class: "hover:text-indigo-700" do %>
        <span>Conversations</span>
      <% end %>
      <%= link_to [:admin, :bots], class: "hover:text-indigo-700" do %>
        <span>Bots</span>
      <% end %>
      <%= link_to [:settings], class: "hover:text-indigo-700" do %>
        <span>Settings</span>
      <% end %>
    </div>
    <div class="flex border-b-2 border-black items-end mb-6">
      <div class="flex-1 flex flex-col gap-4 pt-12">
        <div class="">
          <%= form.label :name, class: "block text-gray-700 text-sm font-bold mb-2" %>
          <%= form.text_field :name, class: " border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" %>
        </div>
        <div class="">
          <%= form.label :role, it("Role/Job Title"), class: "block text-gray-700 text-sm font-bold mb-2" %>
          <%= form.text_field :role, class: " border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" %>
        </div>
        <div class="">
          <%= form.label :image_url, class: "block text-gray-700 text-sm font-bold mb-2" %>
          <%= form.text_field :image_url, class: " border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-1",
                                          data: { controller: "botimage", action: "input->botimage#change" } %>
          <div class="text-gray-500 text-xs"><%= it("Transparent PNG works best. Minimum 500x500") %></div>
        </div>
        <% if @bot.persisted? %>
          <div class="pb-2">
            <%= form.label :intro, class: "block text-gray-700 text-sm font-bold mb-2" %>
            <%= form.text_area :intro, rows: 3, required: "true", class: " border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" %>
          </div>
        <% end %>
      </div>
      <div class="">
        <%= image_tag @bot.image_url, id: "bot_image", class: "object-cover w-32 sm:w-72" %>
      </div>
    </div>
    <% if @bot.persisted? %>
      <div class="" data-controller="tabs">
        <!-- Tab Buttons -->
        <div class="flex space-x-4">
          <div data-action="click->tabs#switch" data-tabs-target="tab" data-tab-name="directive" class="tab active">Directive</div>
          <% if @bot.humanize? %>
            <div data-action="click->tabs#switch" data-tabs-target="tab" data-tab-name="backstory" class="tab">Backstory</div>
          <% end %>
          <div data-action="click->tabs#switch" data-tabs-target="tab" data-tab-name="settings" class="tab">Settings</div>
          <% if ENV['XI_API_KEY'] %>
            <div data-action="click->tabs#switch" data-tabs-target="tab" data-tab-name="voice" class="tab">Voice</div>
          <% end %>
          <div data-action="click->tabs#switch" data-tabs-target="tab" data-tab-name="memory" class="tab">Memory</div>
          <div data-action="click->tabs#switch" data-tabs-target="tab" data-tab-name="tools" class="tab">Tools</div>
        </div>
        <div class="bg-red-200 p-4 mb-8 rounded-b-lg rounded-tr-lg shadow-2xl max-h-[500px] overflow-y-auto">
          <!-- Tab Content -->
          <div data-tabs-target="content" data-tab-name="directive">
            <%= render "directive", form: form %>
          </div>

          <% if @bot.humanize? %>
            <div data-tabs-target="content" data-tab-name="backstory" class="hidden">
              <%= render "backstory", form: form %>
            </div>
          <% end %>

          <div data-tabs-target="content" data-tab-name="settings" class="hidden">
            <%= render "settings", form: form %>
          </div>
          <% if ENV['XI_API_KEY'] %>
            <div data-tabs-target="content" data-tab-name="voice" class="hidden">
              <%= render "voice", form: form %>
            </div>
          <% end %>
          <div data-tabs-target="content" data-tab-name="memory" class="hidden">
            <%= render "memory", form: form %>
          </div>
          <div data-tabs-target="content" data-tab-name="tools" class="hidden">
            <%= render "tools", form: form %>
          </div>
        </div>
      </div>
    <% end %>
    <div class="flex gap-4 bg-">
      <%= form.submit "Save Changes", class: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" %>
      <% if @bot.published_at.blank? %>
        <%= link_to "Publish", "#", data: { reflex: "click->Bot#publish", id: @bot.id }, class: "bg-orange-600 hover:bg-orange-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" %>
      <% else %>
        <%= link_to "Unpublish", "#", data: { reflex: "click->Bot#unpublish", id: @bot.id }, class: "bg-yellow-500 hover:bg-yellow-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" %>
      <% end %>
      <% if @bot.persisted? && @bot.conversations.empty? %>
        <%= link_to "Delete", "#", data: { reflex: "click->Bot#destroy", id: @bot.id }, class: "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" %>
      <% else %>
        <div class="bg-gray-500 text-gray-400 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline cursor-not-allowed"
              title="<%= it("Deletion not allowed once conversations have been created with this bot.") %>">Delete</div>
      <% end %>
    </div>
  </div>
<% end %>
