{{define "content"}}
<div class="container">
  {{template "repo_header" .}}

  <div class="card" style="max-width:680px;">
    <div class="card-header" style="padding:0.6rem 0.9rem;">
      <span class="font-semibold text-sm flex items-center gap-2">
        {{icon "upload" "size-4"}}
        {{t .Lang "file.upload_file"}}
      </span>
      <span class="font-mono text-xs text-muted">{{.Repo.OwnerUsername}}/{{.Repo.Name}}</span>
    </div>
    <form method="post" action="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/upload" enctype="multipart/form-data" class="card-body flex flex-col gap-3">
      <input type="hidden" name="_csrf" value="{{.CSRFToken}}">

      <div class="flex flex-col gap-1">
        <label class="upload-drop" id="upload-drop" for="files">
          {{icon "upload" "size-5"}}
          <span class="text-sm font-medium">{{t .Lang "file.upload_pick"}}</span>
          <span class="text-xs">{{t .Lang "file.upload_hint"}}</span>
          <input id="files" name="files" type="file" multiple style="display:none;">
        </label>
        <div id="upload-list" class="text-xs font-mono text-muted"></div>
      </div>

      <div class="flex flex-col gap-1" style="max-width:300px;">
        <label class="text-xs font-semibold" for="path">{{t .Lang "file.upload_dest"}}</label>
        <input id="path" name="path" class="input font-mono" value="{{.SubPath}}" placeholder="{{t .Lang "file.upload_dest_ph"}}">
      </div>

      <div class="flex flex-col gap-1" style="max-width:240px;">
        <label class="text-xs font-semibold" for="ref">{{t .Lang "file.branch"}}</label>
        <select id="ref" name="ref" class="input font-mono">
          {{range .Branches}}<option value="{{.}}" {{if eq . $.Ref}}selected{{end}}>{{.}}</option>{{end}}
        </select>
      </div>

      <div class="flex flex-col gap-1">
        <label class="text-xs font-semibold" for="message">{{t .Lang "file.message"}}</label>
        <input id="message" name="message" class="input font-mono" placeholder="Add files">
      </div>

      <div class="flex items-center gap-2 pt-1 flex-wrap">
        <button type="submit" class="btn btn-primary btn-sm">
          {{icon "check" "size-3.5"}}
          <span>{{t .Lang "file.upload_submit"}}</span>
        </button>
        <a href="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/tree/{{.Ref}}{{if .SubPath}}/{{.SubPath}}{{end}}" class="btn btn-ghost btn-sm">
          <span>{{t .Lang "common.cancel"}}</span>
        </a>
        <span class="text-xs text-muted">{{t .Lang "file.upload_replace_hint"}}</span>
      </div>
    </form>
  </div>
</div>
<script>
(function () {
  var input = document.getElementById('files');
  var drop = document.getElementById('upload-drop');
  var list = document.getElementById('upload-list');
  function render() {
    var names = [];
    for (var i = 0; i < input.files.length; i++) names.push(input.files[i].name);
    list.textContent = names.length ? names.join('  ·  ') : '';
  }
  input.addEventListener('change', render);
  ['dragover', 'dragenter'].forEach(function (ev) {
    drop.addEventListener(ev, function (e) { e.preventDefault(); drop.classList.add('drag'); });
  });
  ['dragleave', 'drop'].forEach(function (ev) {
    drop.addEventListener(ev, function (e) { e.preventDefault(); drop.classList.remove('drag'); });
  });
  drop.addEventListener('drop', function (e) {
    if (e.dataTransfer && e.dataTransfer.files.length) {
      input.files = e.dataTransfer.files;
      render();
    }
  });
})();
</script>
{{end}}