{{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>
    <select id="repo-select" name="owner_repo" required>
      <option value="">Select a repository...</option>
      {{range $org, $repos := .Repos}}
      <optgroup label="{{$org}}">
        {{range $repos}}
        <option value="{{.Owner.Login}}/{{.Name}}">{{.FullName}}</option>
        {{end}}
      </optgroup>
      {{end}}
    </select>
    <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');

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

    repoSelect.addEventListener('change', function() {
      splitOwnerRepo();
      var labelSection = document.getElementById('label-section');
      var labelList = document.getElementById('label-list');
      if (ownerInput.value && repoInput.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;
      }
      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}}