{% extends 'base.html.j2' %}
{% set active_page = "carddav" %}

{% block content %}
<div class="container mt-3">
    <div class="row">
        <div class="col">
            <h1 class="display-6">CardDAV</h1>
            <p class="lead">
                Zodat je adRUsboek altijd dichtbij is.
            </p>
            <p>
                De gegevens van 't adRUsboek zijn via CardDAV te importeren in je favoriete contacten-applicatie. Hoe je
                dat precies configureert verschilt een beetje per applicatie. Voor een aantal veelgebruikte applicaties
                verzamelen we hieronder instructies. Ontbreekt er een applicatie of kom je er niet uit? Laat het vooral
                even weten aan Joost!
            </p>
            <p>
                In het algemeen geldt dat je de volgende gegevens kunt proberen:
            </p>
            <div class="container mb-3">
                <div class="row">
                    <div class="col-md-3 col-lg-2 text-md-end">
                        Gebruikersnaam:
                    </div>
                    <div class="col-md-9 col-lg-10">
                        <code>{{ user.username }}</code>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-lg-2 text-md-end">
                        Wachtwoord:
                    </div>
                    <div class="col-md-9 col-lg-10">
                        <code>{{ user.carddav_key }}</code>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-lg-2 text-md-end">
                        Serveradres:
                    </div>
                    <div class="col-md-9 col-lg-10">
                        <code>{{ carddav_url }}</code>
                    </div>
                </div>
            </div>
            <p>Let op! Je wachtwoord is persoonlijk, en specifiek voor CardDAV-toegang. Opnieuw genereren?
                <a href="#" data-bs-toggle="modal" data-bs-target="#cardDAVModal">Klik hier</a>.
            </p>
            {% with successes = get_flashed_messages(category_filter=["carddav"]) %}
            {% if successes %}
            {% for msg in successes %}
            <div class="alert alert-success" role="alert">
                {{ msg }}
            </div>
            {% endfor %}
            {% endif %}
            {% endwith %}
            <hr>
            <h4>Contacts.app op iOS</h4>
            Om het adRUsboek toe te voegen:
            <ol>
                <li>Ga naar <strong>Settings > Contacts > Accounts</strong>.</li>
                <li>Ga naar <strong>Accounts</strong>.</li>
                <li>Kies <strong>Add Account</strong>.</li>
                <li>Kies <strong>Other</strong>.</li>
                <li>Kies <strong>Add CardDAV account</strong>.</li>
                <li>Vul de hierboven genoemde gegevens in.</li>
                <li>Vul eventueel een <em>Description</em> in (bijvoorbeeld 'adRUsboek').</li>
                <li>Kies <strong>Next</strong>. Als je gegevens kloppen verschijnen er vinkjes.</li>
            </ol>
            Om het adRUsboek te bekijken:
            <ol>
                <li>Open de contacten-app en klik op <strong>List</strong>.</li>
                <li>Kies de lijst die overeenkomt met je gekozen <em>Description</em>.</li>
            </ol>
            <hr>
            <h4>Contacts.app op macOS</h4>
            <p><em>TODO: om voor mij onduidelijke redenen werkt het onderstaande niet :(</em></p>

            Om het adRUsboek toe te voegen:

            <ol>
                <li>Start <strong>Contacts</strong>.</li>
                <li>Ga naar <strong>Settings > Accounts</strong>.</li>
                <li>Klik op de <strong>+</strong> onderaan de lijst.</li>
                <li>Kies <strong>'Other Contacts account..'</strong> en klik op <strong>Continue</strong>.</li>
                <li>Kies bij <em>Account type</em> voor <strong>Manual</strong>.</li>
                <li>Vul de hierboven genoemde gegevens in.</li>
                <li>Klik op <strong>Sign in</strong>. Het account verschijnt nu in de lijst.</li>
            </ol>

            Om het adRUsboek te bekijken:
            <ol>
                <li>Open de contacten-app en klik op <strong>idm.hashru.nl</strong>.</li>
                <li>.. zie een lege lijst? :(</li>
            </ol>

        </div>
    </div>
</div>

{% endblock %}

{% block toplevel %}
<div class="modal fade" id="cardDAVModal" tabindex="-1" aria-labelledby="cardDAVModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="cardDAVModalLabel">Wachtwoord resetten</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Weet je zeker dat je je CardDAV-wachtwoord opnieuw wil genereren? Het oude wachtwoord wordt daarmee
                ongeldig.
            </div>
            <div class="modal-footer">
                <form method="post" action="{{ url_for('generate_carddav_password') }}">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuleren</button>
                    <button type="submit" class="btn btn-primary">Wachtwoord resetten</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}