{{define "content"}}
<h1>Create Issue</h1>

<div id="form-error" class="empty" style="display:none;"></div>

<form id="create-issue-form" hx-post="/issues" hx-swap="innerHTML" hx-target="#main-content">
  <div class="form-group">
    <label for="repo-select">Repository</label>
    <input list="repo-options" id="repo-select" name="owner_repo"
           placeholder="Type to search repositories..." required autocomplete="off">
    <datalist id="repo-options">
      {{range $org, $repos := .Repos}}
        {{range $repos}}
        <option value="{{.Owner.Login}}/{{.Name}}">{{.FullName}}</option>
        {{end}}
      {{end}}
    </datalist>
    <input type="hidden" name="owner" id="owner-input">
    <input type="hidden" name="repo" id="repo-input">
  </div>

  <div class="form-group" id="label-section" style="display:none;">
    <label>Labels</label>
    <div id="label-list"></div>
  </div>

  <div class="form-group">
    <label for="title">Title</label>
    <input type="text" id="title" name="title" placeholder="Issue title" required>
  </div>

  <div class="form-group">
    <label for="body">Description</label>
    <textarea id="body" name="body" placeholder="Describe the issue..."></textarea>
  </div>

  <button type="submit" class="btn btn-primary">Create Issue</button>
</form>

<script>
  (function() {
    var repoSelect = document.getElementById('repo-select');
    var ownerInput = document.getElementById('owner-input');
    var repoInput = document.getElementById('repo-input');
    var formError = document.getElementById('form-error');

    // Build a set of valid repo values for validation.
    var validRepos = {};
    var options = document.getElementById('repo-options').options;
    for (var i = 0; i < options.length; i++) {
      validRepos[options[i].value] = true;
    }

    function splitOwnerRepo() {
      var val = repoSelect.value;
      if (val && val.indexOf('/') !== -1) {
        var parts = val.split('/');
        ownerInput.value = parts[0] || '';
        repoInput.value = parts[1] || '';
      } else {
        ownerInput.value = '';
        repoInput.value = '';
      }
    }

    var debounceTimer = null;
    repoSelect.addEventListener('input', function() {
      clearTimeout(debounceTimer);
      debounceTimer = setTimeout(function() {
        splitOwnerRepo();
        var labelSection = document.getElementById('label-section');
        var labelList = document.getElementById('label-list');
        if (ownerInput.value && repoInput.value && validRepos[repoSelect.value]) {
          labelList.innerHTML = '<span class="empty">Loading labels...</span>';
          labelSection.style.display = 'block';
          htmx.ajax('GET', '/issues/new/labels?owner=' + encodeURIComponent(ownerInput.value) + '&repo=' + encodeURIComponent(repoInput.value), {target: '#label-list', swap: 'innerHTML'});
        } else {
          labelSection.style.display = 'none';
          labelList.innerHTML = '';
        }
      }, 300);
    });

    // Also handle the change event for when a datalist option is selected directly.
    repoSelect.addEventListener('change', function() {
      clearTimeout(debounceTimer);
      splitOwnerRepo();
      var labelSection = document.getElementById('label-section');
      var labelList = document.getElementById('label-list');
      if (ownerInput.value && repoInput.value && validRepos[repoSelect.value]) {
        labelList.innerHTML = '<span class="empty">Loading labels...</span>';
        labelSection.style.display = 'block';
        htmx.ajax('GET', '/issues/new/labels?owner=' + encodeURIComponent(ownerInput.value) + '&repo=' + encodeURIComponent(repoInput.value), {target: '#label-list', swap: 'innerHTML'});
      } else {
        labelSection.style.display = 'none';
        labelList.innerHTML = '';
      }
    });

    // Validate before HTMX submit.
    document.getElementById('create-issue-form').addEventListener('htmx:configRequest', function(evt) {
      splitOwnerRepo();
      if (!ownerInput.value || !repoInput.value) {
        evt.preventDefault();
        formError.textContent = 'Please select a repository before submitting.';
        formError.style.display = 'block';
        return false;
      }
      if (!validRepos[repoSelect.value]) {
        evt.preventDefault();
        formError.textContent = 'Please select a valid repository from the list.';
        formError.style.display = 'block';
        return false;
      }
      formError.style.display = 'none';
    });

    // Show server-side errors inline on HTMX error responses.
    document.getElementById('create-issue-form').addEventListener('htmx:responseError', function(evt) {
      formError.textContent = evt.detail.xhr.responseText || 'An error occurred. Please try again.';
      formError.style.display = 'block';
    });
  })();
</script>
{{end}}