<div id="NoticeboardTagsAdminPage" ng-controller="Wizdom365NoticeboardIntegrationsController" class="lt-module-page">

    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title">
            <h1>Integrations</h1>
        </div>
        <div class="lt-module-page-top__actions">
            <div class="saveConfigurationButton">
                <button class="btn btn-primary"
                        ng-disabled="working"
                        ng-click="save()">
                    {{'Save configuration' | translate}}
                </button>
            </div>
        </div>
    </div>

    <div class="lt-module-page__content-accordion">
        <accordion>
            <accordion-group is-open="integrations.reach.panelExpanded">
                <accordion-heading class="panel-title">
                    <a>{{'Reach Mobile App' | translate}}</a>
                    <i class="pull-right streamline" ng-class="{'icon-arrow-down-1': integrations.reach.panelExpanded, 'icon-arrow-right-1': !integrations.reach.panelExpanded}"></i>
                </accordion-heading>
                <form role="form" class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-4">
                            <label class="control-label">{{'Enable' | translate}}</label>
                        </div>
                        <div class="col-sm-8">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" ng-model="settings.ReachMobileApp.enabled" class="lt-checkbox" />
                                </label>
                            </div>
                        </div>
                        <wizdom365-spinner loading="working"></wizdom365-spinner>
                    </div>
                    <div ng-show="settings.ReachMobileApp.enabled">
                        <div class="form-group">
                            <div class="col-sm-4">
                                <label class="control-label controls-textbox">{{'Page URL' | translate}}</label>
                            </div>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" ng-model="settings.ReachMobileApp.displayURL" placeholder="{{'Page that will display Noticeboard posts' | translate}}" />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-4">
                                <label class="control-label controls-textbox">{{'Noticeboard WebPart View ID' | translate}}</label>
                            </div>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" ng-model="settings.ReachMobileApp.reachSubscriptionSyncViewId" placeholder="{{'Sync User Subscribed Channels with Reach' | translate}}" />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <div ng-show="integrations.reach.connection" class="alert" ng-class="{'alert-success': integrations.reach.connection.success === true, 'alert-danger': integrations.reach.connection.success === false}">
                                    {{integrations.reach.connection.message}}
                                </div>
                            </div>
                        </div>
                        <div class="form-group" ng-show="integrations.reach.reachChannels.length >= 1">
                            <div class="col-sm-12">
                                <h2>{{'Map Noticeboard Channels to Reach' | translate}}</h2>
                                <hr />
                            </div>
                            <div class="col-sm-6">
                                <h4 class="col-title">Noticeboard Channel</h4>
                            </div>
                            <div class="col-sm-5">
                                <h4 class="col-title text-right">Reach Channel -> Group</h4>
                            </div>
                            <div class="col-sm-1"></div>
                            <div class="col-sm-12">
                                <hr />
                                <ul class="list-group lt-tree" ng-repeat="channel in data" wizdom-include="'channelTree'"></ul>
                            </div>
                        </div>
                    </div>
                </form>
            </accordion-group>
        </accordion>
    </div>

</div>

<script type="text/ng-template" id="channelTree">
    <li class="list-group-item lt-tree__item">
        <div class="lt-tree-item__title">
            <span ng-if="false" ng-class="{'glyphicon glyphicon-folder-open':channel.canContainItems,'glyphicon glyphicon-folder-close':!channel.canContainItems}" aria-hidden="true"></span>
            <span ng-class="{'strong':isChannelMapped(channel)}">{{::channel.name}}</span>
        </div>
        <div class="lt-tree-item__actions">
            <span class="badge ng-binding view-templates-badge-system" ng-show="isChannelMapped(channel)" ng-click="mapChannel(channel)">{{getReachMapping(channel.id).channel.name}} -> {{getReachMapping(channel.id).group.name}}</span>
            <span class="streamline icon-pencil-1" aria-hidden="true" title="{{'Map Channel' | translate}}" ng-click="mapChannel(channel)"></span>
            <span class="streamline icon-bin-1" ng-class="{'inactive':!isChannelMapped(channel)}" aria-hidden="true" title="{{'Delete Mapping' | translate}}" ng-click="toggleChannelEnabledMapping(channel)"></span>
        </div>
    </li>
    <ul ng-if="channel.childs" class="list-group lt-tree lt-tree__child" ng-repeat="channel in channel.childs" wizdom-include="::'channelTree'"></ul>
</script>