{% extends "nexus/module.html" %}

{% load gargoyle_helpers %}
{% load url from future %}

{% block head %}
    {{ block.super }}
    <link rel="stylesheet" href="{% url 'nexus:media' 'gargoyle' 'css/gargoyle.css' %}">
    <script>
        var GARGOYLE = {
            addSwitch:    "{% url 'gargoyle:add' %}",
            updateSwitch: "{% url 'gargoyle:update' %}",
            deleteSwitch: "{% url 'gargoyle:delete' %}",
            updateStatus: "{% url 'gargoyle:status' %}",
            addCondition: "{% url 'gargoyle:add-condition' %}",
            delCondition: "{% url 'gargoyle:remove-condition' %}",

            deleteImage:  "{% url 'nexus:media' 'gargoyle' 'img/delete.png' %}",
            facebox: {
                loadingImage: "{% url 'nexus:media' 'gargoyle' 'img/facebox/loading.gif' %}",
                closeImage:   "{% url 'nexus:media' 'gargoyle' 'img/facebox/closelabel.png' %}"
            }
        };
    </script>

    <script src="{% url 'nexus:media' 'gargoyle' 'js/string_score.min.js' %}"></script>
    <script src="{% url 'nexus:media' 'gargoyle' 'js/gargoyle.js' %}"></script>
{% endblock %}

{% block content %}
    <div class="toolbar" data-sort="{{ sorted_by }}">
        <button class="button addSwitch">Add a Switch</button>

        <!--
        <span class="switchTest">
            <input type="text">
            <button class="button">Test Switch</button>
        </span>
        -->
        <span class="search">
            <input type="text" placeholder="search">
        </span>

        <ul class="sort">
            <li class="date_created">
                <a href="?by={{'date_created'|sort_by_key:sorted_by}}">Date Created</a>
            </li>
            <li class="date_modified">
                <a href="?by={{'date_modified'|sort_by_key:sorted_by}}">Date Modified</a>
            </li>
            <li class="label">
                <a href="?by={{'label'|sort_by_key:sorted_by}}">Label</a>
            </li>
        </ul>
    </div>

    <div class="noSwitches" {% if switches %}style="display:none;"{% endif %}>
        You do not have any switches yet. <a href="#" class="addSwitch">Add the first one</a>.
    </div>

    <table class="switches {% if not switches %}empty{% endif %}">
        {% for switch in switches %}
        <tr id="id_{{ switch.key }}" data-switch-key="{{ switch.key }}" data-switch-name="{{ switch.label }}" data-switch-desc="{{ switch.description }}" data-switch-status="{{ switch.status }}">
            <td class="name">
                <h4>{% if switch.label %}{{ switch.label }}{% else %}{{ switch.key|title }}{% endif %} <small class="command">({{ switch.key }})</small></h4>
                <h5>
                    {% if sorted_by|sort_field == 'date_created' %}
                        Created {{ switch.date_created|timesince }} ago
                    {% else %}
                        Last modified {{ switch.date_modified|timesince }} ago
                    {% endif %}
                </h5>
                <div class="inner">
                    {% if switch.description %}
                        <p>{{ switch.description }}</p>
                    {% endif %}

                    <div class="conditions">
                        {% for group in switch.conditions %}
                            <div class="group">
                                <label>{{ group.label }}</label>
                                {% for field, value, display, is_exclude in group.conditions %}
                                    <span data-switch="{{ group.id }}" data-field="{{ field }}" data-value="{{ value }}" class="value">
                                        <nobr>{% if is_exclude %}<strong>not</strong> {% endif %}{{ display }}
                                            <a href="#" class="delete-condition" title="Delete this condition">
                                              <img src="{% url 'nexus:media' 'gargoyle' 'img/delete.png' %}">
                                            </a>
                                        </nobr>
                                    </span>
                                {% endfor %}
                            </div>
                        {% endfor %}
                    </div>
                    <p class="addCondition"><a href="#">Add a condition</a></p>
                    <div class="conditionsForm">
                    </div>
                </div>
            </td>

            <td class="status">
                <button class="xtrasmall button {% if switch.status == 4 %}toggled{% endif %}" data-status="4">
                    Inherit
                </button>

                <button class="xtrasmall button {% if switch.status == 3 %}toggled{% endif %}" data-status="3">
                    Global
                </button>

                <button class="xtrasmall button {% if switch.status == 2 %}toggled{% endif %}" data-status="2">
                    Selective
                </button>

                <button class="xtrasmall button {% if switch.status == 1 %}toggled{% endif %}" data-status="1">
                    Disabled
                </button>
                <div class="inner">
                    <p>
                        ({{ switch.statusLabel }})
                    </p>
                </div>
            </td>

            <td class="actions">
                <button class="edit xtrasmall button"><span></span></button>
                <button class="delete xtrasmall button"><span></span></button>
            </td>
        </tr>
        {% endfor %}
    </table>
    {% raw %}
        <script type="text/x-jquery-tmpl" id="switchForm">
            {{ if add }}
            <h2>Add a Switch</h2>
            {{ else }}
            <h2>Update a Switch</h2>
            {{ /if }}

            <table class="switchForm">
                <tr>
                    <th>Name:</th>
                    <td>
                        <input name="name" type="text" value="{{ if name }}${name}{{ /if }}">
                        <p>A descriptive name for this switch.</p>
                    </td>
                </tr>

                <tr>
                    <th>Key:</th>
                    <td>
                        <input name="key" type="text" value="{{ if key }}${key}{{ /if }}">
                        <p>The key can be any valid JSON string.</p>
                    </td>
                </tr>

                <tr>
                    <th>Description:</th>
                    <td>
                        <textarea name="desc">{{ if desc }}${desc}{{ /if }}</textarea>
                        <p>A brief description on what this switch accomplishes.</p>
                    </td>
                </tr>

                <tr>
                    <td colspan="2" class="buttons">
                        <button
                            data-action="{{ if add }}add{{ else }}update{{ /if }}"
                            data-curkey="${curkey}"
                            class="submitSwitch small button">{{ if add }}Add{{ else }}Update{{ /if }}</button>
                        or <a href="#" class="closeFacebox">cancel</a>
                    </td>
                </tr>
            </table>
        </script>

        <script type="text/x-jquery-tmpl" id="switchData">
            <tr id="id_${key}" data-switch-key="${key}" data-switch-name="${label}" data-switch-desc="${description}">
                <td class="name">
                    <h4>${label} <small class="command">(${key})</small></h4>
                    <div class="inner">
                        {{if description}}
                            <p>${description}</p>
                        {{/if}}

                        <div class="conditions">
                            {{ each(i, group) conditions }}
                                <div class="group">
                                    <label>${group.label}</label>
                                    {{ each(i, item) group.conditions }}
                                        <span data-switch="${group.id}" data-field="${item[0]}" data-value="${item[1]}" class="value">
                                            <nobr>{{if item[3]}}<strong>not</strong> {{/if}}${item[2]}
                                              <a href="#" class="delete-condition" title="Delete this condition">
                                                <img src="${GARGOYLE.deleteImage}">
                                              </a>
                                            </nobr>
                                        </span>
                                    {{ /each }}
                                </div>
                            {{ /each }}
                        </div>

                        <p class="addCondition"><a href="#">Add a condition</a></p>
                        <div class="conditionsForm"></div>
                    </div>
                </td>

                <td class="status">
                    <button class="xtrasmall button {{if status == 4}}toggled{{/if}}" data-status="4">
                        Inherit
                    </button>

                    <button class="xtrasmall button {{if status == 3}}toggled{{/if}}" data-status="3">
                        Global
                    </button>

                    <button class="xtrasmall button {{if status == 2}}toggled{{/if}}" data-status="2">
                        Selective
                    </button>

                    <button class="xtrasmall button {{if status == 1}}toggled{{/if}}" data-status="1">
                        Disabled
                    </button>
                    <div class="inner">
                        <p>
                            (${statusLabel})
                        </p>
                    </div>
                </td>

                <td class="actions">
                    <button class="edit xtrasmall button"><span></span></button>
                    <button class="delete xtrasmall button"><span></span></button>
                </td>
            </tr>
        </script>
    {% endraw %}

    <script type="text/x-jquery-tmpl" id="switchConditions">
        <div class="clearfix">
            <select name="condition">
                <option></option>
                {% for id, group, field in all_conditions %}
                    {% ifchanged group %}
                        {% if not loop.first %}</optgroup>{% endif %}
                        <optgroup label="{{ group }}">
                    {% endifchanged %}

                    <option value="{{ id }},{{ field.name }}">{% if group != field.label %}{{ group }}: {% endif %}{{ field.label }}</option>
                {% endfor %}
                </optgroup>
            </select>

            {% for id, group, field in all_conditions %}
                <div class="fields" data-path="{{ id }}.{{ field.name }}" style="display:none;">
                    <form action="" method="get" data-switch="{{ id }}" data-field="{{ field.name }}">
                        {{ field|render_field }}
                        <label><input type="checkbox" name="exclude" value="1"/> Exclude</label>
                        <button type="submit" class="small button">Add</button>
                        {% if field.help_text %}
                            <div class="helptext">{{ field.help_text }}</div>
                        {% endif %}
                    </form>
                </div>
            {% endfor %}
        </div>
    </script>
{% endblock %}