{% load i18n %}

    <div ng-cloak>

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

	    <select class="form-control" ng-model="service.current_catalog_id" ng-change="service.initView()" by-number ng-cloak>
	        <option ng-repeat="catalog in service.catalogs | orderBy : 'title'" value="{$ catalog.id $}">{$ catalog.title $}</option>
	    </select>

        <h2>{% trans 'Filter questions' %}</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.showQuestionSets">
                    {% trans 'Show questionsets' %}
                </label>
            </div>
        </div>

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

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

        <ul class="list-unstyled">
            <li>
                <a href="" ng-click="service.openFormModal('catalogs', service.catalog)">
                    {% trans 'Update catalog details' %}
                    <i class="fa fa-lock text-danger" ng-show="service.catalog.locked"></i>
                </a>
            </li>
            <li>
                <a href="" ng-click="service.openFormModal('catalogs', service.catalog, false, true)">
                    {% trans 'Copy catalog' %}
                </a>
            </li>
            <li>
                <a href="" ng-click="service.openDeleteModal('catalogs', service.catalog)">
                    {% trans 'Delete catalog' %}
                </a>
            </li>
        </ul>

        <ul class="list-unstyled">
            <li>
                <a href="" ng-click="service.openFormModal('catalogs', null, true)">
                    {% trans 'Create new catalog' %}
                </a>
            </li>
            <li>
                <a href="" ng-click="service.openFormModal('sections', service.catalog, true)">
                    {% trans 'Create new section' %}
                </a>
            </li>
            <li>
                <a href="" ng-click="service.openFormModal('questionsets', null, true)">
                    {% trans 'Create new questionset' %}
                </a>
            </li>
            <li>
                <a href="" ng-click="service.openFormModal('questions', null, true)">
                    {% trans 'Create new question' %}
                </a>
            </li>
        </ul>

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

        <ul class="list-unstyled">
            <li>
                <form id="export-form" class="sidebar-form" method="GET" action="" target="_blank">
                    <select class="export-form-field form-control" tabindex="-1" aria-hidden="true">
                        <option value="{$ service.catalog.xml_url $}">
                            {% trans 'XML' %}
                        </option>

                        {% for format, text in export_formats %}
                        <option value="{$ service.catalog.export_urls.{{ format }} $}">
                            {{ text }}
                        </option>
                        {% endfor %}
                    </select>

                    <div class="sidebar-form-button">
                        <button type="submit" class="btn btn-primary" title="{% trans 'Export' %}">
                            <i class="fa fa-arrow-right"></i>
                        </button>
                    </div>
                </form>

                <script>
                    $(document).ready(function() {
                        $('#export-form').submit(function( event ) {
                            event.preventDefault();
                            window.open($('#export-form > select').val(), '_blank');
                        });
                    });
                </script>
            </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>

        <ul class="list-unstyled">
            <li>
                <p ng-show="service.catalog.projects_count">
                    {% blocktrans trimmed with projects_count='{$ service.catalog.projects_count $}' %}
                    This catalog is used in <b>{{ projects_count }} projects</b>.
                    {% endblocktrans %}
                </p>
            </li>
        </ul>
    </div>
