<div class="explorer-page" ng-init="sidebarCollapsed = window.matchMedia && window.matchMedia('(max-width: 767px)').matches">
  <button
    class="sidebar-toggle"
    ng-show="files.length"
    ng-click="sidebarCollapsed = !sidebarCollapsed"
    aria-label="{{sidebarCollapsed ? 'Show files' : 'Hide files'}}"
  >
    <i class="fas" ng-class="sidebarCollapsed ? 'fa-folder-open' : 'fa-times'"></i>
    <span ng-bind="sidebarCollapsed ? 'Files' : 'Close'"></span>
  </button>

  <div class="leftCol" ng-show="files.length" ng-class="{'collapsed': sidebarCollapsed}">
    <div class="leftCol-head">
      <span class="leftCol-eyebrow">Files</span>
      <button class="leftCol-close" ng-click="sidebarCollapsed = true" aria-label="Close files">
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="leftCol-search">
      <div class="tree-search-box">
        <i class="fas tree-search-icon" ng-class="fileSearchLoading ? 'fa-spinner fa-spin' : 'fa-search'"></i>
        <input
          type="text"
          class="tree-search-input"
          placeholder="Search files"
          ng-model="fileSearchQuery"
          ng-model-options="{ debounce: 300 }"
          ng-change="onFileSearchChange()"
          aria-label="Search files"
        />
        <kbd class="tree-search-kbd" ng-hide="fileSearchQuery">{{isMac ? '⌘' : 'Ctrl+'}}K</kbd>
        <button
          class="tree-search-clear"
          ng-show="fileSearchQuery"
          ng-click="fileSearchQuery = ''; onFileSearchChange()"
          aria-label="Clear search"
        >&times;</button>
      </div>
    </div>
    <div class="leftCol-project-header">
      <span class="project-name" ng-bind="repoId"></span>
      <span class="project-file-count">{{fileCounts[''] || files.length}} files</span>
    </div>
    <div class="leftCol-body">
      <div
        ng-if="options.truncatedFolders.length > 0"
        class="paper-inline-warning"
        role="alert"
      >
        <i class="fas fa-exclamation-triangle"></i>
        {{ 'WARNINGS.repo_truncated' | translate }}
      </div>
      <div
        ng-if="options.hasSubmodules"
        class="paper-inline-warning"
        role="alert"
      >
        <i class="fas fa-exclamation-triangle"></i>
        {{ 'WARNINGS.submodules_not_included' | translate }}
      </div>
      <tree class="files" file="files" search-query="fileSearchQuery" search-results="fileSearchResults"></tree>
    </div>
    <div class="leftCol-foot">
      <span
        class="last-update"
        data-toggle="tooltip"
        data-placement="top"
        title="{{options.lastUpdateDate}}"
      >
        Updated {{options.lastUpdateDate|date}}
      </span>
    </div>
  </div>

  <div
    class="leftCol-backdrop"
    ng-show="files.length && !sidebarCollapsed"
    ng-click="sidebarCollapsed = true"
  ></div>

  <div class="explorer-main">
    <div class="status-bar">
      <ol class="breadcrumb paths" aria-label="Path">
        <li class="breadcrumb-item" ng-repeat="p in paths" ng-bind="p"></li>
      </ol>
      <div class="status-bar-actions">
        <a
          ng-if="options.isAdmin || options.isOwner"
          ng-href="/anonymize/{{repoId}}"
          class="btn btn-sm"
          aria-label="Edit"
          ><i class="far fa-edit"></i><span class="d-none d-md-inline"> Edit</span></a
        >
        <button
          ng-if="type == 'html-doc' && !showSource"
          ng-click="toggleAllowScripts()"
          class="btn btn-sm"
          ng-class="{'btn-active': allowScripts}"
          aria-label="Allow this document to run JavaScript"
          title="Scripts in this file are blocked by default. Enable them only if you trust the repository — the document stays isolated from your session either way."
        >
          <i class="fab fa-js"></i><span class="d-none d-md-inline">
            {{ allowScripts ? "JS on" : "JS off" }}</span
          >
        </button>
        <button
          ng-if="type == 'html-doc'"
          ng-click="toggleSource()"
          class="btn btn-sm"
          aria-label="Toggle between the rendered document and its source"
          title="Toggle between the rendered document and its source"
        >
          <i class="fas" ng-class="showSource ? 'fa-eye' : 'fa-code'"></i
          ><span class="d-none d-md-inline">
            {{ showSource ? "Rendered" : "Source" }}</span
          >
        </button>
        <a
          ng-show="content != null"
          ng-href="{{url}}"
          target="_self"
          class="btn btn-sm"
          aria-label="View raw current file"
          title="View the raw content of the current file"
          ><i class="fas fa-file-alt"></i><span class="d-none d-md-inline"> Raw</span></a
        >
        <a
          ng-show="content != null"
          ng-href="{{url}}&download=true"
          target="_self"
          class="btn btn-sm"
          aria-label="Download current file"
          title="Download the current file"
          ><i class="fas fa-download"></i><span class="d-none d-md-inline"> Download</span></a
        >
        <a
          ng-if="options.download"
          ng-href="/api/repo/{{repoId}}/zip"
          target="_self"
          class="btn btn-sm"
          aria-label="Download full repository as ZIP"
          title="Download the full repository as a ZIP archive"
          ><i class="fas fa-file-archive"></i><span class="d-none d-md-inline"> Full repo ZIP</span></a
        >
        <a
          ng-if="options.hasWebsite"
          ng-href="/w/{{repoId}}/"
          target="_self"
          class="btn btn-sm"
          aria-label="Website"
          ><i class="fas fa-globe"></i><span class="d-none d-md-inline"> Website</span></a
        >
      </div>
    </div>
    <div class="explorer-content">
      <ng-include src="'./partials/pageView.htm'"></ng-include>
    </div>
  </div>
</div>
