<div class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>
    <h1 class="modal-title">{{'Filter archive' | translate}}</h1>
</div>
<div class="modal-body">
    <div class="container-fluid">
        <div ng-show="mode == 'loading'" class="container-fluid">
            <div class="row">
                <div class="col-sm-12">{{'loading' | translate}}</div>
            </div>
        </div>

        <div ng-show="mode == 'nodata'">
            <div class="alert alert-warning" role="alert">{{'You do not have any assigned channels' | translate}}</div>
        </div>

        <div ng-show="mode == 'loadComplete'">
            <tabset>
                <tab heading="{{'Channels' | translate}}">
                    <br />
                    <span data-wizdom365-noticeboard-channel-tree data-channel-list="channelList" data-selected-channels="filters.channels"></span>
                </tab>
                <tab heading="{{'Authors' | translate}}">
                    <br />
                    <div class="panel-body">
                        <ul class="list-group">
                            <li class="list-group-item" ng-repeat="p in filters.authors">
                                {{(p.category? '('+p.category+') ':'')}}{{::p.displayName }}<span ng-if="p.loginName">&nbsp;&lt;{{p.loginName}}&gt;</span>
                                <button type="button" class="close" ng-click="removePrincipal(p)"><span aria-hidden="true" style="float: right">&times;</span></button>
                            </li>
                        </ul>
                        <input type="text" ng-model="filters.peopleSearch" placeholder="{{'Add person' | translate}}" typeahead-on-select="addPrincipal($model);"
                               typeahead="user as (user.category? '('+user.category+') ':'')+user.displayName + (user.loginName ? ' - ' + user.loginName : '') for user in searchForPrincipal($viewValue,true) | limitTo:5" typeahead-loading="loadingpeople" class="form-control" typeahead-min-length="2" typeahead-template-url="customTemplate.html" typeahead-wait-ms="300">
                        <i ng-show="loadingpeople" class="glyphicon glyphicon-refresh"></i>
                        <script type="text/ng-template" id="customTemplate.html">
                            <table style="cursor: pointer; margin:0 10px;" cellpadding="5">
                                <tr>
                                    <td style="min-width:36px;">
                                        <span class="presence text-muted"
                                              wizdom365-presence-picture
                                              size="SMALLROUNDED"
                                              accountname="match.model.loginName"
                                              name="match.model.principalID">
                                        </span>
                                    </td>
                                    <td style="padding-left:10px;">
                                        <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
                                    </td>
                                </tr>
                            </table>
                        </script>
                    </div>
                </tab>
                <tab heading="{{'Date' | translate}}">
                    <div class="row">
                        <br />
                        <div class="form-group col-md-6">
                            <label>{{'From date' | translate}}</label>
                            <div wizdom365-datetime-picker="" disable-previously-dates="false" date="filters.startdate" disable-weekends="false" show-date-picker="true"></div>
                        </div>

                        <div class="form-group col-md-6">
                            <label for="endDate">{{'To date' | translate}}</label>
                            <div wizdom365-datetime-picker="" min-date="enddateMinDate" disable-previously-dates="false" date="filters.enddate" disable-weekends="false" show-date-picker="true"></div>
                        </div>
                    </div>
                </tab>
            </tabset>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default wiz-btn-padding pull-right" ng-click="cancel()">{{'Close' | translate}}</button>
</div>

