{% extends 'core/page.html' %}
{% load static %}
{% load compress %}
{% load i18n %}
{% load core_tags %}

{% block head %}
    {% vendor 'angular' %}
    {% vendor 'select2' %}
    {% vendor 'select2-bootstrap-theme' %}

    {% compress css %}
    <link rel="stylesheet" type="text/x-scss" href="{% static 'options/css/options.scss' %}" />
    {% endcompress %}

    {% compress js %}
    <script type="text/javascript" src="{% static 'core/js/core.js' %}" ></script>
    <script type="text/javascript" src="{% static 'options/js/options.js' %}" ></script>
    {% endcompress %}
{% endblock %}

{% block bodyattr %} ng-app="options" ng-controller="OptionsController" {% endblock %}

{% block sidebar %}

    <h2>{% trans 'Filter options' %}</h2>

    <div class="form-group">
        <div class="input-group">
            <input type="text" class="form-control" ng-model="service.filter"
                   placeholder="{% trans 'Search' %}"></input>
            <span class="input-group-btn" ng-click="service.filter = ''">
                <button class="btn btn-default">
                    <span class="fa fa-times"></span>
                </button>
            </span>
        </div>
    </div>

    <div class="form-group">
        <select class="form-control" ng-model="service.uri_prefix">
            <option value="">{% trans 'All URI prefixes' %}</option>
            <option ng-repeat="uri_prefix in service.uri_prefixes" value="{$ uri_prefix $}">
                {$ uri_prefix $}
            </option>
        </select>
    </div>

    <div class="form-group">
        <div class="checkbox">
            <label>
                <input type="checkbox" ng-model="service.showOptions">
                {% trans 'Show options' %}
            </label>
        </div>
    </div>

    <h2>{% trans 'Options' %}</h2>

    <ul class="list-unstyled">
        <li>
            <a href="" ng-click="service.openFormModal('optionsets', null, true)">
                {% trans 'Create new option set' %}
            </a>
        </li>
        <li>
            <a href="" ng-click="service.openFormModal('options', null, true)">
                {% trans 'Create new option' %}
            </a>
        </li>
    </ul>

    <h2>{% trans 'Export' %}</h2>

    <ul class="list-unstyled">
        {% for format, text in export_formats %}
        <li >
            <a href="{% url 'options_export' format %}" target="_blank">
                {{ text }}
            </a>
        </li>
        {% endfor %}
    </ul>

    <ul class="list-unstyled">
        <li >
            <a href="{% url 'options_export' 'xml' %}" target="_blank">
                {% trans 'XML' %}
            </a>
        </li>
    </ul>

    <h2>{% trans 'Import' %}</h2>
    <ul class="list-unstyled">
        <li>
            {% url 'upload' as upload_url %}
            {% include 'core/upload_form.html' with upload_url=upload_url %}
        </li>
    </ul>

{% endblock %}

{% block page %}

    <h1>{% trans 'Options' %}</h1>

    <div ng-repeat="optionset in service.optionsets" ng-cloak>

        <div class="panel panel-default" ng-hide="service.hideOptionSet(optionset)">
            <div class="panel-heading">
                <div class="pull-right">
                    <i class="fa fa-lock text-danger" ng-show="optionset.locked"></i>

                    <a href="" class="fa fa-plus"
                        title="{% trans 'Add option' %}"
                        ng-click="service.openFormModal('options', optionset, true)">
                    </a>
                    <a href="" class="fa fa-pencil"
                        title="{% trans 'Update option set' %}"
                        ng-click="service.openFormModal('optionsets', optionset)">
                    </a>
                    <a href="" class="fa fa-copy"
                        title="{% trans 'Copy option set' %}"
                        ng-click="service.openFormModal('optionsets', optionset, false, true)">
                    </a>
                    <a href="" class="fa fa-question-circle"
                        title="{% trans 'Update conditions' %}"
                        ng-click="service.openFormModal('conditions', optionset)">
                    </a>
                    <a href="" class="fa fa-eye"
                        title="{% trans 'Show references' %}"
                        ng-click="service.openShowModal('optionsets', optionset)">
                    </a>
                    <a href="{$ optionset.xml_url $}" class="fa fa-download"
                        title="{% trans 'Export option set as XML' %}"
                        target="blank">
                    </a>
                    <a href="" class="fa fa-trash"
                        title="{% trans 'Delete option set' %}"
                        ng-click="service.openDeleteModal('optionsets', optionset)">
                    </a>
                </div>
                <p>
                    <strong>{% trans 'Option set' %}</strong>
                </p>
                <div>
                    <code class="code-options" title="{% trans 'URI' %}">{$ optionset.uri $}</code>
                    <code class="code-order">{$ optionset.order $}</code>
                </div>
                <div ng-show="optionset.conditions" ng-repeat="condition in optionset.conditions">
                    <code class="code-conditions" title="{% trans 'Condition' %}">{$ condition.uri $}</code>
                </div>
            </div>

            <ul class="list-group" ng-if="optionset.provider">
                <li class="list-group-item">
                    <strong>{% trans 'Provider' %}</strong>
                    <code class="code-options-provider">{$ optionset.provider.class_name $}</code>
                    <span>{$ optionset.provider.label $}</span>
                </li>
            </ul>

            <ul class="list-group" ng-if="optionset.options && service.showOptions">
                <li class="list-group-item" ng-repeat="option in optionset.options"
                    ng-hide="service.hideOption(option)">

                    <div class="pull-right">
                        <span class="fa fa-warning text-warning"
                            title="{% trans 'Some languages are not configured' %}"
                            ng-show="option.warning"></span>

                        <i class="fa fa-lock text-muted" ng-show="optionset.locked"></i>
                        <i class="fa fa-lock text-danger" ng-show="option.locked"></i>

                        <a href="" class="fa fa-pencil"
                            title="{% trans 'Update option' %}"
                            ng-click="service.openFormModal('options', option)">
                        </a>
                        <a href="" class="fa fa-copy"
                            title="{% trans 'Copy option' %}"
                            ng-click="service.openFormModal('options', option, false, true)">
                        </a>
                        <a href="" class="fa fa-eye"
                            title="{% trans 'Show references' %}"
                            ng-click="service.openShowModal('options', option)">
                        </a>
                        <a href="{$ option.xml_url $}" class="fa fa-download"
                            title="{% trans 'Export option as XML' %}"
                            target="blank">
                        </a>
                        <a href="" class="fa fa-trash"
                            title="{% trans 'Delete option' %}"
                            ng-click="service.openDeleteModal('options', option)">
                        </a>
                    </div>
                    <p>
                        <strong>{% trans 'Option' %}</strong>
                        <span>{$ option.text $}</span>
                    </p>
                    <div>
                        <code class="code-options" title="{% trans 'URI' %}">{$ option.uri $}</code>
                        <code class="code-order">{$ option.order $}</code>
                    </div>
                </li>
            </ul>
        </div>

    </div>

    {% include 'options/options_modal_form_optionsets.html' %}
    {% include 'options/options_modal_form_options.html' %}
    {% include 'options/options_modal_form_conditions.html' %}

    {% include 'options/options_modal_show_optionsets.html' %}
    {% include 'options/options_modal_show_options.html' %}

    {% include 'options/options_modal_delete_optionsets.html' %}
    {% include 'options/options_modal_delete_options.html' %}

{% endblock %}
