{% extends "workspace_base.html" %}
{% block workspace_content %}
<section class="content-heading files-heading">
  <div>
    <h1>{{ t('files.heading') }}</h1>
  </div>
  <div class="file-primary-actions">
    <form id="file-upload-form"
          method="post"
          action="/w/{{ workspace.id }}/files/upload"
          enctype="multipart/form-data"
          class="upload-form"
          data-check-url="/w/{{ workspace.id }}/files/upload-check"
          data-stream-url="/w/{{ workspace.id }}/files/upload-stream"
          data-files-url="/w/{{ workspace.id }}/files"
          data-max-upload-bytes="{{ max_upload_bytes }}">
      <input type="hidden" name="_csrf" value="{{ csrf_token }}">
      <input type="hidden" name="parent" value="{{ path }}">
      <input id="upload-overwrite" type="hidden" name="overwrite" value="0">
      <label class="secondary-button upload-trigger">
        <span>{{ t('files.upload') }}</span>
        <input id="file-upload-input" type="file" name="files" multiple>
      </label>
    </form>
    <div class="create-entry" data-popover>
      <button class="secondary-button"
              type="button"
              data-popover-trigger
              aria-expanded="false"
              aria-controls="file-create-popover">{{ t('files.new') }}</button>
      <form id="file-create-popover"
            method="post"
            action="/w/{{ workspace.id }}/files/create"
            class="create-popover"
            data-popover-panel
            hidden>
        <input type="hidden" name="_csrf" value="{{ csrf_token }}">
        <input type="hidden" name="parent" value="{{ path }}">
        <select name="kind" aria-label="{{ t('files.kind') }}">
          <option value="file">{{ t('common.file') }}</option>
          <option value="directory">{{ t('common.folder') }}</option>
        </select>
        <input name="name" placeholder="{{ t('common.name') }}" required>
        <button class="primary-button" type="submit">{{ t('common.create') }}</button>
      </form>
    </div>
  </div>
</section>

<section class="file-context-bar" aria-label="{{ t('files.current') }}">
  <div class="file-current-location">
    <span class="path-label">{{ t('files.current') }}</span>
    <nav class="breadcrumbs" aria-label="{{ t('files.current') }}">
      {% for crumb in breadcrumbs %}
        <a href="/w/{{ workspace.id }}/files?path={{ crumb.path | urlencode }}{% if show_noise %}&noise=1{% endif %}">{% if loop.first %}{{ workspace.display_name }}{% else %}{{ crumb.name }}{% endif %}</a>
        {% if not loop.last %}<span>/</span>{% endif %}
      {% endfor %}
    </nav>
  </div>
  {% if can_remote_run_source %}
  <a class="secondary-button file-remote-run"
     href="/remote-runs/new?source_workspace_id={{ workspace.id | urlencode }}&source_path={{ path | urlencode }}">
    {{ t('remote_run.run_elsewhere') }}
  </a>
  {% endif %}
</section>

<section class="file-list-tools" aria-label="{{ t('files.actions') }}">
  <form class="file-search-form" method="get" action="/w/{{ workspace.id }}/files" role="search" data-live-file-search>
    <input type="hidden" name="path" value="{{ path }}">
    {% if show_noise %}<input type="hidden" name="noise" value="1">{% endif %}
    <label class="sr-only" for="file-search-input">{{ t('files.search') }}</label>
    <input id="file-search-input"
           type="search"
           name="q"
           value="{{ query }}"
           placeholder="{{ t('files.search_placeholder') }}"
           autocomplete="off">
    <button class="secondary-button" type="submit">{{ t('files.search') }}</button>
    <button id="file-search-clear" class="quiet-action" type="button" {% if not query %}hidden{% endif %}>{{ t('common.clear') }}</button>
  </form>
  {% if noise_count %}
  <form class="file-visibility-form" method="get" action="/w/{{ workspace.id }}/files">
    <input type="hidden" name="path" value="{{ path }}">
    <input type="hidden" name="noise" value="{{ 0 if show_noise else 1 }}">
    {% if query %}<input type="hidden" name="q" value="{{ query }}">{% endif %}
    <button class="file-visibility-toggle{% if show_noise %} is-active{% endif %}"
            type="submit"
            aria-pressed="{{ 'true' if show_noise else 'false' }}">
      {% if show_noise %}{{ t('files.hide_noise') }}{% else %}{{ t('files.show_noise', count=noise_count) }}{% endif %}
    </button>
  </form>
  {% endif %}
</section>

{% if error %}<p class="notice error">{{ error }}</p>{% endif %}
{% if uploaded %}<p class="notice success">{{ t('files.uploaded', count=uploaded) }}</p>{% endif %}

<form id="file-bulk-form"
      method="post"
      action="/w/{{ workspace.id }}/files/archive"
      class="file-selection-bar"
      hidden>
  <input type="hidden" name="_csrf" value="{{ csrf_token }}">
  <input type="hidden" name="parent" value="{{ path }}">
  <span class="file-selection-summary">
    <strong id="file-selection-count">0</strong>
    <span>{{ t('files.selected') }}</span>
  </span>
  <span class="file-selection-actions">
    <button id="file-selection-clear" class="quiet-action" type="button">{{ t('files.clear_selection') }}</button>
    <button class="primary-button" type="submit">{{ t('files.download_zip') }}</button>
  </span>
</form>

<section id="upload-progress-panel" class="upload-progress-panel" hidden aria-live="polite">
  <div class="upload-progress-heading">
    <span>
      <strong id="upload-progress-title">{{ t('files.upload_progress_title') }}</strong>
      <small id="upload-progress-status"></small>
    </span>
    <button id="cancel-file-upload" class="secondary-button" type="button">{{ t('files.upload_cancel') }}</button>
  </div>
  <progress id="upload-progress-bar" max="100" value="0"></progress>
  <small class="upload-progress-note">{{ t('files.upload_cancel_note') }}</small>
  <a id="upload-refresh-link" class="text-action" href="/w/{{ workspace.id }}/files?path={{ path | urlencode }}" hidden>{{ t('files.upload_refresh') }}</a>
</section>

<div id="file-results" aria-live="polite" aria-busy="false">
  {% include "_file_results.html" %}
</div>

<dialog id="file-actions-dialog" class="file-actions-dialog" data-workspace-id="{{ workspace.id }}">
  <header class="file-actions-dialog-header">
    <span>
      <small>{{ t('files.actions') }}</small>
      <strong id="file-actions-title"></strong>
    </span>
    <button type="button" data-close-dialog aria-label="{{ t('common.close') }}">×</button>
  </header>
  <form method="post"
        action="/w/{{ workspace.id }}/files/rename"
        class="stack-form file-action-form">
    <input type="hidden" name="_csrf" value="{{ csrf_token }}">
    <input id="file-rename-path" type="hidden" name="path">
    <label>
      <span>{{ t('files.new_name') }}</span>
      <input id="file-rename-name" name="new_name" required>
    </label>
    <button type="submit">{{ t('common.rename') }}</button>
  </form>
  <form method="post"
        action="/w/{{ workspace.id }}/files/delete"
        id="file-delete-form"
        class="file-delete-form">
    <input type="hidden" name="_csrf" value="{{ csrf_token }}">
    <input id="file-delete-path" type="hidden" name="path">
    <button class="danger-button" type="submit">{{ t('common.delete') }}</button>
  </form>
  <a id="file-download-action" class="secondary-button file-dialog-download" href="#">{{ t('common.download') }}</a>
</dialog>

<dialog id="upload-confirm-dialog" class="upload-confirm-dialog">
  <header class="file-actions-dialog-header">
    <span><small>{{ t('files.upload_confirm') }}</small><strong>{{ t('files.upload_conflict') }}</strong></span>
    <button type="button" data-close-dialog aria-label="{{ t('common.close') }}">×</button>
  </header>
  <div class="upload-conflict-copy">
    <p>{{ t('files.upload_conflict_copy') }}</p>
    <div id="upload-conflict-list" class="upload-conflict-list"></div>
  </div>
  <div class="dialog-actions">
    <button type="button" class="secondary-button" data-close-dialog>{{ t('common.cancel') }}</button>
    <button type="button" class="primary-button" id="confirm-upload-overwrite">{{ t('files.overwrite') }}</button>
  </div>
</dialog>
{% endblock %}