{% extends 'base.html' %}

{% block content %}
<form method="post">
  {% csrf_token %}
  <div class="form-group row">
    <label for="gitea_token" class="col-form-label col-md-auto">Gitea Access Token:</label>
    <div class="col">
      <input name="gitea_token"
             id="gitea_token"
             class="form-control">
      <small class="text-muted">
        Can be created
        <a href="https://gitea.zom.bi/user/settings/applications">here</a>
      </small>
    </div>
    <div class="col-md-auto">
      <button type="button" class="btn btn-primary" id="buttonCheckGitea">
        Check Gitea Access
      </button>
    </div>
  </div>
  <div class="form-group row">
    <label for="gitlab_token" class="col-form-label col-md-auto">Gitlab Access Token:</label>
    <div class="col">
      <input name="gitlab_token"
             id="gitlab_token"
             class="form-control">
      <small class="text-muted">
        Can be created
        <a href="https://git.zom.bi/profile/personal_access_tokens">here</a> (with api scope)
      </small>
    </div>
  </div>

  <div class="form-group" id="projectfetch">
    <button type="button" class="btn btn-primary" id="buttonFetch">
      Fetch projects from GitLab
    </button>
  </div>

  <div class="form-group d-none" id="projectselect">
    <h4>Select projects to migrate</h4>
    <div class="d-flex flex-row">
      <div class="btn-group btn-group-sm mr-auto">
        <button type="button" class="btn btn-outline-secondary"
                id="buttonSelectAll">
          Select all
        </button>
        <button type="button" class="btn btn-outline-secondary"
                id="buttonSelectNone">
          Select none
        </button>
      </div>
      <div>
        <button type="submit" class="btn btn-primary">
          Start migration
        </button>
      </div>
    </div>
    <ul id="projectslist" class="list-group mt-4">
    </ul>
    <input type="hidden" id="usernamefield" name="username" value="">
  </div>
  </div>
</form>
{% endblock %}

{% block javascript %}
<script type="text/javascript">
  $(document).ready(function() {
      $('#buttonFetch').click(function() {
          $('#projectselect').addClass('d-none');
          $('#gitlab_token').prop('readonly', true);
          $.getJSON("{% url 'fetch_gitlab_projects' %}?gitlab_token="+$('#gitlab_token').val(), function(data) {
              if(data.error) {
                  alert(data.error);
                  $('#gitlab_token').prop('readonly', false);
                  return;
              }

              var items = [];
              data.projects.forEach(function(project) {
                  items.push(
                      "<li class='list-group-item'>" +
                          "<input name='projects[" + project + "]' type=checkbox>"+
                          "<span class='pl-2'>" + project + "</span>"+
                          "</li>"
                  );
              });

              $('#usernamefield').val(data.username);

              $('#projectslist').html(items.join(""));
              $('#projectselect').removeClass('d-none');
              $('#projectfetch').addClass('d-none');
              $('#buttonFetch').off('click');
          }).fail(function() {
              $('#gitlab_token').prop('readonly', false);
          });
      });

      $('#buttonCheckGitea').click(function() {
          $.getJSON("{% url 'check_gitea_access' %}?gitea_token="+$('#gitea_token').val(), function(result) {
              if(result.success) {
                  alert("Gitea access works");
              } else {
                  alert("Gitea access failed");
              }
          });
      });

      $('#buttonSelectAll').click(function() {
          $('#projectslist input[type=checkbox]').prop('checked',true);
      });

      $('#buttonSelectNone').click(function() {
          $('#projectslist input[type=checkbox]').prop('checked',false);
      });
  });
</script>
{% endblock %}