{% load site %}
<script type="text/ng-template" id="change_space.html">
    {% verbatim %}
        <change-space
            current-space="space"
            on-space-changed-callback="moveBondsToSpace(new_space)"
            space-errors="spaceErrors"
            cs-disabled="false"
            type="bond"
            modal="true"
            close-modal="spaceModal.close()"
        >
            <p>
                The {{ selected_bonds.length }} selected bonds will be moved to the space chosen below.
            </p>
        </change-space>
    {% endverbatim %}
</script>

<div
    ng-controller="BondListCtrl"
    {% if bonds_url %}
        ng-init="init('{{ bonds_url }}')"
    {% else %}
        ng-init="init('{% url 'current:bond-list' %}')"
    {% endif %}
    ng-cloak
>
    <div class="table-controls">
        <div class="row">
            <div class="col-sm-8">
                <div class="btn-toolbar">
                    <table-options
                        page-options="page_options"
                        query="query"
                        {% if perms.bacore.view_space %}
                        space-filter="space"
                        {% endif %}
                        column-name="'bond'"
                        select-columns-function="popupSelectBondColumnsModal()"
                        default-columns="defaultBondColumns"
                    ></table-options>
                    <div class="btn-group" uib-dropdown>
                        {% if perms.bacore.change_bond %}
                            <a class="btn btn-default edit-multiple-modal-button" ng-class="{disabled: selected_bonds.length == 0}" ng-click="editMultiple()">
                                <i class="fa fa-pencil-square-o"></i> Edit selected
                            </a>
                        {% endif %}
                        {% if perms.bacore.change_bond %}
                            {% if perms.bacore.perform_bond_actions or perms.bacore.view_space %}
                                <button class="btn btn-default dropdown-toggle edit-multiple-modal-button-dropdown" ng-class="{disabled: selected_bonds.length == 0}" uib-dropdown-toggle><b class="fa fa-caret-down"></b></button>
                                <ul class="dropdown-menu">
                                    {% if perms.bacore.perform_bond_actions %}
                                    <li>
                                        <a href="#" ng-click="restartMultiple()" class="bond-restart-multiple-submit">
                                            Restart selected
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" ng-click="restorePrimaryAggMultiple()" class="bond-restore-primary-agg-multiple-submit">
                                            Restore selected to primary aggregator
                                        </a>
                                    </li>
                                    {% endif %}
                                    {% if perms.bacore.view_space %}
                                        <li>
                                            <a href="javascript:" ng-click="openMultipleSpaceChangeDialog()">
                                                Move selected bonds to space
                                            </a>
                                        </li>
                                    {% endif %}
                                </ul>
                            {% endif %}
                        {% endif %}
                    </div>
                    {% if perms.bacore.add_bond %}
                        <div class="btn-group">
                            <a href="{% url 'bond-add' %}" target="_parent" class="btn btn-default"><i class="fa fa-plus"></i> Add bond</a>
                        </div>
                    {% endif %}
                    <div class="btn-group">
                        <a ng-cloak ng-hide="global.branding.parent_support_email === ''" ng-href="mailto:{% verbatim %}{{ global.branding.parent_support_email }}{% endverbatim %}?subject={% email_prefix %}%3Cshort description of problem%3E&body=Describe the problem:%0D%0ATroubleshooting steps already taken:%0D%0AWhat date and time did the issue begin?%0D%0AWhat steps can be taken to reproduce the problem?%0D%0A" class="btn btn-default"><i class="fa fa-envelope"></i> Support</a>
                    </div>
                </div>
            </div>
            {% verbatim %}
                <div class="col-sm-4">
                    <div class="btn-toolbar">
                        <form class="form-inline">
                            <div class="input-group full-width">
                                <input class="form-control" type="search" ng-model="query.search" ng-model-options="{debounce: 300}" ng-change="onChangeSearch()" placeholder="Search"/>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-bordered table-striped table-condensed bond-table" cg-busy="{promise:promise,message:'Loading',backdrop:false,delay:300}">
                    <caption>List of bonds</caption>
                    <thead table-header sortparams="query.ordering">
                        <tr>
                            <th><input type="checkbox" id="all_bonds_selected" ng-checked="all_bonds_selected" ng-click="toggleAllBondSelect()"></th>
                            <th ng-repeat="column in selected_columns track by column.url">
                                <span ng-if="column.filter_field"><header-column name="{{column.filter_field}}">{{ column.displayName }}</header-column></span>
                                <span ng-if="!column.filter_field">{{ column.displayName }}</span>
                            </th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-show="bonds.length === 0">
                            <td colspan="{{ selected_columns.length + 2 }}">No bonds to show.</td>
                        </tr>
                        <tr bond-list-item ng-repeat="bond in bonds track by bond.url"></tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row" ng-if="data.results.length > 0">
            <div class="col-md-4"><br/><br/>{{ query_stats.first_item }}-{{ query_stats.last_item }} of {{ query_stats.total_items }}</div>
            <div class="col-md-8 text-right">
                <uib-pagination ng-model="query.page" max-size="5" total-items="data.count" items-per-page="query.page_size" ng-change="onChangePage()"></uib-pagination>
            </div>
        </div>
    {% endverbatim %}
</div>