<!--
  ~ 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.
  ~
  -->

<md-tabs md-dynamic-height md-border-bottom md-selected="selectedSepaIndex">
    <md-tab label="Basics">
        <md-content class="md-padding">
            <sepa-basics element="selectedStream"></sepa-basics>

            <section layout="row" layout-sm="column" layout-align="end center" layout-wrap>
                <md-button class="md-raised md-accent" ng-click="ctrl.switchSepaTab(1)">Next</md-button>
            </section>
        </md-content>
    </md-tab>
    <md-tab label="Schema">
        <md-content class="md-padding">
            <div layout="row" flex="100" class="md-padding">
                <h3 class="md-display-2">Schema</h3>
                <div ng-repeat="property in ctrl.selectedStream.eventSchema.eventProperties">
                    <h4>Property {{$index+1}}</h4>
                    <md-input-container>
                        <label>Datatype</label>
                        <input ng-model="property.properties.runtimeType" required ng-disabled="{{ctrl.editingDisabled}}">
                    </md-input-container>
                    <md-input-container>
                        <label>Runtime Name</label>
                        <input ng-model="property.properties.runtimeName" required ng-disabled="{{ctrl.editingDisabled}}">
                    </md-input-container>
                    <md-input-container>
                        <label>Domain Properties</label>
                        <div ng-repeat="dp in property.properties.domainProperties">
                            <input ng-model="dp">
                        </div>
                    </md-input-container>
                    <md-divider></md-divider>
                </div>
            </div>
        </md-content>
    </md-tab>
    <md-tab label="Grounding">
        <md-content class="md-padding">
            <h3 class="md-display-2">Grounding</h3>
        </md-content>
    </md-tab>
</md-tabs>