<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; }
    .channelRowContent { line-height: 25px; }
    .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 .glyphicons { font-size: 12px; }
    .channelRowContent .glyphicon-menu-up { cursor: pointer; }
    .channelRowContent .glyphicon-eye-open { top: 3px; }
    .channelRowContent .glyphicons-pin-flag { -ms-transform: rotate(315deg); -webkit-transform: rotate(315deg); transform: rotate(315deg); margin-left: 7px; }
    .channelRepeaterInfo { font-size: 20px; margin-bottom: 20px; }
</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 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">

                <div class="checkbox">
                    <label>
                        <input type="checkbox" ng-model="selectedChannel.selectedChannelIsVisible" ng-change="setChannelVisibility();" />{{'Display this channel (including all parents)' | translate}}
                    </label>
                </div>
                

                <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 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="closeEditChannelset()" aria-hidden="true">&times;</button>
    <h1 class="modal-title">{{'Edit channelset' | translate}}</h1>
</div>
<div class="modal-body">
    <form>
        <div class="container-fluid">
            <div ng-controller="Wizdom365NoticeboardEditChannelSetController">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label for="channelsetName">{{'Name' | translate}}</label>
                            <input type="text" class="form-control" id="channelsetName" placeholder="{{'Name' | translate}}" ng-model="channelset.name">
                            <span ng-show="errorName && channelset.name.length == 0" class="label label-danger">{{'This field can not be empty' | translate}}</span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="channelRepeaterInfo">{{'Click on a channel to change its properties' | translate}}</div>
                        <div ng-repeat="channel in channels" wizdom-include="'treeNode'" class="channelRepeater"></div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default wiz-btn-padding" ng-click="saveAndCloseEditChannelset()">{{'Close' | translate}}</button>
</div>





