{% load static %}

<!-- jQuery and Backbone -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></script>

<!-- Get JS variables from Django -->
<script type="text/javascript">
    var staticloc_icon_plus;
    var staticloc_icon_minus;
    var staticloc_icon_information;
    var condition_groups;

    $(document).ready(function (){
        'use strict'

        // Get locations of static content
        staticloc_icon_plus = "{% static "conditions/img/icon-plus.png" %}";
        staticloc_icon_minus = "{% static "conditions/img/icon-minus.png" %}";
        staticloc_icon_information = "{% static "conditions/img/icon-information.png" %}";

        // Get condition groups
        condition_groups = [
            {% for condition_group in condition_groups %}
                {
                    groupid: {{ forloop.counter }},
                    groupname: "{{ condition_group.groupname }}",
                    conditions: [
                        {% for condition in condition_group.conditions %}
                            {
                                groupid: {{ forloop.parentloop.counter }},
                                conditionid: {{ forloop.counter }},
                                condstr: "{{ condition.condstr }}",
                                key_required: {{ condition.key_required }},
                                keys_allowed: [
                                    {% for key_allowed in condition.keys_allowed %}
                                        "{{ key_allowed }}"{% if not forloop.last %},{% endif %}
                                    {% endfor %}
                                ],
                                key_example: "{{ condition.key_example }}",
                                operator_required: {{ condition.operator_required }},
                                operators: [
                                    {% for operator in condition.operators %}
                                        "{{ operator }}"{% if not forloop.last %},{% endif %}
                                    {% endfor %}
                                ],
                                operand_example: "{{ condition.operand_example }}",
                                help_text: "{{ condition.help_text }}",
                                description: "{{ condition.description }}"
                            }{% if not forloop.last %},{% endif %}
                        {% endfor %}
                    ]
                }{% if not forloop.last %},{% endif %}
            {% endfor %}
        ];
    });
</script>

<!-- Widget -->
<br /><br />
<div id="condition-json" style="float: right;">{{ textarea }}</div>
<div id="condition-selector-widget"></div>

<!-- Templates -->
<script type="text/template" id="select-list-template">
    <select>
        <% _.each(options, function(option) { %>
            <option value="<%= option.get('id') %>"><%= option.get('name') %></option>
        <% }); %>
    </select>
</script>
<script type="text/template" id="input-template">
    <input type="text" placeholder="<%= placeholder %>" />
</script>
<script type="text/template" id="condition-selector-template">
    <img id="condition-remove" src="{% static "conditions/img/icon-minus.png" %}" />
    <span id="condition-not"></span>
    <span id="condition-groups"></span>
    <span id="condstrs"></span>
    <span id="condition-key"></span>
    <span id="condition-operators"></span>
    <span id="condition-operand"></span>
    <img id="condition-information" src="{% static "conditions/img/icon-information.png" %}" />
</script>
<script type="text/template" id="condition-selector-group-template">
    <div id="condition-selector">
        <select>
            <option value="all"<% if (listtype == "all") { %> selected<% } %>>all</option>
            <option value="any"<% if (listtype == "any") { %> selected<% } %>>any</option>
        </select>
        <div id="condition-selector-group"></div>
        <img id="condition-add" style="margin-left: 10px;" src="{% static "conditions/img/icon-plus.png" %}" />
    </div>
</script>

<!-- Conditions Widget JS -->
<script type="text/javascript" src="{% static "conditions/js/conditions_widget.js" %}"></script>