{% extends "psynet_dashboard.html" %}

{% block scripts %}
{{ super() }}

<script>
    function exportData() {
        let anonymize = $('input[name="anonymize"]:checked').val();
        let assets = $('input[name="assets"]:checked').val();
        let type = $('input[name="type"]:checked').val();
        window.location.href = "/dashboard/export/download?anonymize=" + anonymize + "&assets=" + assets + "&type=" + type;
    }
</script>
{% endblock %}

{% block body %}
<style>
    .monospace {
        font-family: monospace;
    }
</style>
<h1>{{ title }}</h1>
{% if automatic_backups %}
<div class="alert alert-primary" role="alert">
    Automatic backups are enabled for this experiment (see <code>Experiment.artifact_storage</code>).
</div>
{% endif %}

<div id="dashboard-participant">
    <div class="row">
        <div class="col-3">
            <b>Anonymize data</b>
            <div class="form-check">
                <input type="radio" id="input-anonymize-yes" class="form-check-input" name="anonymize" value="yes">
                <label class="form-check-label" for="input-anonymize-yes">
                    Yes
                </label>
            </div>
            <div class="form-check">
                <input type="radio" id="input-anonymize-no" class="form-check-input" name="anonymize" value="no">
                <label class="form-check-label" for="input-anonymize-no">
                    No
                </label>
            </div>
            <div class="form-check">
                <input type="radio" id="input-anonymize-both" class="form-check-input" name="anonymize" value="both"
                       checked>
                <label class="form-check-label" for="input-anonymize-both">
                    Export both ways
                </label>
            </div>
        </div>
        <div class="col-3">
            <b>Assets</b>
            <div class="form-check">
                <input type="radio" id="input-assets-none" class="form-check-input" name="assets" value="none">
                <label class="form-check-label" for="input-assets-none">
                    None
                </label>
            </div>
            <div class="form-check">
                <input type="radio" id="input-assets-experiment" class="form-check-input" name="assets"
                       value="experiment"
                       checked>
                <label class="form-check-label" for="input-assets-experiment">
                    Experiment-specific assets only
                </label>
            </div>
            <div class="form-check">
                <input type="radio" id="input-assets-all" class="form-check-input" name="assets" value="all">
                <label class="form-check-label" for="input-assets-all">
                    All
                </label>
            </div>
        </div>
        <div class="col-3">
            <b>Type</b>
            <div class="form-check">
                <input type="radio" id="input-type-psynet" class="form-check-input" name="type" value="psynet" checked>
                <label class="form-check-label" for="input-type-psynet">
                    PsyNet full export
                </label>
            </div>
            <div class="form-check">
                <input type="radio" id="input-type-database" class="form-check-input" name="type"
                       value="database">
                <label class="form-check-label" for="input-type-database">
                    Database snapshot
                </label>
            </div>
        </div>
    </div>
        <button type="button" class="btn btn-primary" onclick="exportData()">Export</button>
    <div class="alert alert-info mt-3">
        If exporting via this button fails, we recommend trying instead to export via the command line, e.g.
        <ul>
            <li><span class="monospace">psynet export local</span> (for local debugging)</li>
            <li><span class="monospace">psynet export ssh --app your-app-name --server your-server-domain</span>
                (for a remote server)
            </li>
        </ul>
    </div>
</div>
{% endblock %}
{% block libs %}
{{ super() }}
{% endblock %}