{% extends 'layouts/base.html' %}
{% load i18n %}
{% load static %}

{% block content %}
  {% include 'header.html' with view_type="onboarding" %}
  <main id="main-content">
    <section>
      <div>
        <h1>{% translate 'KAT introduction' %}</h1>
        {% include 'partials/stepper.html' %}
        <h2>{% translate 'Setup scan' %}</h2>
        <h3>{% translate 'Creating an object' %}</h3>
        <p>
          {% blocktranslate trimmed %}
            Create your first object, a URL by filling out the form below. 
          {% endblocktranslate %}
        </p>
        <p>
          {% blocktranslate trimmed %}
            Additional details and examples can be found by pressing on the help 
            button next to the input field.
         {% endblocktranslate %}
        </p>
        <h3>{% translate 'Dependencies' %}</h3>
        <p>
          {% blocktranslate trimmed %}
            Most objects have dependencies on the existence of other objects.
            For example a URL needs to be connected to a network, hostname,
            fqdn (fully qualified domain name) and ip-address.
            KAT collects these additional object automatically when possible.
            By running plugins to collect or extract this data.
          {% endblocktranslate %}
        </p>
        <p>
          {% blocktranslate trimmed %}
            The additional objects that KAT created will be added to your object
            list as separate objects.
            If KAT can’t add them automatically it will guide you through
            the process of creating them manually.
         {% endblocktranslate %}
        </p>
        <form novalidate method="post" class="horizontal-view help">
          {% csrf_token %}
          {% translate type as fieldset_legend %}
          {% include 'partials/form/fieldset.html' with legend=fieldset_legend fields=form %}
          <button type="submit">{% translate 'Create object' %}</button>
        </form>
        <p>
          <a href="{% url 'skip_onboarding' %}" class="button ghost">{% translate 'Skip onboarding' %}</a>
        </p>
      </div>
    </section>
  </main>
{% endblock content %}
