{% extends "cacsremoteservice/views/layouts/project-view.html" %}
{% block main %}
<div class="project-wizard-view specify-remotes" id="page-body">
<div class="title-area">
    <h1>Specify Git Remotes</h1>
    {% include "cacsremoteservice/views/partials/validation-errors.html" %}
  </div>
  <form action="{{view-context}}/projects/new/specify-remotes" method="post">
    <div class="form-group">
      <section>
        <h2>Git authentication</h2>
        <span class="help-block">
          To authenticate access to your Git provider, use one of the options
          specified below.
        </span>
      </section>
      <section>
        <h6>SSH key <span>(recommended option)</span></h6>
        <ul>
          {% if ssh-public-key %}
          <li>
            If you&apos;re using SSH key-based authentication to connect to your
            remote Git repositories, please copy and paste SSH key to your Git
            service provider.
          </li>
          <li>
            Here are instructions on how you can do that with
            <a target="_blank"
              href="https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account">GitHub</a>,
            <a target="_blank" href="https://docs.gitlab.com/ee/user/ssh.html">GitLab</a>,
            <a target="_blank"
              href="https://support.atlassian.com/bitbucket-cloud/docs/configure-ssh-and-two-step-verification/">BitBucket</a>
            or
            <a target="_blank"
              href="https://learn.microsoft.com/en-us/azure/devops/repos/git/use-ssh-keys-to-authenticate?view=azure-devops">Azure
              DevOps</a>
          </li>
          {% else %}
          <li>
            We recommend using an ed25519 SSH key for authentication. Follow
            <a target="_blank" rel="noreferrer noopener" {% if installation-type.jar? %}
              href="https://codescene.com/product/free-trial/on-prem/jar/deploy#create-an-ssh-key" {% else %}
              href="{{view-context}}/docs/getting-started/installation.html?#git-repository-access" {% endif %}>
              these instructions
            </a>
            to generate it. Once done, please reload this page.
          </li>
          {% endif %}
        </ul>
        {% if ssh-public-key %}
        <label class="enter-urls" for="copy-to-clipboard">Copy this SSH key</label>
        <div class="ssh-key-with-copy">
          <div onclick="copyToClipboard()" class="copy-to-clipboard" id="copy-to-clipboard">
            <div class="popup-message" id="popup-message" style="display: none;">SSH Key copied</div>
          </div>
          <span contenteditable="false" id="ssh-public-key" class="form-control" type="text" name="ssh-key" readonly>
            {{ssh-public-key}}</span>
        </div>
        {% endif %}
      </section>
      <section>
        <h6 onclick="toggleSection()" class="other-auth-types__header">
          HTTPS <i class="fa fa-chevron-down"></i>
        </h6>
        <div id="other-auth-types" style="display: none">
          <ul>
            <li>
              If you&apos;re using HTTPS token-based authentication to connect
              to your remote Git repositories, please copy and paste HTTPS
              repository URL (for example,
              https://user:token@host.xz[port]/path/to/repo.git).
            </li>
            <li>
              For HTTPS-based URLs (especially with embedded passwords),
              <a target="_blank"
                href="https://developers.google.com/maps/documentation/urls/url-encoding#special-characters">special
                characters</a>
              should be
              <a target="_blank" href="https://www.urlencoder.io/">URL encoded</a>
            </li>
            <li>
              Here are the instructions on how to create personal access tokens
              on
              <a target="_blank"
                href="https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens">GitHub</a>,
              <a target="_blank" href="https://docs.gitlab.com/ee/user/profile/personal_access_tokens.html">GitLab</a>,
              <a target="_blank"
                href="https://confluence.atlassian.com/bitbucketserver/http-access-tokens-939515499.html">BitBucket</a>
              or
              <a target="_blank"
                href="https://learn.microsoft.com/en-us/azure/devops/organizations/accounts/use-personal-access-tokens-to-authenticate?view=azure-devops&tabs=Windows">Azure
                DevOps</a>
            </li>
          </ul>
        </div>
      </section>

      <section class="repository-urls">
        <h2>Git Repository URLs</h2>
        <label class="enter-urls" for="dynamic-vcs-list">Enter Git repository URLs to be part of this project</label>
        <div class="input-list" id="dynamic-vcs-list">
          {% for vcs in vcss %}
          <input class="repo-path-input form-control" type="text" name="vcs_{{forloop.counter0}}" value="{{vcs}}"
            placeholder="ssh://[user@]host.xz[:port]/path/to/repo.git/" />
          <div class="repo-path-alert"></div>
          {% endfor %}
          <input class="repo-path-input form-control" type="text" name="vcs_{{vcss|count}}"
            placeholder="ssh://[user@]host.xz[:port]/path/to/repo.git/" autofocus value="" />
          <div class="repo-path-alert"></div>
        </div>
      </section>
      <section class="local-path">
        <input type="hidden" name="fixed_repo_roots" value="{{fixed_repo_roots}}" />
        <input type="hidden" name="wizard-id" value="{{wizard-id}}" />
        <input type="hidden" name="pending-operation-id" value="{{pending-operation-id}}" />

        <h2>Local Path</h2>
        {% if fixed_repo_roots %}
        <span class="help-block">This path is auto generated from your admin settings, and points to a
          folder where the remotes will be cloned.</span>
        {% else %}
        <span class="help-block">
          The local path to where your clones will be stored.
        </span>
        {% endif %}
        <div class="input-list" id="local-git-path">
          <input class="form-control" type="text" {% if fixed_repo_roots %} readonly {% endif %}
            name="local-path-for-remotes" value="{{local-path-for-remotes}}" placeholder="/path/on/your/filesystem"
            required />
        </div>
      </section>
    </div>

    <button class="default-button" type="submit">
      <i class="fa fa-search clone-progress-indicator"></i>
      <span class="text">Continue</span>
    </button>
  </form>
</div>
{% endblock %} {% block scripts %}
<script type="text/javascript">
  {% if feature-flags.project-creation-redesign %}
  codescene.views.projects.newProjectWizard.specifyRemotesV2.init({
    mountPoint: document.getElementById('page-body'),
    data: {
      postUrl: '{{view-context}}/projects/new/specify-remotes',  
      urls: {{vcss|json|safe}},
      sshKeys: {{ssh-public-keys|json|safe}},
      validationErrors: {{validation-errors|json|safe}},
      fixedRepoRoots: {{fixed_repo_roots|default:false}},
      fixedResultsRoot: {{fixed_results_root|default:false}},
      wizardId: {{wizard-id|json|safe}},
      localPathForRemotes: {{local-path-for-remotes|json|safe}},
      isJar: {{installation-type.jar?}},
      pendingOperationId: {{pending-operation-id|json|safe}},
      state: {{state|json|safe}},
      status: {{status|json|safe}},
      availableConfigurations: {{available-configurations|json|safe}},
    }
  });
  document.getElementById('page-body').style.backgroundColor = 'var(--gray-200)';
  
  {% else %}
    function toggleSection() {
      var x = document.getElementById("other-auth-types");
      var icon = document.querySelector(
        ".other-auth-types__header .fa-chevron-down"
      );

      if (x.style.display === "none") {
        x.style.display = "block";
        icon.style.transform = "rotate(180deg)";
      } else {
        x.style.display = "none";
        icon.style.transform = "";
      }
    }
    function copyToClipboard() {
      var sshKey = document.getElementById("ssh-public-key");
      var content = sshKey.textContent.trim();
      navigator.clipboard.writeText(content);
      var popup = document.getElementById("popup-message");
      popup.style.display = "block";

      setTimeout(function () { popup.style.display = "none"; }, 3000);
    }
    codescene.views.projects.newProjectWizard.specifyRemotes.init();
  {% endif %}
</script>
{% endblock %}