{% load i18n %}

    <div class="modal" id="catalogs-delete-modal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h2 class="modal-title">
                        {% trans 'Catalog' %}
                    </h2>
                </div>

                <div class="modal-body">
                    <p>
                        {% blocktrans trimmed with object='{$ service.catalog.uri $}' %}
                        You are about to permanently delete the catalog
                        <code class="text-primary">{{ object }}</code>.
                        {% endblocktrans %}
                    </p>

                    <p>
                        {% blocktrans trimmed with projects_count='{$ service.catalog.projects_count $}' %}
                        This catalog is used in <b>{{ projects_count }} projects</b>, which will not be usable afterwards.
                        {% endblocktrans %}
                    </p>

                    <div ng-show="service.values.sections.length">
                        <p>
                            {% blocktrans trimmed %}
                            <strong>Important!</strong> This will also delete the following items:
                            {% endblocktrans %}
                        </p>

                        <ul class="list-unstyled">
                            <li ng-repeat="section in service.values.sections">
                                <strong>{% trans 'Section' %}</strong>
                                <code class="text-primary">{$ section.uri $}</code>
                                <ul class="list-unstyled">
                                    <li ng-repeat="questionset in section.questionsets">
                                        <strong>
                                            {% trans 'Question set' %}
                                        </strong>
                                        <code class="text-primary">{$ questionset.uri $}</code>
                                        <ul class="list-unstyled">
                                            <li ng-repeat="question in questionset.questions">
                                                <strong>Question</strong>
                                                <code class="text-primary">{$ question.uri $}</code>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>

                    <p class="text-danger">
                        {% trans 'This action cannot be undone!' %}
                    </p>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        {% trans 'Close' %}
                    </button>
                    <button type="button" class="btn btn-danger"
                            ng-click="service.submitDeleteModal('catalogs')">
                        {% trans 'Delete' %}
                    </button>
                </div>
            </div>
        </div>
    </div>
