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

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

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

        <section class="content-area">
            <h2>Browser Extension</h2>
            <p>The browser extension allows you to quickly add new bookmarks without leaving the page that you are on. The extension is available in the official extension stores for:</p>
            <ul>
                <li><a href="https://addons.mozilla.org/de/firefox/addon/linkding-extension/" target="_blank">Firefox</a></li>
                <li><a href="https://chrome.google.com/webstore/detail/linkding-extension/beakmhbijpdhipnjhnclmhgjlddhidpe" target="_blank">Chrome</a></li>
            </ul>
            <p>The extension is <a href="https://github.com/sissbruecker/linkding-extension" target="_blank">open source</a> as well, which enables you to build and manually load it into any browser that supports Chrome extensions.</p>
            <h2>Bookmarklet</h2>
            <p>The bookmarklet is an alternative, cross-browser way to quickly add new bookmarks without opening the linkding application
                first. Here's how it works:</p>
            <ul>
                <li>Drag the bookmarklet below into your browsers bookmark bar / toolbar</li>
                <li>Open the website that you want to bookmark</li>
                <li>Click the bookmarklet in your browsers toolbar</li>
                <li>linkding opens in a new window or tab and allows you to add a bookmark for the site</li>
                <li>After saving the bookmark the linkding window closes and you are back on your website</li>
            </ul>
            <p>Drag the following bookmarklet to your browsers toolbar:</p>
            <a href="javascript: {% include 'bookmarks/bookmarklet.js' %}"
               class="btn btn-primary">📎 Add bookmark</a>
        </section>

        <section class="content-area">
            <h2>REST API</h2>
            <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 }}" readonly>
                    </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>
            <p>If you think that a token was compromised you can revoke (delete) it in the <a href="{% url 'admin:authtoken_tokenproxy_changelist' %}">admin panel</a>. After deleting the token, a new one will be generated when you reload this settings page.</p>
        </section>
    </div>
{% endblock %}