<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 />
                    <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 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' | translate}}</h1>
</div>
<div class="modal-body">
    <div class="row">
        <div ng-show="mode != 'firstRun' && mode != 'loading'" 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>
                <li role="presentation" ng-class="{ active: isActive('selectChannelSet')}"><a href="" ng-click="changeView('selectChannelSet')">{{'Edit channelset' | 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>
            <!--edit view-->
            <div ng-if="mode == 'editview'">
                <div ng-controller="Wizdom365NoticeboardEditViewPropertiesController">
                    <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>{{'Default item selection' | translate}}</label>
                                        <select class="form-control" ng-model="view.extendedProperties.defaultSelection" ng-change="saveView();">
                                            <option value="Mine">{{'Show my' | translate}}</option>
                                            <option value="Unread">{{'Show unread' | translate}}</option>
                                            <option value="All">{{'Show all' | translate}}</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>{{'Items per page' | translate}}</label>
                                        <select class="form-control" ng-model="view.extendedProperties.itemsPerPage" ng-options="op as op for op in itemsPerPagePosVal" ng-change="saveView();"></select>
                                    </div>
                                    <div class="form-group">
                                        <label>{{'Max number of pages' | translate}}</label>
                                        <select class="form-control" ng-model="view.extendedProperties.maxNumberOfPages" ng-options="op as op for op in maxNumberOfPagesPosVal" ng-change="saveView();"></select>
                                    </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">Toolbar</label>
                                    <div class="form-group">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" ng-model="view.extendedProperties.hideToolbar" ng-change="saveView();">{{'Hide the toolbar' | translate}}
                                            </label>
                                        </div>
                                    </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>
                                <div class="property-group">
                                    <label class="group-label">Noticeboard Archive</label>
                                    <div class="form-group">
                                        <label>{{'Archive url' | translate}}</label>
                                        <input type="text" class="form-control" ng-model="view.extendedProperties.archiveUrl" ng-change="saveView();">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!--select channel set - first time configuration-->
            <div class="tab-channelset" ng-if="mode == 'selectChannelSet' || mode == 'firstRun'">
                <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">
                                <div class="input-group">
                                    <select ng-model="sharedChannelSet" class="form-control ddl" ng-options="sharedChannelSet.id as sharedChannelSet.name for sharedChannelSet in sharedChannelSets"></select>
                                    <span class="input-group-btn">
                                        <button class="btn" style="border:1px solid #ccc;" ng-click="createNewView(sharedChannelSet);">{{'Apply' | translate}}</button>
                                    </span>
                                </div>
                                <p class="help-text" 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>
                    </div>
                    <div class="col-sm-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">{{'Local channelset' | translate}}</div>
                            <div class="panel-body">
                                <button class="btn btn-primary" ng-click="createNewView();">{{'Create' | translate}}</button>
                                <p class="help-text">{{'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>
                </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>