{% if search_results %}
  <div class="search-results m-0">
    {% for resource in search_results %}
      <a
        class="search-result-item px-4 py-2 is-clickable"
        {% if resource.is_dir %}
          hx-get="{% url 'project_resource_tree_right_pane' project.slug resource.path %}"
        {% else %}
          hx-get="{% url 'resource_detail' project.slug resource.path %}"
        {% endif %}
        hx-target="#right-pane"
        hx-push-url="{% url 'project_resource_tree' project.slug resource.path %}"
        data-path="{{ resource.path }}"
        title="{{ resource.path }}">
        <span class="icon">
          {% if resource.is_dir %}
            <i class="fas fa-folder"></i>
          {% else %}
            <i class="far fa-file"></i>
          {% endif %}
        </span>
        <span class="search-result-path">{{ resource.path }}</span>
      </a>
    {% endfor %}
  </div>
{% elif query %}
  <div class="has-text-centered py-5">
    <div class="icon is-large has-text-grey-light mb-2">
      <i class="fas fa-search fa-2x"></i>
    </div>
    <p class="has-text-grey">No files found matching "{{ query }}"</p>
  </div>
{% endif %}