<div class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>
    <h1 class="modal-title">{{'Choose channels' | translate}}</h1>
</div>
<div class="modal-body">
    <div class="container-fluid">

        <wizdom365-spinner style="position: absolute; top: 50%; left: 50%;" loading="loading"></wizdom365-spinner>

        <div ng-show="!loading">
            <div class="alert alert-warning" role="alert"
                 ng-if="availableChannels.length == 0">{{'You do not have any assigned channels' | translate}}</div>

            <div ng-show="channelsTree.length > 0">
                <ul class="channel-tree">
                    <li ng-repeat="channel in channelsTree" wizdom-include="::'channelTree'"></li>
                </ul>
            </div>

            <script type="text/ng-template" id="channelTree">
                <div ng-show="::channel.visible" class="channelItem">
                    <!--<span class="pointer" ng-class="channel.folderClass" ng-click="toggleChildren(channel)"></span>-->
                    <input type="checkbox" ng-click="updateSelectedChannel(channel)"
                           ng-model="channel.item.isPersonalSelectedForCurrentUser"
                           ng-disabled="!channel.enabled || channel.item.isMandatoryForCurrentUser"
                           ng-checked="channel.item.isMandatoryForCurrentUser || channel.item.isSuggestedForCurrentUser || channel.item.isPersonalSelectedForCurrentUser" />
                    <span class="channelItem-common">
                        <span class="pointer" ng-class="channel.folderClass" ng-click="toggleChildren(channel)"></span>
                        <span class="item-text" ng-click="selectChannel(channel)" style="cursor:pointer">{{channel.name}} </span>
                        <a style="cursor:pointer" ng-show="channel.childs.length > 0" ng-click="selectParentChannel(channel, null)">{{(channel.expandAll ? 'None' : 'All') | translate}}</a>
                    </span>
                    <hr />
                </div>
                <ul ng-if="channel.childs && channel.childrenVisible" style="list-style:none;padding-left:32px;">
                    <li ng-repeat="channel in channel.childs" wizdom-include="::'channelTree'"></li>
                </ul>
            </script>
        </div>

    </div>
</div>
<div class="modal-footer">
    <div class="text-right">
        <button type="button" class="btn btn-primary wiz-btn-padding" ng-click="save()">{{'Save' | translate}}</button>
        <button type="button" class="btn btn-default wiz-btn-padding" ng-click="cancel()">{{'Cancel' | translate}}</button>
    </div>
</div>

