<h2>{{vm.itemTypeName}}</h2>
<div>
    <h3>
        {{'Info' | translate}}
    </h3>
    <form >
        <div class="form-group">
            <label>{{'Name' | translate}}</label>
            <input type="text" ng-model="vm.itemType.name" wizdom365-enter="vm.itemType.id ? vm.save() : vm.create()" ng-change="vm.markAsUnsaved(vm.itemType)" placeholder="{{'Name' | translate}}" class="form-control">
        </div>

        <div>
            <div ng-show="vm.creating">{{'Creating, please wait' | translate}}</div>
            <button ng-if="!vm.itemType.id" ng-hide="vm.saving" type="button" ng-click="vm.create();" class="btn btn-primary">{{'Create' | translate}}</button>

            <button ng-if="vm.itemType.id && vm.itemType.unsaved" ng-hide="vm.saving" type="button" ng-click="vm.save();" class="btn btn-primary" default>{{'Save' | translate}}</button>
            <button ng-if="!vm.itemType.id || vm.itemType.unsaved" ng-hide="vm.saving" type="button" ng-click="vm.cancel();" class="btn btn-default">{{'Cancel' | translate}}</button>            
        </div>
    </form>
    <hr />
</div>
<div ng-if="vm.itemType.id">
    <h3>
        {{'Metadata' | translate}}
    </h3>

    <div>
        <ul class="list-group" style="position: relative;" ui-sortable="vm.sortableOption" ng-model="vm.metadata">
            <li class="list-group-item sortable-row" ng-repeat="metadata in vm.metadata">
                <div class="row">
                    <div class="col-xs-3">
                        <i class="glyphicon glyphicon-sort sortable-icon"></i>
                        {{metadata.schema.label || '[Internal name: '+ metadata.name + ']' || '[No name]'}}
                    </div>
                    <div class="col-xs-2">
                        {{metadata.schema.type}}
                    </div>
                    <div class="col-xs-2">
                        InternalName: {{metadata.internalName}}
                    </div>
                    <div class="col-xs-5">
                        <a href="" ng-click="vm.removeMetadata(metadata)" class="pull-right"><i class="glyphicon glyphicon-remove"></i> Remove</a>
                    </div>
                </div>                
            </li>
        </ul>

        <div class="btn-group" ng-if="vm.metadatalist && vm.metadatalist.length > 0">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Add existing <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li ng-repeat="metadata in vm.metadatalist">
                    <a href="#" ng-click="vm.addMetadata(metadata);">
                        {{metadata.name}} ({{metadata.schema.type}})
                        <span ng-if="metadata.schema && metadata.schema.label">
                            (label: {{metadata.schema.label}})
                        </span>
                    </a>
                </li>                
            </ul>
            &nbsp;
        </div>                
    </div>
    <hr />
</div>
<div ng-if="vm.itemType.id">
    <h3>
        {{'Event registrations' | translate}}
    </h3>
    <accordion ng-repeat="registration in vm.eventregistrations">
        <accordion-group is-open="registration.expanded" ng-class="{'panel-info': registration.unsaved}">
            <accordion-heading class="panel-heading">
                <span ng-if="registration.enabled">{{registration.name || registration.eventName}}</span>
                <i ng-if="!registration.enabled">{{'Disabled' | translate}}: {{registration.name || registration.eventName}}</i>
                <i ng-if="!registration.id && registration.unsaved">&nbsp;({{'New and unsaved' | translate}})</i>
                <i ng-if="registration.id && registration.unsaved">&nbsp;({{'Unsaved' | translate}})</i>                
                <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': registration.expanded, 'glyphicon-chevron-right': !registrationexpanded}"></i>                
            </accordion-heading>
            <form style="position: relative">
                
                <a style="position:absolute; right:0px; top: -15px" href="" ng-click="vm.showEventregistrationHistory(registration)"><i class="glyphicon glyphicon-calendar"></i> History</a>
                <div class="form-group">
                    <label>{{'Name' | translate}}</label>
                    <input type="text" ng-model="registration.name" ng-change="vm.markAsUnsaved(registration)" placeholder="{{'Name the registration by its intent' | translate}}" class="form-control">
                </div>
                <div class="form-group">
                    <label>{{'Event' | translate}}</label>
                    <select class="form-control"
                            ng-model="registration.eventName"
                            ng-change="vm.markAsUnsaved(registration)"
                            ng-options="event for event in vm.events"></select>
                    <details>
                        <summary style="cursor:pointer" ng-click="vm.getSchema(registration)">Show schema</summary>
                        <span style="position: absolute; right: 40px; margin-top: 20px; cursor: pointer;" ng-click="vm.copySchema(registration)"><i class="glyphicon glyphicon-copy"></i>&nbsp;Copy all</span>
                        <textarea id="schema{{registration.id}}" onClick="this.setSelectionRange(0, this.value.length)" ng-model="registration.schemaExample" style="width:100%; height: 500px" ng-disabled="true"></textarea>                        
                    </details>

                </div>
                <div class="form-group">
                    <label>{{'Enabled' | translate}}</label>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" ng-model="registration.enabled" ng-change="vm.markAsUnsaved(registration)" />
                            <!--{{'Enabled' | translate}}-->
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label>{{'Url to be invoked' | translate}}</label>
                    <input type="text" ng-model="registration.configuration.url" ng-change="vm.markAsUnsaved(registration)" placeholder="{{'https://'}}" class="form-control">
                </div>
            </form>
            <div>
                <button ng-if="registration.unsaved" ng-hide="vm.saving" type="button" ng-click="vm.saveEventregistration(registration);" class="btn btn-primary">{{'Save' | translate}}</button>
                <button ng-if="registration.unsaved" ng-hide="vm.saving" type="button" ng-click="vm.cancelEventregistration(registration);" class="btn btn-default">{{'Cancel' | translate}}</button>
                <button ng-if="registration.id" ng-hide="vm.saving" type="button" ng-click="vm.deleteEventregistration(registration);" class="btn btn-danger pull-right">{{'Delete' | translate}}</button>                
            </div>
        </accordion-group>
    </accordion>

    <div>
        <button style="margin-bottom: 10px;" ng-hide="vm.saving" type="button" ng-click="vm.addNewEventregistration();" class="btn btn-default">{{'Add new' | translate}}</button>
    </div>
</div>