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

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

        {% include 'settings/nav.html' %}

        {# Profile section #}
        <section class="content-area">
            <h2>Profile</h2>
            <form action="{% url 'bookmarks:settings.general' %}" method="post" novalidate>
                {% csrf_token %}
                <div class="form-group">
                    <label for="{{ form.theme.id_for_label }}" class="form-label">Theme</label>
                    {{ form.theme|add_class:"form-select col-2 col-sm-12" }}
                </div>
                <div class="form-group">
                    <label for="{{ form.bookmark_date_display.id_for_label }}" class="form-label">Bookmark date format</label>
                    {{ form.bookmark_date_display|add_class:"form-select col-2 col-sm-12" }}
                </div>
                <div class="form-group">
                    <label for="{{ form.bookmark_link_target.id_for_label }}" class="form-label">Open bookmarks in</label>
                    {{ form.bookmark_link_target|add_class:"form-select col-2 col-sm-12" }}
                </div>
                <div class="form-group">
                    <input type="submit" value="Save" class="btn btn-primary mt-2">
                </div>
            </form>
        </section>

        {# Import section #}
        <section class="content-area">
            <h2>Import</h2>
            <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">
            <h2>Export</h2>
            <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>

        {# About section #}
        <section class="content-area">
            <h2>About</h2>
            <p>Version: {{ app_version }}</p>
            <p>
                Code: <a href="https://github.com/sissbruecker/linkding/"
                    target="_blank">GitHub</a>
            </p>
        </section>
    </div>

{% endblock %}