<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->

<div ng-repeat="(key, sp) in ctrl.staticProperties">
    <collapsible title-label="'Static Property ' +(key2+1) +' (' +ctrl.getType(sp) +')'" list="staticProperties" index="key"
                 disabled="ctrl.disabled" removable="!ctrl.disabled" collapsible="true" subtitle="true"
                 layout-fill>
        <required-property-values property="sp.properties" disabled="ctrl.disabled"></required-property-values>
        <div ng-if="sp.type == ctrl.staticPropertyTypes[0].type">
            <md-checkbox ng-checked="ctrl.domainPropertyRestricted(sp.properties)"
                         ng-click="ctrl.toggleDomainPropertyRestriction(sp.properties)"
                         aria-label="Domain property requirement" ng-disabled="ctrl.disabled">
                Supported domain property
            </md-checkbox>
            <div ng-show="ctrl.domainPropertyRestricted(sp.properties)">
                <md-input-container>
                    <label>Domain Property</label>
                    <select ng-model="sp.properties.type" placeholder="Select Static Property type"
                            ng-disabled="ctrl.disabled">
                        <option ng-repeat="property in ctrl.properties" value="{{property.id}}">
                            {{property.title}}
                        </option>
                    </select>
                </md-input-container>
            </div>
        </div>
        <div ng-if="sp.type == ctrl.staticPropertyTypes[1].type">
            <options element="sp.properties.options" disabled="ctrl.disabled"></options>
        </div>
        <div ng-if="sp.type == ctrl.staticPropertyTypes[2].type">
            <options element="sp.properties.options" disabled="ctrl.disabled"></options>
        </div>
        <div ng-if="sp.type == ctrl.staticPropertyTypes[3].type">
            <domain-concept-property domain-property="sp.properties" auto-complete-static-property="sp.properties"
                                     disabled="ctrl.disabled"></domain-concept-property>
        </div>
        <div ng-if="sp.type == ctrl.staticPropertyTypes[4].type">
            <md-input-container>
                <label>Event Property Mapping</label>
                <select ng-model="sp.properties.mapsFrom" placeholder="Select Static Property type"
                        ng-disabled="ctrl.disabled">
                    <option ng-selected="ctrl.isSelectedProperty(sp.properties.mapsFrom, property)"
                            ng-repeat="(firstKey, property) in streams[0].eventSchema.eventProperties"
                            value="{{property.properties.elementName}}">Stream 1 - Property {{firstKey+1}} -
                        {{property.properties.elementName}}
                    </option>
                    <option ng-selected="ctrl.isSelectedProperty(sp.properties.mapsFrom, property)"
                            ng-repeat="(secondKey, property) in streams[1].eventSchema.eventProperties"
                            value="{{property.properties.elementName}}">Stream 2 - Property {{secondKey+1}} -
                        {{property.properties.elementName}}
                    </option>
                </select>
            </md-input-container>
        </div>
        <div ng-if="sp.type == ctrl.staticPropertyTypes[5].type">
            (computed at runtime)
        </div>
        <div ng-if="sp.type == ctrl.staticPropertyTypes[6].type">
            <md-input-container>
                <h5>Member type</h5>
                <div class="row md-padding">
                    <select ng-model="sp.properties.memberType" placeholder="Select member type" ng-disabled="ctrl.disabled"
                            class="md-padding">
                        <option value="{{staticPropertyTypes[0].type}}">
                            <b>{{staticPropertyTypes[0].label}}</b>
                        </option>
                        <option value="{{staticPropertyTypes[3].type}}">
                            <b>{{staticPropertyTypes[3].label}}</b>
                        </option>
                    </select>
                    <md-button class="md-accent" ng-click="ctrl.addMember(sp.properties)" ng-disabled="ctrl.disabled">Define
                        member type
                    </md-button>
                </div>
            </md-input-container>
            <div ng-if="ctrl.memberTypeSelected || sp.properties.members.length > 0">
                <div layout="column" flex="100" class="panel-margin ontology-panel-property">
                    <div flex="100" layout="row">
                        <div flex="70" layout="row" layout-align="start center"><h4>Member</h4><br/></div>
                        <div flex="30" layout="row" layout-align="end center">
                            <md-button ng-disabled="ctrl.disabled" ng-click="ctrl.removeMember(sp.properties)"
                                       class="md-icon-button tree-node-action" style="width:24px;height:24px;">
                                <md-icon md-svg-icon="content:ic_clear_24px" aria-label="Delete Restriction"></md-icon>
                            </md-button>
                        </div>
                    </div>
                    <required-property-values property="sp.properties.members[0].properties"
                                              disabled="ctrl.disabled"></required-property-values>
                    <div ng-if="sp.properties.members[0].type == ctrl.staticPropertyTypes[0].type">

                        <md-checkbox ng-checked="ctrl.domainPropertyRestricted(sp.properties.members[0].properties)"
                                     ng-click="ctrl.toggleDomainPropertyRestriction(sp.properties.members[0].properties)"
                                     aria-label="Domain property requirement" ng-disabled="ctrl.disabled">
                            Supported domain property
                        </md-checkbox>
                        <div ng-show="ctrl.domainPropertyRestricted(sp.properties.members[0].properties)">
                            <md-input-container>
                                <label>Domain Property</label>
                                <select ng-model="sp.properties.members[0].properties.type"
                                        placeholder="Select Static Property type" ng-disabled="ctrl.disabled">
                                    <option ng-repeat="property in ctrl.properties" value="{{property.id}}">
                                        {{property.title}}
                                    </option>
                                </select>
                            </md-input-container>
                        </div>
                    </div>
                    <div ng-if="sp.properties.members[0].type == ctrl.staticPropertyTypes[3].type">
                        <domain-concept-property domain-property="sp.properties.members[0].properties"
                                                 disabled="ctrl.disabled"></domain-concept-property>
                    </div>
                </div>
            </div>
        </div>
    </collapsible>
</div>
<div layout="row">

        <select ng-model="newStaticPropertyType" placeholder="Select Static Property type" >
            <option ng-repeat="spt in ctrl.staticPropertyTypes" value="{{spt.type}}">
                <b>{{spt.label}}</b>
            </option>
        </select>
        <md-button class="md-accent" ng-click="ctrl.addStaticProperty(staticProperties, ctrl.newStaticPropertyType)"
                   ng-disabled="ctrl.disabled">Add Static Property
        </md-button>

</div>