<%= render Spina::UserInterface::ModalComponent.new(size: "max-w-screen-md h-full md:h-96") do %>
  <div class="h-full" data-controller="embed" data-trix-target="<%= params[:target] %>">
    <%= turbo_frame_tag :trix_attachment_html, class: 'hidden', data: {embeddables_target: "html", action: "embed-tag:embedded->embed#insertEmbeddable embed-tag:embedded->modal#close"} %>
    
    <%= turbo_frame_tag :embeddable_form do %>
      <div class="flex h-full">
        <div class="p-4 w-64 bg-gray-100 md:bg-opacity-50">
          <div class="text-xs font-medium text-gray-600 mb-2">
            <%=t "spina.embeds.embed_a_component" %>
          </div>
          <% embeddables.each do |embeddable| %>
            <% if embeddable.name == @embeddable.class.name %>
              <% classes = "font-medium w-full text-sm px-3 py-2 rounded-lg flex items-center text-gray-900 bg-spina-dark bg-opacity-20" %>
            <% else %>
              <% classes = "font-medium w-full text-sm px-3 py-2 rounded-lg flex items-center text-gray-600 hover:bg-gray-200 bg-opacity-100 hover:bg-gray-200" %>
            <% end %>
          
            <%= link_to spina.new_admin_embed_path(embed_type: embeddable.name), class: classes, data: {turbo_frame: :embeddable_form} do %>
              <%= heroicon(embeddable.icon, style: :solid, class: 'w-5 h-5 mr-2 text-spina-light') %>
              <%= embeddable.model_name.human %>
            <% end %>
          <% end %>
        </div>
        
        <div class="bg-white flex-1">
          <%= form_with model: @embeddable, scope: :embeddable, url: spina.admin_embeds_path, class: 'h-full' do |f| %>
            <%= hidden_field_tag :embed_type, @embeddable.class.name %>
            
            <div class="h-full relative">
              <div class="flex-1 p-5 h-full pb-20 overflow-scroll">
                <%= render partial: @embeddable.to_fields_path, locals: {f: f} %>
              </div>
              
              <div class="w-full flex backdrop-filter backdrop-blur-lg absolute bottom-0 justify-end p-5 py-4 border-t border-gray-200">
                <%= button_tag type: :submit, class: 'btn btn-primary' do %>
                  <%= heroicon('plus', style: :mini, class: 'w-4 h-4 -ml-1 mr-1') %>
                  <%=t "spina.embeds.embed_component" %>
                <% end %>
              </div>
            </div>
          <% end %>
        </div>
      </div>
    <% end %>
    
  </div>
<% end %>