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

{% load blocktrans trans from i18n %}
{% load crispy from crispy_forms_tags %}

{% block title %}
  {% trans "Add project" %}
{% endblock title %}

{% block content %}
  {% block project_add_grid %}
    <div class="ui very padded centered stackable grid"
         {% block project_add_data_bind %}
         {% endblock project_add_data_bind %}>

      {% block project_add_header %}
        <div class="ui five wide computer four wide large screen computer only column">
          {# Placeholder for column offset #}
        </div>
        <div class="ui sixteen wide tablet eleven wide computer ten wide large screen column">
          <h1 class="ui medium header">
            <div class="content">
              {% trans "Add project" %}
              <div class="sub header">
                {% block project_add_subheader %}
                {% endblock project_add_subheader %}
              </div>
            </div>
          </h1>
        </div>
      {% endblock project_add_header %}

      {% block project_add_sidebar %}
        <div class="ui sixteen wide tablet five wide computer four wide large screen column">
          <div class="ui one column grid">
            {% block project_add_sidebar_content %}
            {% endblock project_add_sidebar_content %}

            {% block project_add_sidebar_help %}
              {# This hides the help on small view ports. It could be something better like and accordian #}
              <div class="computer only column">
                <h2 class="ui small header">{% trans "Help topics" %}</h2>
                <div class="ui list">
                  {% block project_add_sidebar_help_topics %}
                    {% include "includes/elements/link.html" with url="https://docs.readthedocs.io/page/intro/import-guide.html" text="Connecting a repository" is_external=True class="item" %}
                    {% include "includes/elements/link.html" with url="https://docs.readthedocs.io/page/tutorial/index.html" text="Read the Docs tutorial" is_external=True class="item" %}
                    {% include "includes/elements/link.html" with url="https://docs.readthedocs.io/page/examples.html" text="Example projects" is_external=True class="item" %}
                  {% endblock project_add_sidebar_help_topics %}
                </div>
              </div>
            {% endblock project_add_sidebar_help %}
          </div>
        </div>
      {% endblock project_add_sidebar %}

      {% block project_add_content %}

        <div class="ui sixteen wide tablet eleven wide computer ten wide large screen column">
          {% block project_add_content_form %}
            <form class="ui form"
                  action="{% url "projects_import_manual" %}"
                  method="post">

              {% block wizard_form %}
                {% if wizard.form.forms %}
                  {{ wizard.form.management_form }}
                  {% for form in wizard.form.forms %}
                    {% csrf_token %}
                    {{ form|crispy }}
                  {% endfor %}
                {% else %}
                  {{ wizard.form|crispy }}
                {% endif %}
              {% endblock wizard_form %}

              {% csrf_token %}
              {{ wizard.management_form }}

              {% block wizard_actions %}
                <div>
                  {% if wizard.steps.prev %}
                    <button class="ui button"
                            name="wizard_goto_step"
                            value="{{ wizard.steps.prev }}">
                      {% trans "Previous" %}
                    </button>
                  {% endif %}

                  {% if wizard.steps.next %}
                    <input class="ui button primary" type="submit" value="{% trans "Next" %}" />
                  {% endif %}

                  {% if wizard.steps.current == "config" %}
                    <div class="ui small modal" data-modal-id="i-need-help">
                      <div class="header">{% trans "Add configuration file to your project" %}</div>
                      <div class="content">
                        <p>{% trans "These are the steps you need to follow:" %}</p>
                        <ol>
                          <li>
                            {% trans "Create a <code>.readthedocs.yaml</code> file in your repository." %}
                          </li>
                          <li>
                            {% trans "Copy the contents of one of our examples to your project's <code>.readthedocs.yaml</code>." %}
                          </li>
                          <li>{% trans "Merge this change to your project's repository." %}.</li>
                        </ol>
                        <p>
                          {% trans "Once that's done Read the Docs will be able to build your project's documentation." %}
                        </p>
                      </div>
                      <div class="actions">
                        <div class="ui cancel button">{% trans "Close" %}</div>
                      </div>
                    </div>

                    <button data-bind="click: $root.show_modal('i-need-help')"
                            data-contet="{% trans "I need help" %}"
                            class="ui button">
                      {% trans "I need help" %}
                    </button>

                    <input class="ui button primary"
                           type="submit"
                           value="{% trans "This file exists" %}" />
                  {% endif %}
                </div>
              {% endblock wizard_actions %}

            </form>
          {% endblock project_add_content_form %}
        </div>
      {% endblock project_add_content %}
    </div>
  {% endblock project_add_grid %}
{% endblock content %}