<h1 class="page-title">Add project</h1>
{% if show_sign_in_notice %}
<div class="alert board-task-error-hint py-2 px-3 mb-3" role="alert">
  You must be signed in to add a project (sign in via the sidebar or <a href="/login?next=/addproject">open the sign-in page</a>).
</div>
{% endif %}
<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">Project Type</label>
        <radio-picker aria-label="Project source" role="radiogroup">
          <label><input type="radio" name="project_source_type" id="empty-repo" value="empty" checked>Empty Repo</label>
          <label><input type="radio" name="project_source_type" id="upload-zip" value="zip">Upload Zip</label>
        </radio-picker>
        <radio-tabs>
          <div id="tab-empty-repo" tabindex="0" class="mt-3">
            {{ empty_repo_form_content | safe }}
          </div>
          <div id="tab-upload-zip" tabindex="0" class="mt-3 d-none">
            {{ upload_zip_form_content | safe }}
          </div>
        </radio-tabs>
      </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, { credentials: 'same-origin' })
      .then(function(res) {
        // 401/403 when not logged in → red outline; same as other validation failures.
        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 sourceRadios = Array.prototype.slice.call(document.querySelectorAll('input[name="project_source_type"]'));
  var emptyTab = document.getElementById('tab-empty-repo');
  var zipTab = document.getElementById('tab-upload-zip');
  var remoteInput = document.getElementById('pull_from_remote');
  var zipInput = document.getElementById('repo_zip');

  function getSelectedSource() {
    for (var i = 0; i < sourceRadios.length; i++) {
      if (sourceRadios[i].checked) {
        return sourceRadios[i].value;
      }
    }
    return 'empty';
  }

  function updateSourceTabs() {
    var selected = getSelectedSource();
    var isZip = selected === 'zip';
    emptyTab.classList.toggle('d-none', isZip);
    zipTab.classList.toggle('d-none', !isZip);
    if (isZip) {
      remoteInput.value = '';
    } else {
      zipInput.value = '';
      zipInput.dispatchEvent(new Event('change'));
    }
  }

  sourceRadios.forEach(function(radio) {
    radio.addEventListener('change', updateSourceTabs);
  });
  updateSourceTabs();
})();

(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>