{% extends "base.html" %}

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

{% block breadcrumbs %}
    <div class="breadcrumbs">
        <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
        {% if title %} &rsaquo; {{ title }}{% endif %}
    </div>
{% endblock %}

{% block extra_head %}
    <link rel="stylesheet" href="{% static 'add.css' %}" />
{% endblock %}

{% block body %}
    <div style="max-width: 550px; margin: auto; float: none">
        <br/><br/>
        {% if stdout %}
            <h1>Add new URLs to your archive: results</h1>
            <pre id="stdout">
                {{ stdout | safe }}
                <br/><br/>
            </pre>
            <br/>
            <center>
                <a href="/add" id="submit">&nbsp; Add more URLs ➕</a>
            </center>
        {% else %}
            <form id="add-form" method="POST" class="p-form">{% csrf_token %}
                <h1>Add new URLs to your archive</h1>
                <br/>
                {{ form.as_p }}
                <center>
                    <button role="submit" id="submit">&nbsp; Add URLs and archive ➕</button>
                </center>
            </form>
            <br/><br/><br/>
            <center id="delay-warning" style="display: none">
                <b><i>This page will be unresponsive until the process is completely finished.</i></b>
                <br/><br/>
                <div>
                    Warning: it may take several minutes to finish adding!<br/>
                    <br/>
                    Progress will be displayed in the <code>archivebox server</code> stdout,<br/>
                    and on this page once the archiving process completes.<br/>
                    <br/>
                    <small>(it's safe to leave this page, adding will continue in the background)</small>
                </div>
            </center>
            <script>
                document.getElementById('add-form').addEventListener('submit', function(event) {
                    setTimeout(function() {
                        document.getElementById('add-form').innerHTML = '<center><h3>Adding URLs to index and running archive methods...<h3><br/><div class="loader"></div><br/>(see terminal for progress)</center>'
                        document.getElementById('delay-warning').style.display = 'block'
                    }, 200)
                    return true
                })
            </script>
        {% endif %}
    </div>
{% endblock %}

{% block sidebar %}{% endblock %}