{% extends "core/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: 1440px; 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">
                <small>(it's safe to leave this page, adding will continue in the background)</small>
            </center>
            {% if absolute_add_path %}
            <center id="bookmarklet">
              <p>Bookmark this link to quickly add to your archive:
                <a href="javascript:void(window.open('{{ absolute_add_path }}?url='+document.location.href));">Add to ArchiveBox</a></p>
            </center>
            {% endif %}
            <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/>Check the server log or the <a href="/admin/core/archiveresult/?o=-1">Log</a> page for progress...</center>'
                        document.getElementById('delay-warning').style.display = 'block'
                    }, 200)
                    return true
                })
            </script>
        {% endif %}
    </div>
{% endblock %}

{% block footer %}{% endblock %}

{% block sidebar %}{% endblock %}