- page_title _("Find File"), @ref
- add_page_specific_style 'page_bundles/tree'

.file-finder-holder.tree-holder.clearfix.js-file-finder{ 'data-file-find-url': "#{escape_javascript(project_files_path(@project, @ref, format: :json))}", 'data-find-tree-url': escape_javascript(project_tree_path(@project, @ref)), 'data-blob-url-template': escape_javascript(project_blob_path(@project, @ref)) }
  .nav-block
    .tree-ref-holder
      #js-blob-ref-switcher{ data: { project_id: @project.id, ref: @ref, namespace: "/-/find_file" } }
    %ul.breadcrumb.repo-breadcrumb
      %li.breadcrumb-item
        = link_to project_tree_path(@project, @ref) do
          = @project.path
      %li.file-finder.breadcrumb-item
        %input#file_find.form-control.file-finder-input{ type: "text", placeholder: _('Find by path'), autocomplete: 'off' }

  .tree-content-holder
    .table-holder
      %table.table.files-slider{ class: "table_#{@hex_path} tree-table" }
        %tbody
        .col-12.empty-state.hidden
          .svg-150.svg-content
            = image_tag('illustrations/empty-state/empty-search-md.svg', alt: 'No files svg', lazy: true)
          .text-center
            %h4
              = _('There are no matching files')
            %p.text-secondary
              = _('Try using a different search term to find the file you are looking for.')
      = gl_loading_icon(size: 'md', css_class: 'gl-mt-3 loading')