{% 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 'conditions/css/conditions.scss' %}" />
    {% endcompress %}

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

{% block bodyattr %} ng-app="conditions" ng-controller="ConditionsController" {% endblock %}

{% block sidebar %}

    <h2>{% trans 'Filter conditions' %}</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>

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

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

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

    <ul class="list-unstyled">
        {% for format, text in export_formats %}
        <li >
            <a href="{% url 'conditions_export' format %}" target="_blank">
                {{ text }}
            </a>
        </li>
        {% endfor %}
    </ul>
    <ul class="list-unstyled">
        <li >
            <a href="{% url 'conditions_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 'Conditions' %}</h1>

    <div ng-repeat="condition in service.conditions" ng-cloak>

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

                    <a href="" class="fa fa-pencil"
                        title="{% trans 'Update condition' %}"
                        ng-click="service.openFormModal('conditions', condition)">
                    </a>
                    <a href="" class="fa fa-copy"
                        title="{% trans 'Copy condition' %}"
                        ng-click="service.openFormModal('conditions', condition, false, true)">
                    </a>
                    <a href="" class="fa fa-eye"
                        title="{% trans 'Show references' %}"
                        ng-click="service.openShowModal('conditions', condition)">
                    </a>
                    <a href="{$ condition.xml_url $}" class="fa fa-download"
                        title="{% trans 'Export condition as XML' %}"
                        target="blank">
                    </a>
                    <a href="" class="fa fa-trash"
                        title="{% trans 'Delete condition' %}"
                        ng-click="service.openDeleteModal('conditions', condition)">
                    </a>
                </div>
                <strong>{% trans 'Condition' %}</strong>
                <code class="code-conditions">{$ condition.uri $}</code>
            </div>

            <ul class="list-group">
                <li class="list-group-item">
                    <code>{$ condition.source_label $}</code>
                    <span>{$ condition.relation_label $}</span>
                    <span ng-show="condition.target_option_uri">
                        <code class="code-options">{$ condition.target_option_uri $}</code> ("{$ condition.target_option_text $}")
                    </span>
                    <span ng-show="condition.target_text">
                        "{$ condition.target_text $}"
                    </span>
                </li>
                <li class="list-group-item" ng-show="condition.description">
                    {$ condition.description $}
                </li>
            </ul>
        </div>
    </div>

    {% include 'conditions/conditions_modal_form_conditions.html' %}

    {% include 'conditions/conditions_modal_show_conditions.html' %}

    {% include 'conditions/conditions_modal_delete_conditions.html' %}

{% endblock %}
