{% extends "control_panel/base.html" %}
{% load i18n %}
{% load staticfiles %}
{% load include_block %}

{% block i18n_do_not_translate %}
    {% block facility_active %}active{% endblock facility_active %}
{% endblock i18n_do_not_translate %}

{% block title %}{{ zone.name }} - {% trans "Data Export" %} {{ block.super }}{% endblock title %}

{% block headjs %}{{ block.super }}
    <script>
        // Pass in zones api endpoint from context because it is only applicable on central server
        var ALL_ZONES_URL = "{{ all_zones_url }}";
        var ALL_FACILITIES_URL = "{% url 'api_dispatch_list' resource_name='facility' %}";
        var ALL_GROUPS_URL = "{% url 'api_dispatch_list' resource_name='group' %}";
        var FACILITY_USER_CSV_URL = "{% url 'api_dispatch_list' resource_name='facility_user_csv' %}";
        var TEST_LOG_CSV_URL = "{% url 'api_dispatch_list' resource_name='test_log_csv' %}";
        var ATTEMPT_LOG_CSV_URL = "{% url 'api_dispatch_list' resource_name='attempt_log_csv' %}";
        var EXERCISE_LOG_CSV_URL = "{% url 'api_dispatch_list' resource_name='exercise_log_csv' %}";
        var DEVICE_LOG_CSV_URL = "{% url 'api_dispatch_list' resource_name='device_log_csv' %}";
        var CONTENT_RATING_CSV_URL = "{% url 'api_dispatch_list' resource_name='content_rating_csv' %}"
    </script>
    <script type="text/javascript" src="{% static 'js/control_panel/bundles/bundle_data_export.js' %}"></script>

    <script>
        var module = require("data_export");
        module.$(function() {
            window.container_view = new module.DataExportView({
                el: $("#data-export-container"),
                model: new module.DataExportStateModel({
                    zone_id: "{{ zone_id }}",
                    group_id: "{{ group_id }}",
                    facility_id: "{{ facility_id }}", 
                    // b/c we hardcode in template, initialize this for state model
                    resource_id: "facility_user",  
                    is_central: {{ is_central|lower }}
                }),
                org_id: "{{ org_id }}"
            });
        });
    </script>

{% endblock headjs %}

{% block headcss %}{{ block.super }}
    <style>
        select:disabled {
            color: graytext;
        }
        label {
            text-align: right;
        }
        .float-over-select {
            position: absolute;
            z-index: 100;
            top: 8px;
            left: 50%;
        }
        .loading-transparency {
            opacity: 0.3 !important;
        }
    </style>
{% endblock headcss %}

{% block titlebar %}
        <div class="titlebar">
            <ul class="titlebar__title">
            {% block titlebar_title %}
                {% if org %}
                    <li>
                        <a href="{% url 'org_management' %}"> {{ org.name }}</a> > 
                    </li>
                {% endif %}
                {% if zone %}
                    <li>
                        <a href="{% url 'zone_management' zone_id=zone.id %}"> {{ zone.name }}</a> / 
                    </li>
                {% endif %}
                <li>
                    {% trans "Data Export" %}
                </li>
            {% endblock titlebar_title %}
            </ul>
        </div>
    {% endblock titlebar %}

{% block control_panel_content %}
<div class="row">
    <div class="col-xs-12">
        <div id="data-export-container">
            {# Backbone inserts stuff here #}
        </div>
    </div>
</div>
<!-- End container -->
{% endblock control_panel_content %}
