{% extends "bookmarks/layout.html" %}

{% block content %}
    <div class="settings-page">

        {# Import section #}
        <section class="content-area">
            <div class="content-area-header">
                <h2>Import</h2>
            </div>
            <p>Import bookmarks and tags in the Netscape HTML format. This will execute a sync where new bookmarks are
                added and existing ones are updated.</p>
            <form method="post" enctype="multipart/form-data" action="{% url 'bookmarks:settings.import' %}">
                {% csrf_token %}
                <div class="form-group">
                    <div class="input-group col-8 col-md-12">
                        <input class="form-input" type="file" name="import_file">
                        <input type="submit" class="input-group-btn col-2 btn btn-primary" value="Upload">
                    </div>
                    {% if import_success_message %}
                        <div class="has-success">
                            <p class="form-input-hint">
                                {{ import_success_message }}
                            </p>
                        </div>
                    {% endif %}
                    {% if import_errors_message %}
                        <div class="has-error">
                            <p class="form-input-hint">
                                {{ import_errors_message }}
                            </p>
                        </div>
                    {% endif %}
                </div>
            </form>
        </section>

        {# Export section #}
        <section class="content-area">
            <div class="content-area-header">
                <h2>Export</h2>
            </div>
            <p>Export all bookmarks in Netscape HTML format.</p>
            <a class="btn btn-primary" href="{% url 'bookmarks:settings.export' %}">Download (.html)</a>
            {% if export_error %}
                <div class="has-error">
                    <p class="form-input-hint">
                        {{ export_error }}
                    </p>
                </div>
            {% endif %}
        </section>

        {# API token section #}
        <section class="content-area">
            <div class="content-area-header">
                <h2>API Token</h2>
            </div>
            <p>The following token can be used to authenticate 3rd-party applications against the REST API:</p>
            <div class="form-group">
                <div class="columns">
                    <div class="column col-6 col-md-12">
                        <input class="form-input" value="{{ api_token }}" disabled>
                    </div>
                </div>
            </div>
            <p><strong>Please treat this token as you would any other credential.</strong> Any party with access to this token can access and manage all your bookmarks.</p>
        </section>

    </div>

{% endblock %}