<h1 class="page-title">Add project</h1>
<div class="card">
  <div class="card-body">
    <form action="/addproject" method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
      <div class="mb-3" id="project_name_wrapper">
        <label class="form-label required" for="project_name">Project name</label>
        <input type="text" class="form-control" id="project_name" name="project_name" required
               placeholder="my-repo" autocomplete="off">
        <small class="form-hint">Unique name for the project (no path segments).</small>
      </div>

      <div class="mb-3">
        <label class="form-label" for="pull_from_remote">Pull from remote</label>
        <input type="url" class="form-control" id="pull_from_remote" name="pull_from_remote"
               placeholder="https://example.com/repo.git or ssh://git@host/repo.git or git://host/repo.git">
        <small class="form-hint">Optional. Use an <code>ssh://</code>, <code>git://</code>, or <code>https://</code> URL to clone an existing repository.</small>
      </div>

      <div class="mb-3">
        <label class="form-label" for="repo_zip">Upload .zip (git repo)</label>
        <div class="dropzone border rounded p-4 text-center" id="dropzone" style="min-height: 120px;">
          <input type="file" class="form-control d-none" id="repo_zip" name="repo_zip" accept=".zip"
                 data-dropzone-target>
          <div class="dropzone-placeholder text-muted" data-dropzone-placeholder>
            Drag a .zip file here or click to choose. The archive should contain a git repository (e.g. a directory with a <code>.git</code> folder).
          </div>
          <div class="dropzone-filename d-none text-start small mt-2" data-dropzone-filename></div>
        </div>
      </div>

      <div class="mb-3">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="perform_maintenance" name="perform_maintenance" value="on">
          <label class="form-check-label" for="perform_maintenance">Perform maintenance</label>
        </div>
        <small class="form-hint">Run <code>git maintenance start</code> to schedule gc and other maintenance at a specified interval.</small>
      </div>

      <div class="mb-3">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="create_task_board" name="create_task_board" value="on">
          <label class="form-check-label" for="create_task_board">Create task board</label>
        </div>
        <small class="form-hint">Create a task board for this project; tasks are stored in the object database.</small>
      </div>

      <div class="form-footer">
        <button type="submit" class="btn btn-primary">Add project</button>
        <a href="/" class="btn btn-ghost-secondary">Cancel</a>
      </div>
    </form>
  </div>
</div>

<script>
(function() {
  var projectNameInput = document.getElementById('project_name');
  var nameValidTimeout = null;

  function setProjectNameBorder(valid) {
    projectNameInput.classList.remove('border', 'border-success', 'border-danger');
    projectNameInput.classList.add('border');
    if (valid === true) {
      projectNameInput.classList.add('border-success');
    } else if (valid === false) {
      projectNameInput.classList.add('border-danger');
    } else {
      projectNameInput.classList.remove('border');
    }
  }

  function checkProjectName() {
    var name = (projectNameInput.value || '').trim();
    if (!name) {
      setProjectNameBorder(null);
      return;
    }
    var url = '/projectnamevalid?name=' + encodeURIComponent(name);
    fetch(url)
      .then(function(res) {
        setProjectNameBorder(res.ok);
      })
      .catch(function() {
        setProjectNameBorder(null);
      });
  }

  projectNameInput.addEventListener('blur', function() {
    checkProjectName();
  });
  projectNameInput.addEventListener('input', function() {
    clearTimeout(nameValidTimeout);
    var name = (projectNameInput.value || '').trim();
    if (!name) {
      setProjectNameBorder(null);
      return;
    }
    nameValidTimeout = setTimeout(checkProjectName, 400);
  });
})();

(function() {
  var dropzone = document.getElementById('dropzone');
  var input = document.getElementById('repo_zip');
  var placeholder = dropzone.querySelector('[data-dropzone-placeholder]');
  var filenameEl = dropzone.querySelector('[data-dropzone-filename]');

  function showFile(name) {
    if (name) {
      placeholder.classList.add('d-none');
      filenameEl.classList.remove('d-none');
      filenameEl.textContent = 'Selected: ' + name;
    } else {
      placeholder.classList.remove('d-none');
      filenameEl.classList.add('d-none');
      filenameEl.textContent = '';
    }
  }

  dropzone.addEventListener('click', function() { input.click(); });
  dropzone.addEventListener('dragover', function(e) { e.preventDefault(); dropzone.classList.add('border-primary'); });
  dropzone.addEventListener('dragleave', function() { dropzone.classList.remove('border-primary'); });
  dropzone.addEventListener('drop', function(e) {
    e.preventDefault();
    dropzone.classList.remove('border-primary');
    var files = e.dataTransfer.files;
    if (files.length && files[0].name.toLowerCase().endsWith('.zip')) {
      input.files = files;
      showFile(files[0].name);
    }
  });
  input.addEventListener('change', function() {
    showFile(input.files.length ? input.files[0].name : null);
  });
})();
</script>