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

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

{% block bodyattr %} ng-app="domain" ng-controller="DomainController" {% endblock %}

{% block sidebar %}

    <h2>{% trans 'Filter attributes' %}</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('attributes', null, true)">
                {% trans 'Create new attribute' %}
            </a>
        </li>
    </ul>

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

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

    <ul class="list-unstyled">
        <li >
            <a href="{% url 'domain_export' 'csvcomma' %}" target="_blank">
                {% trans 'CSV comma separated' %}
            </a>
        </li>
        <li >
            <a href="{% url 'domain_export' 'csvsemicolon' %}" target="_blank">
                {% trans 'CSV semicolon separated' %}
            </a>
        </li>
    </ul>
    <ul class="list-unstyled">
        <li>
            <a href="{% url 'domain_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 'Domain' %}</h1>

    <div ng-repeat="attribute in service.domain | orderBy: 'path'"
         ng-include src="'nested_attribute.html'">
    </div>

    <script type="text/ng-template" id="nested_attribute.html">

    <div class="panel panel-default" ng-hide="service.hideAttribute(attribute)">

        <div class="panel-body">
            <div class="pull-right">
                {% include 'domain/domain_options.html' %}
            </div>

            <strong>{% trans 'Attribute' %}</strong>

            <code>{$ attribute.uri $}</code>
        </div>

    </div>

    <div class="nested-attribute"
         ng-repeat="attribute in attribute.children | orderBy: 'path'"
         ng-include src="'nested_attribute.html'">
    </div>

    </script>

    {% include 'domain/domain_modal_form_attributes.html' %}
    {% include 'domain/domain_modal_show_attributes.html' %}

    {% include 'domain/domain_modal_delete_attributes.html' %}

{% endblock %}
