{% extends "orga/cfp/base.html" %}
{% load bootstrap4 %}
{% load i18n %}
{% load static %}

{% block content %}
    <h2>
        {% translate "Export review data" %}
    </h2>

    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" id="custom-tab" data-toggle="tab" href="#custom" role="tab" aria-controls="custom" aria-selected="true">{% translate "CSV/JSON exports" %}</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="api-tab" data-toggle="tab" href="#api" role="tab" aria-controls="api" aria-selected="false">{% translate "API" %}</a>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="custom" role="tabpanel" aria-labelledby="custom-tab">
            <p>
                {% blocktranslate trimmed %}
                    Build your own custom export here, by selecting all the data you need,
                    and the export format. CSV exports can be opened with Excel and similar
                    applications, while JSON exports are often used for integration with
                    other tools.
                {% endblocktranslate %}
            </p>
            <form method="post">
                {% csrf_token %}
                <fieldset>
                    <legend>
                        {% translate "Dataset" %}
                    </legend>
                    {% bootstrap_field form.target layout='event' %}
                </fieldset>
                <fieldset>
                    <legend>
                        {% translate "Data fields" %}
                    </legend>
                    <div class="d-flex">
                        <div class="ml-auto form-check">
                            <input type="checkbox" id="select-all" name="select-all">
                            <label for="select-all">{% translate "Select all" %}</label>
                        </div>
                    </div>
                    {% for field in form.export_fields %}
                        {% bootstrap_field field layout='event' %}
                    {% endfor %}
                </fieldset>
                <fieldset>
                    <legend>
                        {% translate "Export settings" %}
                    </legend>
                    {% bootstrap_field form.export_format layout='event' %}
                </fieldset>

                {% include "orga/includes/submit_row.html" %}
            </form>

        </div>
        <div class="tab-pane fade" id="api" role="tabpanel" aria-labelledby="api-tab">
            <p>
                {% translate "You can also use the API to export or use data." %}
            </p>

            <p>{% blocktranslate trimmed %}
                Some of the general exports are only accessible for organisers, or include
                more information when accessed with your organiser account. If you want to
                access the organiser version in automatic integrations, you’ll have to
                provide your authentication token just like in the API, like this:
            {% endblocktranslate %}</p>

            <pre> curl -H "Authorization: Token {{ request.user.auth_token.key }}" {{ request.event.api_urls.reviews.full }} </pre>

            <div class="submit-group"><span></span><span>
                <a class="btn btn-lg btn-info" href="https://docs.pretalx.org/en/latest/api/index.html">
                    <i class="fa fa-book"></i>
                    {% translate "Documentation" %}
                </a>
                <a class="btn btn-lg btn-success" href="{{ request.event.api_urls.base }}">
                    {% translate "Go to API" %}
                </a>
            </span>
            </div>
        </div>
    </div>
    <script defer src="{% static "orga/js/speaker_export.js" %}"></script>
{% endblock %}
