<div ng-controller="PagecontactConfigurationController as vm" class="lt-module-page">

    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title">
            <h1>Email notifications</h1>
        </div>
        <div class="lt-module-page-top__actions">
            <div class="saveConfigurationButton">
                <button class="btn btn-primary"
                        ng-disabled="vm.saving"
                        ng-click="vm.save()">
                    {{vm.saving ? 'Saving' : 'Save configuration' | translate}}
                </button>
            </div>
        </div>
    </div>

    <div class="lt-module-page__content">
        <div class="container-fluid">
            <div class="wizdom-controls">
                <div class="row wizdom-controls-row noborder">
                    <div class="col-sm-12">
                        <form role="form" class="form-horizontal">
                            <div class="form-group">
                                <div class="col-xs-4">
                                    <label class="control-label">{{'Enabled' | translate}}</label>
                                </div>
                                <div class="col-xs-8">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" ng-model="vm.enabled">
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-xs-4">
                                    <label class="control-label">{{'Template' | translate}}</label>
                                </div>
                                <div class="col-xs-8">
                                    <wizdom365-template-picker template-url="vm.templateUrl"
                                                               directory-path="PageContact/Templates/ViewTemplates">
                                    </wizdom365-template-picker>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-xs-4">
                                    <label class="control-label">{{'Managed properties' | translate}}</label>
                                </div>
                                <div class="col-xs-8">

                                    <div class="input-group">
                                        <input type="text" class="form-control" ng-model="vm.newProp" />
                                        <span class="input-group-addon" style="cursor: pointer;" ng-click="vm.addProp();">{{'Add' | translate}}</span>
                                    </div>
                                    <br />

                                    <div class="panel" ng-if="vm.userProperties.length>0">
                                        <ul class="list-group lt-list" ng-model="vm.userProperties">
                                            <li class="list-group-item lt-list__item lt-flextable__table" ng-repeat="prop in vm.userProperties track by $index">
                                                <div class="lt-list-item__title lt-list-item__title lt-flextable__row">{{prop.indexOf('#')<0? prop : prop["#text"]}}</div>
                                                <div class="lt-flextable__row"></div>
                                                <div class="lt-list-item__actions lt-flextable__row">
                                                    <span class="streamline icon-bin-1" ng-click="vm.removeProp($index,vm.userProperties)" aria-hidden="true" title="{{'Remove' | translate}}"></span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>

                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-xs-4">
                                    <label class="control-label">{{'Department Taxonomy id' | translate}} ({{'if department is used as contact person' | translate}})</label>
                                </div>
                                <div class="col-xs-8">
                                    <input type="text" class="form-control" id="taxonomyid" placeholder="{{'Taxonomy id' | translate}}" ng-model="vm.taxonomyId">
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>