<%= render 'shared/turbo_modal', title: @base_template ? t('clone_template') : t('new_document_template') do %>
  <%= form_for @template, data: { turbo_frame: :_top }, html: { autocomplete: :off } do |f| %>
    <% if @base_template %>
      <%= hidden_field_tag :base_template_id, @base_template.id %>
    <% end %>
    <% if @base_template && (can?(:manage, :tenants) || true_user != current_user) && true_user.account.linked_accounts.active.accessible_by(current_ability).exists? %>
      <div class="form-control -mb-2 mt-2">
        <%= select_tag :account_id, options_for_select([true_user.account, *true_user.account.linked_accounts.active.accessible_by(current_ability)].uniq.map { |e| [e.name, e.id] }, current_account.id), required: true, class: 'base-select' %>
      </div>
    <% end %>
    <div class="form-control mt-6">
      <%= f.text_field :name, required: true, placeholder: t('document_name'), class: 'base-input', dir: 'auto' %>
    </div>
    <div class="mt-3 mb-4 flex items-center justify-between">
      <a href="#" onclick="[event.preventDefault(), window.folder_name.focus()]">
        <%= svg_icon('folder', class: 'w-6 h-6') %>
      </a>
      <folder-autocomplete class="flex justify-between w-full">
        <input id="folder_name" placeholder="<%= t('folder_name') %>" type="text" class="w-full outline-none border-transparent focus:border-transparent focus:ring-0 bg-base-100 px-1 peer" name="folder_name" value="<%= params[:folder_name].presence || @base_template&.folder&.name || TemplateFolder::DEFAULT_NAME %>" onblur="window.folder_name.value = window.folder_name.value || 'Default'" autocomplete="off">
        <a href="#" onclick="[event.preventDefault(), window.folder_name.value = '', window.folder_name.focus()]" class="shrink-0 link peer-focus:hidden mr-1.5">
          <%= t('change_folder') %>
        </a>
      </folder-autocomplete>
    </div>
    <div class="form-control">
      <%= f.button button_title(title: @base_template ? t('submit') : t('create'), disabled_with: t('creating')), class: 'base-button' %>
    </div>
  <% end %>
<% end %>
