{% extends "projects/import_base.html" %}

{% load static %}
{% load i18n %}

{% load crispy_forms_tags %}

{% block project_add_subheader %}
  {% trans "Create a new project from a repository" %}
{% endblock project_add_subheader %}

{% block project_add_sidebar_content %}
  <div class="ui fluid secondary pointing vertical menu" data-bind="css: {vertical: device.computer()}">
    <a class="active item" data-tab="automatic">
      <i class="fa-duotone fa-magic icon"></i>
      {% trans "Configure automatically" %}
    </a>
    <a class="item" data-tab="manual">
      <i class="fa-duotone fa-hand-sparkles icon"></i>
      {% trans "Configure manually" %}
    </a>
  </div>
{% endblock project_add_sidebar_content %}

{% block project_add_data_bind %}data-bind="using: ProjectCreateView()"{% endblock %}

{% block project_add_content_form %}
  {% block project_add_automatic_tab %}
    <div class="ui active tab" data-tab="automatic">

      {{ form_automatic | as_crispy_errors }}

      <div class="ui {% if form_automatic.is_disabled %} disabled {% endif %} basic segment">
        {% include "projects/partials/project_create_automatic.html" %}
      </div>
    </div>
  {% endblock project_add_automatic_tab %}

  {% block project_add_manual_tab %}
    <div class="ui tab" data-tab="manual">

      {{ form_manual | as_crispy_errors }}

      <div class="ui {% if form_manual.is_disabled %} disabled {% endif %} basic segment">
        <div class="ui small message">
          <div class="header">
            <i class="fa-solid fa-triangle-exclamation icon"></i>
            {% blocktrans trimmed %}
              Extra steps will be required to complete repository setup.
            {% endblocktrans %}
          </div>

          <p>
            {% blocktrans trimmed %}
              We recommend you only attempt manual configuration if you are
              familiar with your repository settings and have the necessary
              privileges to change this repository. Manual configuration will
              require several steps after your project is created in order for your
              project to build automatically.
            {% endblocktrans %}
          </p>
        </div>
        <div class="ui right aligned basic segment">
          <a class="ui basic button" href="https://docs.readthedocs.io/page/intro/import-guide.html" target="_blank">
            {% trans "Learn more" %}
          </a>
          <a class="ui primary button" href="{% url 'projects_import_manual' %}">
            {% trans "Continue" %}
          </a>
        </div>

      </div>
    </div>
  {% endblock project_add_manual_tab %}

{% endblock project_add_content_form %}