<div>
  <%= link_to @template_folder.parent_folder ? folder_path(@template_folder.parent_folder) : root_path, class: 'flex items-center' do %>
    <%= svg_icon('chevron_left', class: 'w-5 h-5') %>
    <span style="margin-left: 3px"><%= @template_folder.parent_folder&.name || t('home') %></span>
  <% end %>
</div>
<dashboard-dropzone>
  <div class="relative flex justify-between items-center w-full mb-4">
    <%= form_for '', url: '', id: form_id = SecureRandom.uuid, method: :post, class: 'hidden', data: { target: 'dashboard-dropzone.form' }, html: { enctype: 'multipart/form-data' } do %>
      <input name="form_id" value="<%= form_id %>">
      <input name="folder_name" value="<%= @template_folder.full_name %>">
      <button type="submit"></button>
      <input id="dashboard_dropzone_input" name="files[]" type="file" multiple>
    <% end %>
    <%= render 'templates/dashboard_dropzone', style: 'height: 137px' %>
    <% unless @template_folder.parent_folder %>
      <%= render 'templates/dashboard_folder_dropzone', style: 'height: 137px' %>
    <% end %>
    <h1 class="text-2xl truncate md:text-3xl font-bold flex items-center flex-grow min-w-0 space-x-2 md:flex <%= 'hidden' if params[:q].present? %>">
      <%= svg_icon('folder', class: 'w-9 h-9 flex-shrink-0') %>
      <span class="peer truncate">
        <%= @template_folder.name %>
      </span>
      <% if can?(:update, @template_folder) && @template_folder.full_name != TemplateFolder::DEFAULT_NAME %>
        <span class="opacity-0 hover:opacity-100 peer-hover:opacity-100">
          <a href="<%= edit_folder_path(@template_folder) %>" data-turbo-frame="modal">
            <%= svg_icon('pencil', class: 'w-7 h-7') %>
          </a>
        </span>
      <% end %>
    </h1>
    <div class="flex space-x-2">
      <% if params[:q].present? || @pagy.count.nil? || @pagy.count > 0 || @template_folders.present? %>
        <%= render 'shared/search_input' %>
      <% end %>
      <% if can?(:create, ::Template) %>
        <span class="hidden sm:block">
          <%= render 'templates/upload_button', folder_name: @template_folder.full_name %>
        </span>
        <%= link_to new_template_path(folder_name: @template_folder.full_name), class: 'white-button !border gap-2', data: { turbo_frame: :modal } do %>
          <%= svg_icon('plus', class: 'w-6 h-6 stroke-2') %>
          <span class="hidden md:block"><%= t('create') %></span>
        <% end %>
      <% end %>
    </div>
  </div>
  <% if @template_folders.present? %>
    <div class="grid gap-4 md:grid-cols-3 <%= 'mb-6' if @templates.present? %>">
      <%= render partial: 'template_folders/folder', collection: @template_folders, as: :folder %>
    </div>
  <% end %>
  <% if @pagy.count.nil? || @pagy.count > 0 %>
    <div class="grid gap-4 md:grid-cols-3">
      <%= render partial: 'templates/template', collection: @templates %>
    </div>
    <% templates_order_select_html = capture do %>
      <% if params[:q].blank? && @pagy.pages > 1 && !can?(:manage, :countless) %>
        <%= render 'shared/templates_order_select', with_recently_used: @pagy.count.present? && @pagy.count < 10_000, selected_order: %>
      <% end %>
    <% end %>
    <%= render 'shared/pagination', pagy: @pagy, items_name: @templates.present? ? 'templates' : 'template_folders', right_additional_html: templates_order_select_html %>
  <% elsif params[:q].present? %>
    <div class="text-center">
      <div class="mt-16 text-3xl font-semibold">
        <%= t('templates_not_found') %>
      </div>
    </div>
    <% if @related_submissions.present? %>
      <h1 class="text-2xl md:text-3xl sm:text-4xl font-bold mt-8 md:mt-4">
        <%= t('submissions') %>
      </h1>
      <div class="space-y-4 mt-4">
        <%= render partial: 'templates/submission', collection: @related_submissions, locals: { with_template: true } %>
      </div>
      <%= render 'shared/pagination', pagy: @related_submissions_pagy, items_name: 'submissions', next_page_path: submissions_path(q: params[:q], folder: @template_folder.full_name) %>
    <% end %>
  <% end %>
</dashboard-dropzone>
