{% extends "cacsremoteservice/views/layouts/project-view.html" %}

{% block scripts %}
<script>
  {% if feature-flags.project-creation-redesign %}
  codescene.views.projects.newProjectWizard.repositories.init({
    mountPoint: document.getElementById('page-body'),
    viewContext: '{{view-context}}',
    remoteGitUrl: '{{remote-git-url}}',
    localGitUrl: '{{local-git-url}}'
  });
  document.getElementById('page-body').style.backgroundColor = 'var(--gray-200)';
  {% endif %}
</script>
{% endblock scripts %}

{% block main %}
<div class="project-wizard-view select-source" id="page-body">
  <div class="title-area">
    <h1>New Project</h1>
    <span class="help-block">
      Start by providing access to the Git repositories you want to analyze. You can either specify Git remotes, scan a
      server directory for repositories or clone an existing project.
    </span>
  </div>
  <div class="project-creation-sections-wrapper">
    <section>
      <h2>Clone and analyse Git Repositories</h2>
      <div class="project-creation-wrapper">
        <div class="project-creation-item">
          <div class="left">
            <div class="icon icon-globe"></div>
          </div>
          <div class="right">
            <h5 class="title">Clone remote Git repositories</h5>
            <div class="help-block">
              Using this option, CodeScene will pull the latest change from your Git remotes during each analysis. You
              can specify any number of repositories in a CodeScene project.
            </div>
            <a href="{{view-context}}/projects/new/specify-remotes" class="item-button default-button">
              Specify Git Remotes
            </a>
          </div>
        </div>
      </div>
    </section>

    <section>
      <h2>Analyse local Git repositories on your hard drive</h2>
      <div class="project-creation-wrapper">
        <div class="project-creation-item">
          <div class="left">
            <div class="icon icon-search"></div>
          </div>
          <div class="right">
            <h5 class="title">Scan a local directory for Git repositories</h5>
            <div class="help-block">
              This option is typically used when evaluating CodeScene locally on a laptop. <strong>Note:</strong> the Git repositories
              you want to analyse have to be on the same machine/server as the CodeScene application. 
              {% if installation-type.docker? %} <strong>When running in Docker, the path is local to the container.</strong> {% endif %}
            </div>
            <a href="{{view-context}}/projects/new/scan-directory" class="item-button default-button secondary">
              Scan Directory
            </a>
          </div>
        </div>
      </div>
    </section>

    <section>
      <h2>Reuse an existing CodeScene project configuration</h2>
      <div class="project-creation-wrapper">
        <div class="project-creation-item">
          <div class="left">
            <div class="icon icon-download"></div>
          </div>
          <div class="right">
            <h5 class="title">Import a project configuration</h5>
            <div class="help-block">
              Import a previously exported CodeScene project configuration from file.
            </div>
            <a href="{{view-context}}/projects/new/import-configuration" class="item-button default-button secondary">
              Import Configuration
            </a>
          </div>
        </div>

        <div class="project-creation-item">
          <div class="left">
            <div class="icon icon-copy"></div>
          </div>
          <div class="right">
            <h5 class="title">Clone an existing project</h5>
            <div class="help-block">
              Clone an existing CodeScene project configuration. Useful for analysing a project with different
              meters.
            </div>
            <a href="{{view-context}}/projects/new/clone-existing" class="item-button default-button secondary">
              Clone a project
            </a>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>
{% endblock %}