<!--
  ~ 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 layout="row" flex="100" layout-align="center center" class="wizard-row" style="margin-bottom:5%;">
    <div layout="column" flex="33" layout-align="center center">
        <md-button ng-class="ctrl.getEpaActiveTabCss('basics')" aria-label="Basics" ng-click="ctrl.selectEpaTab('basics')">1
        </md-button>
        Basics
    </div>
    <div layout="column" flex="33" layout-align="center center">
        <md-button ng-class="ctrl.getEpaActiveTabCss('streams')" aria-label="Streams" ng-click="ctrl.selectEpaTab('streams')">2
        </md-button>
        Stream Requirements
    </div>
    <div layout="column" flex="33" layout-align="center center">
        <md-button ng-class="ctrl.getEpaActiveTabCss('staticProperties')" aria-label="Streams"
                   ng-click="ctrl.selectEpaTab('staticProperties')">3
        </md-button>
        Static Properties
    </div>
    <div layout="column" flex="33" layout-align="center center">
        <md-button ng-class="ctrl.getEpaActiveTabCss('outputStrategy')" aria-label="Deployment"
                   ng-click="ctrl.selectEpaTab('outputStrategy')">4
        </md-button>
        Output Strategy
    </div>
    <div layout="column" flex="33" layout-align="center center">
        <md-button ng-class="ctrl.getEpaActiveTabCss('supportedGrounding')" aria-label="Deployment"
                   ng-click="ctrl.selectEpaTab('supportedGrounding')">5
        </md-button>
        Supported Grounding
    </div>
    <div layout="column" flex="33" layout-align="center center">
        <md-button ng-class="ctrl.getEpaActiveTabCss('deployment')" aria-label="Deployment"
                   ng-click="ctrl.selectEpaTab('deployment')">6
        </md-button>
        Deployment
    </div>
</div>

<div flex="100" class="md-whiteframe-z1">
    <collapsible title-label="'Basics'" disabled="disabled" removable="false" collapsible="false" layout-fill
                 ng-if="ctrl.isEpaTabSelected('basics')">
        <sepa-basics element="ctrl.selectedSepa" disabled="ctrl.editingDisabled"></sepa-basics>
        Category:
        <!-- 			 <div ng-dropdown-multiselect="" options="availableEpaCategories" selected-model="selectedCategories" extra-settings="categoryOpt"></div> -->

    </collapsible>
    <collapsible title-label="'Stream Requirements'" disabled="disabled" removable="false" collapsible="false"
                 layout-fill ng-if="ctrl.isEpaTabSelected('streams')">
        <stream-restriction element="ctrl.selectedSepa.spDataStreams" disabled="ctrl.editingDisabled"></stream-restriction>
    </collapsible>
    <collapsible title-label="'Static Properties'" disabled="disabled" removable="false" collapsible="false" layout-fill
                 ng-if="ctrl.isEpaTabSelected('staticProperties')">
        <static-properties element="sctrl.electedSepa.staticProperties" streams="ctrl.selectedSepa.spDataStreams"
                           disabled="ctrl.editingDisabled"></static-properties>
    </collapsible>
    <collapsible title-label="'Output Strategy'" disabled="disabled" removable="false" collapsible="false" layout-fill
                 ng-if="ctrl.isEpaTabSelected('outputStrategy')">
        <output-strategy strategies="ctrl.selectedSepa.outputStrategies" disabled="ctrl.editingDisabled"></output-strategy>
    </collapsible>
    <collapsible title-label="'Supported Grounding'" disabled="disabled" removable="false" collapsible="false"
                 layout-fill ng-if="ctrl.isEpaTabSelected('supportedGrounding')">
        <supported-grounding grounding="ctrl.selectedSepa.supportedGrounding"
                             disabled="ctrl.editingDisabled"></supported-grounding>
    </collapsible>
    <collapsible title-label="'Deployment'" disabled="disabled" removable="false" collapsible="false" layout-fill
                 ng-if="ctrl.isEpaTabSelected('deployment')">
        <deployment element="ctrl.selectedSepa" deployment-settings="ctrl.deploymentSettings[0]" disabled="ctrl.disabled"
                    style="width:100%;"></deployment>
    </collapsible>
</div>