<md-dialog id="newfunction-dialog" aria-label="List dialog" layout="column" flex="70">
    <md-toolbar>
        <div class="md-toolbar-tools">
            <h2>Deploy A New Function</h2>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="closeDialog()">
            <md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
            </md-button>
        </div>
    </md-toolbar>

    <md-dialog-content class="md-padding">
            <md-tabs md-dynamic-height md-border-bottom md-selected="selectedTabIdx">
              <md-tab label="From Store" md-on-deselect="onStoreTabDeselect()" md-on-select="onTabSelect(0)">
                <md-content class="md-padding">
                  <func-store selected-func="selectedFunc" on-selected="onFuncSelected"></func-store>
                </md-content>
              </md-tab>
              <md-tab label="Custom" md-on-deselect="onCustomTabDeselect()" md-on-select="onTabSelect(1)">
                <md-content class="md-padding">
                    <div>
                        <label><i>Use this form to test a function or the <a ng-href="https://github.com/openfaas/faas-cli">faas-cli</a> for more options.</i></label>
                    </div>
                    <label>Define the function below:</label>
                    <form name="userForm">
                        <div layout-gt-xs="row">
                            <md-input-container class="md-block" flex-gt-sm>
                                <md-tooltip md-direction="bottom">Docker image name and tag to use for function i.e. functions/alpine:latest</md-tooltip>
                                <label>Docker image:</label>
                                <input name="dockerImage" ng-model="item.image" required md-maxlength="200" minlength="2">
                                <div ng-messages="userForm.dockerImage.$error">
                                    <div ng-message="required">Docker image is required.</div>
                                </div>
                            </md-input-container>
                        </div>
                        <div layout-gt-xs="row">
                            <md-input-container class="md-block" flex-gt-sm>
                                <md-tooltip md-direction="bottom">Name of the function - must be a valid DNS entry</md-tooltip>
                                <label>Function name:</label>
                                <input name="serviceName" ng-model="item.service" required md-maxlength="200" minlength="2" ng-pattern="/^[a-z0-9]([-a-z0-9]*[a-z0-9])?$/" />
                                <div ng-messages="userForm.serviceName.$error">
                                    <div ng-message="required">Function name is required.</div>
                                    <div ng-message="pattern">Function name can only contain a-z, 0-9 and dashes</div>
                                </div>
                            </md-input-container>
                        </div>
                        <div layout-gt-xs="row">
                            <md-input-container class="md-block" flex-gt-sm>
                                <md-tooltip md-direction="bottom">Process to run as your function i.e. 'env' or 'shasum'. Ignore if using OpenFaaS templates</md-tooltip>
                                <label>Function process (optional):</label>
                                <input name="envProcess" ng-model="item.envProcess" md-maxlength="200" minlength="0">
                            </md-input-container>
                        </div>
                        <div layout-gt-xs="row">
                            <md-input-container class="md-block" flex-gt-sm>
                                <md-tooltip md-direction="bottom">Docker Swarm network, not required for other providers. Default: func_functions</md-tooltip>
                                <label>Network (Swarm):</label>
                                <input name="network" ng-model="item.network" md-maxlength="200" minlength="0">
                            </md-input-container>
                        </div>
                        <div layout-gt-xs="row" ng-if="allNamespaces.length > 1">
                            <md-input-container class="md-block" flex-gt-sm>
                                <md-tooltip md-direction="bottom">Namespace your function runs in i.e. 'openfaas-fn'. Only namespaces OpenFaaS can manage will show here</md-tooltip>
                                <label>Namespace</label>
                                <md-select name="namespace" ng-model="namespaceSelect" placeholder="Select a Namespace">
                                    <md-option ng-click="fnNamespaceSelected(namespace)" ng-value="namespace" ng-repeat="namespace in allNamespaces" ng-selected="namespace === namespaceSelect">
                                        {{ namespace }}
                                    </md-option>
                                </md-select>
                            </md-input-container>
                        </div>
                        <br />
                        <div layout-gt-xs="column">
                            <div layout-gt-xs="row" ng-click="onEnvInputExpand()" stop-propagation>
                                    Environment Variables
                                    <md-icon class="expand-icon" ng-if="!envFieldsVisible" aria-label="env-expand" md-svg-src="img/icons/baseline-expand_more-24px.svg"></md-icon>
                                    <md-icon class="expand-icon" ng-if="envFieldsVisible" aria-label="env-expand" md-svg-src="img/icons/baseline-expand_less-24px.svg"></md-icon>
                            </div>
                            <div ng-if="envFieldsVisible" layout-gt-xs="column" class="repeating-inputs">
                                <div ng-repeat="envVar in envVarInputs track by $index" layout-gt-xs="row">
                                    <md-input-container class="md-block" flex-gt-sm>                                
                                        <md-tooltip md-direction="bottom">Environment variable key to be used in the function</md-tooltip>
                                        <label>Key:</label>
                                        <input name="envVarKey" ng-model="envVarInputs[$index].key" autofocus>
                                    </md-input-container>
                                    <md-input-container class="md-block" flex-gt-sm>
                                        <md-tooltip md-direction="bottom">Environment variable value to be used in the function</md-tooltip>
                                        <label>Value:</label>
                                        <input name="envVarValue" ng-model="envVarInputs[$index].value">
                                    </md-input-container>
                                    <md-icon class="add-input-icon" ng-click="addEnvVar($index)" ng-show="$last" aria-label="add-env" md-svg-src="img/icons/baseline-add_circle_outline-24px.svg"></md-icon>
                                    <md-icon class="remove-input-icon" ng-click="removeEnvVar($event,envVar)" ng-show="!$last" aria-label="remove-env" md-svg-src="img/icons/baseline-remove_circle_outline-24px.svg"></md-icon>
                                </div>
                            </div>
                        </div>
                        <br />
                        <div layout-gt-xs="column">
                            <div layout-gt-xs="row" ng-click="onSecretInputExpand()" stop-propagation>
                                    Secrets
                                    <md-icon class="expand-icon" ng-if="!secretFieldsVisible" aria-label="secret-expand" md-svg-src="img/icons/baseline-expand_more-24px.svg"></md-icon>
                                    <md-icon class="expand-icon" ng-if="secretFieldsVisible" aria-label="secret-expand" md-svg-src="img/icons/baseline-expand_less-24px.svg"></md-icon>
                            </div>
                            <div ng-if="secretFieldsVisible" layout-gt-xs="column" class="repeating-inputs">
                                <div ng-repeat="secret in secretInputs track by $index" layout-gt-xs="row">
                                    <md-input-container class="md-block" flex-gt-sm>                                
                                        <md-tooltip md-direction="bottom">Secret name to be used in the function</md-tooltip>
                                        <label>Secret Name:</label>
                                        <input name="secretField" ng-model="secretInputs[$index].name" autofocus>
                                    </md-input-container>
                                    <md-icon class="add-input-icon" ng-click="addSecret($index)" ng-show="$last" aria-label="add-secret" md-svg-src="img/icons/baseline-add_circle_outline-24px.svg"></md-icon>
                                    <md-icon class="remove-input-icon" ng-click="removeSecret($event,secret)" ng-show="!$last" aria-label="remove-secret" md-svg-src="img/icons/baseline-remove_circle_outline-24px.svg"></md-icon>
                                </div>
                            </div>
                        </div>
                        <br />
                        <div layout-gt-xs="column">
                            <div layout-gt-xs="row" ng-click="onLabelInputExpand()" stop-propagation>
                                    Labels
                                    <md-icon class="expand-icon" ng-if="!labelFieldsVisible" aria-label="label-expand" md-svg-src="img/icons/baseline-expand_more-24px.svg"></md-icon>
                                    <md-icon class="expand-icon" ng-if="labelFieldsVisible" aria-label="label-expand" md-svg-src="img/icons/baseline-expand_less-24px.svg"></md-icon>
                            </div>
                            <div ng-if="labelFieldsVisible" layout-gt-xs="column" class="repeating-inputs">
                                <div ng-repeat="label in labelInputs track by $index" layout-gt-xs="row">
                                    <md-input-container class="md-block" flex-gt-sm>                                
                                        <md-tooltip md-direction="bottom">Label key to be used on the deployed function</md-tooltip>
                                        <label>Key:</label>
                                        <input name="labelKey" ng-model="labelInputs[$index].key" autofocus>
                                    </md-input-container>
                                    <md-input-container class="md-block" flex-gt-sm>
                                        <md-tooltip md-direction="bottom">Label value to be used on the deployed function</md-tooltip>
                                        <label>Value:</label>
                                        <input name="labelValue" ng-model="labelInputs[$index].value">
                                    </md-input-container>
                                    <md-icon class="add-input-icon" ng-click="addLabel($index)" ng-show="$last" aria-label="add-label" md-svg-src="img/icons/baseline-add_circle_outline-24px.svg"></md-icon>
                                    <md-icon class="remove-input-icon" ng-click="removeLabel($event,label)" ng-show="!$last" aria-label="remove-label" md-svg-src="img/icons/baseline-remove_circle_outline-24px.svg"></md-icon>
                                </div>
                            </div>
                        </div>
                        <br />
                        <div layout-gt-xs="column">
                            <div layout-gt-xs="row" ng-click="onAnnotationInputExpand()" stop-propagation>
                                    Annotations
                                    <md-icon class="expand-icon" ng-if="!annotationFieldsVisible" aria-label="annotation-expand" md-svg-src="img/icons/baseline-expand_more-24px.svg"></md-icon>
                                    <md-icon class="expand-icon" ng-if="annotationFieldsVisible" aria-label="annotation-expand" md-svg-src="img/icons/baseline-expand_less-24px.svg"></md-icon>
                            </div>
                            <div ng-if="annotationFieldsVisible" layout-gt-xs="column" class="repeating-inputs">
                                <div ng-repeat="annotation in annotationInputs track by $index" layout-gt-xs="row">
                                    <md-input-container class="md-block" flex-gt-sm>                                
                                        <md-tooltip md-direction="bottom">Annotation key to be used on the deployed function</md-tooltip>
                                        <label>Key:</label>
                                        <input name="annotationkey" ng-model="annotationInputs[$index].key" autofocus>
                                    </md-input-container>
                                    <md-input-container class="md-block" flex-gt-sm>
                                        <md-tooltip md-direction="bottom">Annotation value to be used on the deployed function</md-tooltip>
                                        <label>Value:</label>
                                        <input name="annotationValue" ng-model="annotationInputs[$index].value">
                                    </md-input-container>
                                    <md-icon class="add-input-icon" ng-click="addAnnotation($index)" ng-show="$last" aria-label="add-annotation" md-svg-src="img/icons/baseline-add_circle_outline-24px.svg"></md-icon>
                                    <md-icon class="remove-input-icon" ng-click="removeAnnotation($event,annotation)" ng-show="!$last" aria-label="remove-annotation" md-svg-src="img/icons/baseline-remove_circle_outline-24px.svg"></md-icon>
                                </div>
                            </div>
                        </div>
                        <div class="validation-error" layout-gt-xs="row" layout-align="start end">
                            <span ng-show="validationError">{{ validationError }}</span>
                        </div>
                    </form>
                </md-content>
              </md-tab>
            </md-tabs>
    </md-dialog-content>

    <md-dialog-actions>
        <md-button ng-click="closeDialog()" class="md-secondary">
            Close Dialog
        </md-button>
        <md-button ng-disabled="userForm.$invalid" ng-click="createFunc()" class="md-primary">
            Deploy
        </md-button>
    </md-dialog-actions>
</md-dialog>
