<style>
    @media all and (min-width:768px) {
        .modal-dialog {
            width: 700px;
        }
    }

    .channelPanel {
        margin-top: 10px;
    }

    .channelRowContent .channel {
        border-bottom: 1px solid #cccccc;
    }

    .channelRowContent > .noBorder {
        border-bottom: 0;
    }

    .channelRow {
        padding-left: 15px;
    }

    .channelName {
        color: #0072c6;
        font-weight: normal;
        cursor: pointer;
    }

    .channelRowContent .glyphicon, .channelRowContent .glyphicons {
        margin-left: 10px;
        position: relative;
        top: 2px;
        cursor: default;
        color: #999;
        vertical-align: auto;
    }

    .channelRowContent .glyphicon-menu-up {
        cursor: pointer;
    }

    .channelRowContent .glyphicons-exclamation-sign {
        font-size: 12px;
        top: 4px;
    }


    .channelRowContent .glyphicons-pin-flag {
        -ms-transform: rotate(315deg);
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
        margin-left: 7px;
        font-size: 10px;
        top: 5px;
    }
</style>

<script type="text/ng-template" id="treeNode">
    <div class="channelRowContent">

        <div ng-click='selectChannel(channel);' class='channel' ng-class="{selected:(selectedChannel && selectedChannel.id == channel.id), noBorder:selectedChannel && selectedChannel.id == channel.id && channel.expandSelectedChannel, notvisible:!(channel.isVisibleInCurrentView || channel.childIsVisible || channel.isVisibleInContext)}">
            <span class="channelName pointer" ng-click="channel.expandSelectedChannel = !channel.expandSelectedChannel">{{::channel.name}}</span>
            <i class="glyphicon glyphicon-eye-open" ng-if="channel.isVisibleInCurrentView" title="{{'Display this channel (including all parents)' | translate}}"></i>
            <i class="glyphicons glyphicons-exclamation-sign" ng-if="channel.mandatoryPrincipals.length>0" title="{{'Mandatory' | translate}}"></i>
            <i class="glyphicons glyphicons-pin-flag" ng-if="channel.suggestedPrincipals.length>0" title="{{'Suggested' | translate}}"></i>
            <!--<i class="glyphicon glyphicon-menu-up" ng-show="selectedChannel && selectedChannel.id == channel.id && channel.expandSelectedChannel == true" ng-click="channel.expandSelectedChannel = false" title="{{'Collapse' | translate}}"></i>-->
            <!--
            <i ng-show='channel.isVisibleInCurrentView'>Begrænset visning</i>
            <i ng-show='channel.childIsVisible && limitedVisibility && !channel.isVisibleInCurrentView'> Parent </i>
            <i ng-show='!channel.isVisibleInCurrentView && channel.isVisibleInContext && channel.mandatoryPrincipals.length>0'> Mandatory </i>
            <i ng-show='!channel.isVisibleInCurrentView && channel.isVisibleInContext && channel.suggestedPrincipals.length>0'> Suggested </i>
            -->
        </div>

        <div ng-if="mode == 'editChannelSet'">
            <div class="panel panel-default panel channelPanel" ng-if="selectedChannel && selectedChannel.id == channel.id" ng-show="channel.expandSelectedChannel">

                <div class="panel-heading">{{'Properties for channel' | translate}}: <b>{{::selectedChannel.name}}</b></div>
                <div class="panel-body">

                    {{'Display this channel (including all parents)' | translate}}
                    <input type="checkbox" ng-model="selectedChannel.selectedChannelIsVisible" ng-change="setChannelVisibility();" /><br />
                    <div ng-show="false">
                        <!-- Mandatory and suggestedfor seems to be ignored in the archive. For now, we will hide them and see if its OK (jek) -->
                        <br />

                        <b>{{'Mandatory for' | translate}}:</b>
                        <div class="radio">
                            <label><input type="radio" name="mandatoryFor" ng-model="selectedChannel.mandatoryFor" ng-value="'none'" ng-change="changeMandatoryFor()">{{'None' | translate}}</label>
                        </div>
                        <div class="radio">
                            <label><input type="radio" name="mandatoryFor" ng-model="selectedChannel.mandatoryFor" ng-value="'everybody'" ng-change="changeMandatoryFor()">{{'Everybody' | translate}}</label>
                        </div>
                        <div class="radio">
                            <label><input type="radio" name="mandatoryFor" ng-model="selectedChannel.mandatoryFor" ng-value="'selected'" ng-change="changeMandatoryFor()">{{'Selected' | translate}}</label>
                        </div>
                        <div ng-repeat="principal in selectedChannel.mandatoryPrincipals" ng-show="selectedChannel.mandatoryFor == 'selected'">
                            {{(principal.category? '('+principal.category+') ':'')}}{{::principal.displayName}}<span ng-if="principal.loginName">&nbsp;&lt;{{principal.loginName}}&gt;</span> <b class="text-danger pointer" ng-click="removeMandatory(principal);">{{'Remove' | translate}}</b>
                        </div>
                        <input type="text" ng-disabled="selectedChannel.mandatoryFor != 'selected'" ng-model="mandatoryPrincipalSearchTerm" placeholder="{{'Add group or person' | translate}}" typeahead-on-select="addMandatoryPrincipal($model);"
                               typeahead="user as (user.category? '('+user.category+') ':'')+user.displayName + (user.loginName ? ' - ' + user.loginName : '') for user in searchForPrincipal($viewValue,true) | limitTo:10" typeahead-loading="loadingLocations" class="form-control" typeahead-min-length="2">
                        <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>

                        <br />

                        <b>{{'Suggested for' | translate}}:</b>
                        <div class="radio">
                            <label><input type="radio" name="suggestedFor" ng-model="selectedChannel.suggestedFor" ng-value="'none'" ng-change="changeSuggestedFor()">{{'None' | translate}}</label>
                        </div>
                        <div class="radio">
                            <label><input type="radio" name="suggestedFor" ng-model="selectedChannel.suggestedFor" ng-value="'everybody'" ng-change="changeSuggestedFor()">{{'Everybody' | translate}}</label>
                        </div>
                        <div class="radio">
                            <label><input type="radio" name="suggestedFor" ng-model="selectedChannel.suggestedFor" ng-value="'selected'" ng-change="changeSuggestedFor()">{{'Selected' | translate}}</label>
                        </div>
                        <div ng-repeat="principal in selectedChannel.suggestedPrincipals" ng-show="selectedChannel.suggestedFor == 'selected'">
                            {{(principal.category? '('+principal.category+') ':'')}}{{::principal.displayName}}<span ng-if="principal.loginName">&nbsp;&lt;{{principal.loginName}}&gt;</span> <b class="text-danger pointer" ng-click="removeSuggested(principal);">{{'Remove' | translate}}</b>
                        </div>
                        <input type="text" ng-disabled="selectedChannel.suggestedFor != 'selected'" ng-model="suggestedPrincipalSearchTerm" placeholder="{{'Add group or person' | translate}}"
                               typeahead-on-select="addSuggestedPrincipal($model);"
                               typeahead="user as (user.category? '('+user.category+') ':'')+user.displayName + (user.loginName ? ' - ' + user.loginName : '') for user in searchForPrincipal($viewValue,true) | limitTo:10" typeahead-loading="loadingsuggestedPrincipals" class="form-control" typeahead-min-length="2">
                        <i ng-show="loadingsuggestedPrincipals" class="glyphicon glyphicon-refresh"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class='channelRow' ng-repeat="channel in channel.childs" wizdom-include="'treeNode'"></div>
    </div>
</script>

<div class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>
    <h1 class="modal-title">{{'Noticeboard archive' | translate}}</h1>
</div>
<div class="modal-body">
    <div class="row">
        <div ng-show="mode != 'selectChannelSet'" class="col-sm-12">
            <ul class="nav nav-tabs">
                <li role="presentation" ng-class="{ active: isActive('editview')}"><a href="" ng-click="changeView('editview')">{{'View properties' | translate}}</a></li>
                <li role="presentation" ng-class="{ active: isActive('editChannelSet')}"><a href="" ng-click="changeView('editChannelSet')">{{'Channelset properties' | translate}}</a></li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <!-- loading -->
            <div ng-show="mode == 'loading'">
                <div class="row">
                    <div class="col-sm-12">{{'loading' | translate}}</div>
                </div>
            </div>

            <!--select channel set - first time configuration-->
            <div ng-if="mode == 'selectChannelSet'">
                <div class="row">
                    <div class="col-sm-12">
                        <div class=" tab-header-section">
                            <div class="tab-header no-margin">{{'Local or shared channel set' | translate}}</div>
                            <span>{{'Choose whether you wish to use a shared channel set or a local channel set.' | translate}}</span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">{{'Shared channelset' | translate}}</div>
                            <div class="panel-body">
                                <select ng-model="sharedChannelSet" style="width: 200px; margin-right: 10px;" ng-options="sharedChannelSet.name for sharedChannelSet in sharedChannelSets"></select>
                                <button ng-click="createNewView(sharedChannelSet.id);">{{'Apply' | translate}}</button>
                            </div>
                        </div>
                        <p ng-bind-html="::'If you choose the shared channel set, you will select one of the channel sets you have set up in Wizdom Configuration Center. If you edit a shared channel set, it will change in all Noticeboard web parts where the channel set is used.<br/><br/>Note that only administrators can change a shared channel set.' | translate"></p>
                    </div>
                    <div class="col-sm-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">{{'Local channelset' | translate}}</div>
                            <div class="panel-body">

                                <button ng-click="createNewView();">{{'Create channelset' | translate}}</button>
                            </div>
                        </div>
                        <p>{{'If you choose a local channel set, you will configure it on a specific noticeboard web part and it will therefore only apply to this specific web part.' | translate}}</p>
                    </div>
                </div>
            </div>

            <!--edit view-->
            <div ng-if="mode == 'editview'">
                <div class="row">
                    <div class="col-sm-12">
                        <form role="form">
                            <div class="property-group">
                                <label class="group-label">{{'Visibility of news items' | translate}}</label>
                                <div class="form-group">
                                    <label>{{'Items per page' | translate}}</label>
                                    <input type="number" class="form-control" ng-model="view.extendedProperties.itemsPerPage" ng-change="saveView();">
                                </div>
                                <div class="form-group">
                                    <label>{{'Max number of pages' | translate}}</label>
                                    <input type="number" class="form-control" ng-model="view.extendedProperties.maxNumberOfPages" ng-change="saveView();">
                                </div>
                                <div class="form-group">
                                    <label>{{'Comments sort by' | translate}}</label>
                                    <select class="form-control" ng-model="view.extendedProperties.commentsOrderBy" ng-change="saveView();">
                                        <option value="">{{"Date (Newest)" | translate}}</option>
                                        <option value="Oldest">{{'Date (Oldest)' | translate}}</option>
                                        <option value="MostLikes">{{'Most likes' | translate}}</option>
                                        <option value="MostReplies">{{'Most replies' | translate}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="property-group">
                                <label class="group-label">{{'Choose Templates' | translate}}</label>
                                <div class="form-group">
                                    <label>{{'Overview template' | translate}}</label>
                                    <select class="form-control" ng-options="template for template in templates" ng-model="view.extendedProperties.overviewTemplate" ng-change="saveView();"></select>
                                </div>
                                <div class="form-group">
                                    <label>{{'Show item template' | translate}}</label>
                                    <select class="form-control" ng-options="template for template in itemtemplates" ng-model="view.extendedProperties.showItemTemplate" ng-change="saveView();"></select>
                                </div>
                                <div class="form-group">
                                    <label>{{'Create and edit template (News)' | translate}}</label>
                                    <select class="form-control" ng-options="template for template in createedittemplates" ng-model="view.extendedProperties.createEditNewsTemplate" ng-change="saveView();"></select>
                                </div>
                                <div class="form-group">
                                    <label>{{'Create and edit template (Video)' | translate}}</label>
                                    <select class="form-control" ng-options="template for template in createedittemplates" ng-model="view.extendedProperties.createEditVideoTemplate" ng-change="saveView();"></select>
                                </div>
                                <div class="form-group">
                                    <label>{{'Social summary template' | translate}}</label>
                                    <select class="form-control" ng-options="template for template in socialSummaryTemplates" ng-model="view.extendedProperties.socialSummaryTemplate" ng-change="saveView();"></select>
                                </div>
                                <div class="form-group">
                                    <label>{{'Social comments template' | translate}}</label>
                                    <select class="form-control" ng-options="template for template in socialCommentsTemplates" ng-model="view.extendedProperties.socialCommentsTemplate" ng-change="saveView();"></select>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!--edit channelsset-->
            <div ng-if="mode == 'editChannelSet'">
                <div ng-controller="Wizdom365NoticeboardEditChannelSetController">
                    <div class="alert alert-warning" role="alert" ng-show="view.isSharedChannelSet && view.editableByCurrentUser">{{'This is a shared channelset. Changes might affect other views' | translate}}</div>
                    <div class="alert alert-danger" role="alert" ng-show="view.isSharedChannelSet && !view.editableByCurrentUser">{{'This is a shared channelset. Only administrators can change modify shared channelsets' | translate}}</div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class=" tab-header-section">
                                <div class="tab-header">{{'Click on a channel to change its properties' | translate}}</div>
                            </div>
                            <div ng-repeat="channel in channels" wizdom-include="::'treeNode'" class="channelRepeater"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-default wiz-btn-padding" ng-click="close();">{{'Close' | translate}}</button>
</div>
