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

{% block head %}
    <base href="{% url 'catalogs' %}" />

    {% vendor 'angular' %}
    {% vendor 'moment' %}
    {% vendor 'select2' %}
    {% vendor 'select2-bootstrap-theme' %}

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

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

{% block bodyattr %} ng-app="catalogs" ng-controller="CatalogsController"{% endblock %}

{% block sidebar %}

    {% include 'questions/catalogs_sidebar.html' %}

{% endblock %}

{% block page %}

    {% get_available_languages as LANGUAGES %}

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

    <div ng-show="service.catalog.id" ng-cloak>

        <div class="panel panel-default panel-sites" ng-hide="service.hideCatalog(service.catalog)">
            <div class="panel-heading">
                <div class="pull-right">
                    <span class="fa fa-warning text-warning"
                        title="{% trans 'Some languages are not configured' %}"
                        ng-show="service.catalog.warning"></span>

                    {% include 'questions/catalogs_options_catalog.html' %}
                </div>
                <p>
                    <strong>{% trans 'Catalog' %}</strong>
                    <span>{$ service.catalog.title $}</span>
                </p>
                <p>
                    {$ service.catalog.help $}
                </p>
                <div>
                    <code class="code-questions" title="{% trans 'URI' %}">{$ service.catalog.uri $}</code>
                    <code class="code-order">{$ service.catalog.order $}</code>
                </div>
            </div>

            {% if settings.MULTISITE %}
            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-3">
                        <strong>{% trans 'Sites for this catalog' %}</strong>
                    </div>
                    <div class="col-sm-9">
                        <ul>
                            <li ng-show="service.catalog.length"
                                ng-repeat="site in service.catalog.sites">
                                {$ site.name $}
                            </li>
                            <li ng-hide="service.catalog.length">
                                {% trans 'all Sites' %}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>

        <div class="indent" ng-repeat="section in service.catalog.sections">

            <div class="panel panel-default panel-section" ng-hide="service.hideSection(section)">
                <div class="panel-heading">
                    <div class="pull-right">
                        <span class="fa fa-warning text-warning"
                            title="{% trans 'Some languages are not configured' %}"
                            ng-show="section.warning"></span>

                        {% include 'questions/catalogs_options_sections.html' %}
                    </div>
                    <p>
                        <strong>{% trans 'Section' %}</strong>
                        <span>{$ section.title $}</span>
                    </p>
                    <div>
                        <code class="code-questions" title="{% trans 'URI' %}">{$ section.uri $}</code>
                        <code class="code-order">{$ section.order $}</code>
                    </div>
                </div>
            </div>

            <div class="indent" ng-repeat="element in section.questionsets" ng-include src="'element.html'"></div>
        </div>
    </div>

    <script type="text/ng-template" id="element.html">
        {% include 'questions/catalogs_element.html' %}   
    </script>

    {% include 'questions/catalogs_modal_form_catalogs.html' %}
    {% include 'questions/catalogs_modal_form_sections.html' %}
    {% include 'questions/catalogs_modal_form_questionsets.html' %}
    {% include 'questions/catalogs_modal_form_questions.html' %}

    {% include 'questions/catalogs_modal_delete_catalogs.html' %}
    {% include 'questions/catalogs_modal_delete_sections.html' %}
    {% include 'questions/catalogs_modal_delete_questionsets.html' %}
    {% include 'questions/catalogs_modal_delete_questions.html' %}

{% endblock %}
