<md-dialog aria-label="unused" style="min-width: 320px;">
    <form novalidate name="p3xrConnectionForm" ng-submit="submit()">
        <md-toolbar md-theme="{{ $root.p3xr.state.themeLayout }}" class="md-hue-3">
            <div class="md-toolbar-tools" >
                <h2 flex md-truncate>{{  $root.p3xr.state.cfg.readonlyConnections ? $root.p3xr.strings.label.connectiondView : options.type === 'new' ? $root.p3xr.strings.label.connectiondAdd : $root.p3xr.strings.label.connectiondEdit }}</h2>
                <md-button class="md-icon-button" ng-click="cancel()">
                    <md-icon>close</md-icon>
                </md-button>
            </div>
        </md-toolbar>
        <md-dialog-content md-theme="{{ $root.p3xr.state.theme }}">
                <md-content layout-padding>

                    <md-input-container class="md-block" >
                        <label>{{ $root.p3xr.strings.form.connection.label.name }}</label>
                        <input required name="name" ng-model="model.name" ng-disabled="$root.p3xr.state.cfg.readonlyConnections">
                        <div ng-messages="p3xrConnectionForm.name.$error">
                            <div ng-message="required">{{ $root.p3xr.strings.form.error.required }}</div>
                        </div>
                    </md-input-container>


                    <md-input-container class="md-block" >
                        <label>{{ $root.p3xr.strings.form.connection.label.host }}</label>
                        <input name="host" ng-model="model.host" ng-disabled="$root.p3xr.state.cfg.readonlyConnections">
                    </md-input-container>


                    <md-input-container class="md-block" >
                        <label>{{ $root.p3xr.strings.form.connection.label.port }}</label>
                        <input name="port" type="number" min="1" max="65535" ng-model="model.port" ng-disabled="$root.p3xr.state.cfg.readonlyConnections">
                        <div ng-messages="p3xrConnectionForm.port.$error">
                            <div ng-message-exp="['min', 'max']">
                                {{ $root.p3xr.strings.form.error.port }}
                            </div>
                        </div>
                    </md-input-container>


                    <md-input-container class="md-block p3xr-md-input-container-no-bottom" >
                        <label>{{ $root.p3xr.strings.form.connection.label.password }}</label>
                        <input name="password" type="password" ng-model="model.password" ng-disabled="$root.p3xr.state.cfg.readonlyConnections">
                    </md-input-container>
                    <div class="p3xr-md-input-container-bottom-info">
                        {{ $root.p3xr.strings.label.passwordSecure }}
                    </div>


                    <md-input-container class="md-block" >
                        <md-switch ng-model="model.awsElastiCache"  name="awsElastiCache"  aria-label="">
                            {{ model.awsElastiCache ? $root.p3xr.strings.label.awsElastiCache.on :  $root.p3xr.strings.label.awsElastiCache.off  }}
                        </md-switch>

                    </md-input-container>


                </md-content>
        </md-dialog-content>

<!--
            <md-dialog-actions layout="column" layout-gt-xs="row" layout-align-gt-xs="end end" layout-align="end end" md-theme="{{ $root.p3xr.state.theme }}">
-->
            <md-dialog-actions layout="row" layout-align="end end" md-theme="{{ $root.p3xr.state.theme }}">

            <span md-theme="{{ $root.p3xr.state.themeCommon }}">
                <md-button class="md-raised md-primary" ng-click="testConnection()">
                    <i class="fas fa-plug"></i>
                    {{ $root.p3xr.strings.intention.testConnection }}
                </md-button>
            </span>
            <md-button class="md-raised md-primary" type="submit" ng-if="!$root.p3xr.state.cfg.readonlyConnections">
                <md-icon>{{ options.type === 'new' ? 'add' : 'save' }}</md-icon>
                {{ options.type === 'new' ? $root.p3xr.strings.intention.add : $root.p3xr.strings.intention.save }}
            </md-button>


            <md-button class="md-raised md-accent" ng-click="cancel()">
                <md-icon>cancel</md-icon>
                {{ $root.p3xr.strings.intention.cancel }}
            </md-button>


            </md-dialog-actions>
    </form>
</md-dialog>