<div ng-controller="Wizdom365WebhooksController" style="min-height:500px">
    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title">
            <h1>{{'Webhooks' | translate}}</h1>
        </div>
    </div>

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

    <div class="panel lt-module-page__content-panel">
        <ul class="list-group lt-list">
            <li class="list-group-item lt-list__item lt-flextable__table">
                <div class="lt-flextable__row lt-flextable__row-heading col1/2">{{'Event' | translate}}</div>
                <div class="lt-flextable__row lt-flextable__row-heading icon-spacer"></div>
                <div class="lt-flextable__row lt-flextable__row-heading col1/2">{{'Callback url' | translate}}</div>
                <div class="lt-flextable__row lt-flextable__row-heading col1/8 justify-content-center">{{'Enabled' | translate}}</div>
                <div class="lt-flextable__row lt-flextable__row-heading icon-spacer"></div>
            </li>

            <li class="list-group-item lt-list__item lt-flextable__table" ng-repeat="registration in registrations">
                <div class="lt-flextable__row col1/2">
                    <select class="form-control mr-0" ng-change="update(registration)" ng-model="registration.webHookEvent" ng-options="webHookEvent.name for webHookEvent in webHookEvents"></select>
                </div>
                <div class="lt-flextable__row icon-spacer">
                    <span class="streamline icon-question-circle cursor-pointer" bs-popover data-placement="right" template="helpText.html" auto-close="true" ng-click="showEventInfo(registration.webHookEvent)"></span>
                </div>
                <div class="lt-flextable__row col1/2">
                    <input type="text" class="form-control" ng-change="update(registration)" ng-model="registration.url" placeholder="{{'https://' | translate}}" />
                </div>
                <div class="lt-flextable__row col1/8 justify-content-center">
                    <input type="checkbox" ng-change="update(registration)" ng-model="registration.enabled" />
                </div>
                <div class="lt-flextable__row icon-spacer">
                    <span class="streamline icon-bin-1 cursor-pointer" ng-click="delete(registration.id)" aria-hidden="true" title="{{'Delete' | translate}}"></span>
                </div>
            </li>
        </ul>
    </div>

    <div class="lt-module-page__panel-footer">
        <button class="btn btn-primary" 
                bs-popover 
                template="addNew.html" 
                data-placement="left" 
                auto-close="true">
        {{'Add webhook' | translate}}
        </button>
    </div>

    <!--Add new template-->
    <script type="text/ng-template" id="addNew.html">
        <div class="popover">
            <div class="popover-content">
                <div class="form-group">
                    <select class="form-control" ng-model="newHook.webHookEvent" ng-options="webHookEvent.name for webHookEvent in webHookEvents" ng-init="newHook.webHookEvent = webHookEvents[0]"></select>
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" ng-model="newHook.url" placeholder="{{'https://' | translate}}" />
                </div>
                <div class="form-actions pull-right">
                    <button ng-click="$hide()" type="button" class="btn btn-default">
                        {{'Close' | translate}}
                    </button>
                    <button ng-click="add(newHook, $hide)" type="button" class="btn btn-primary">
                        {{'Ok' | translate}}
                    </button>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </script>

    <!--Help text template-->
    <script type="text/ng-template" id="helpText.html">
        <div class="popover">
            <div class="popover-content">
                <div class="form-group" style="white-space:nowrap">
                    <div ng-repeat="property in eventInfo">
                        <label class="control-label">{{property.propertyName}}</label>:
                        <label class="control-label">{{property.propertyType}}</label>
                    </div>
                </div>
                <div class="form-actions pull-right">
                    <button ng-click="$hide()" type="button" class="btn btn-primary">
                        {{'Close' | translate}}
                    </button>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </script>
</div>

