{% 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 'Report' %}</h2>
        <h3>{% translate 'Boefjes are scanning' %}</h3>
        <p>
          {% blocktranslate trimmed %}
            The enabled boefjes are collecting the data needed to generate the DNS-report. 
            This may take some time based on the type of scans and the number of objects found.
            For the current scan we expect boefjes to take about 3 minutes.
          {% endblocktranslate %}
        </p>
        <p>
          {% blocktranslate trimmed %}
            During this introduction we ask you to wait till the scan is ready. After which you can view the report.
          {% endblocktranslate %}
        </p>
        <p>
          {% blocktranslate trimmed %}
            After the onboarding, boefjes run in the background. This enables you to use KAT in the meantime without waiting for scans to finish.
            When you would like to see the status of a scan you can open the "tasks" page.
          {% endblocktranslate %}
        </p>
        {% include 'partials/cat_loader.html' %}
        <form method="post" class="inline">
          {% csrf_token %}
          <button disabled type="submit" class="button" id="js-disabled-for-10">{% translate 'Open my DNS-report' %}</button>
        </form>
      </div>
    </section>
  </main>
{% endblock content %}

{% block html_at_end_body %}
  {{ block.super }}
  <script src="{% static '/js/enableButtonTimeout.js' %}" nonce="{{ request.csp_nonce }}"></script>
{% endblock %}
