<md-dialog aria-label="{{$root.p3xr.strings.form.key.label.formName}}" style="min-width: 75%; ">
    <form novalidate name="p3xrKeyNewForm" ng-submit="submit()">
        <md-toolbar md-theme="{{ $root.p3xr.state.themeLayout }}" class="md-hue-3">
            <div class="md-toolbar-tools">
                <h2 flex md-truncate>
                    {{ options.type === 'edit' ? $root.p3xr.strings.form.key.label.formName.edit : ( options.type ===
                    'append' ? $root.p3xr.strings.form.key.label.formName.append :
                    $root.p3xr.strings.form.key.label.formName.add ) }}
                </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.key.field.key }}</label>
                    <input required minlength="1" ng-model="model.key" name="key" ng-disabled="options.type !== 'add'">
                    <div ng-messages="p3xrKeyNewForm.key.$error">
                        <div ng-message-exp="['required', 'minlength']">
                            {{ $root.p3xr.strings.form.key.error.key }}
                        </div>
                    </div>
                </md-input-container>

                <md-input-container class="md-block">
                    <label>{{ $root.p3xr.strings.form.key.field.type }}</label>
                    <md-select ng-model="model.type" name="type" ng-disabled="options.type !== 'add'">
                        <md-option ng-repeat="type in types" ng-value="type">
                            {{ $root.p3xr.strings.redisTypes[type] }}
                        </md-option>
                    </md-select>
                </md-input-container>

                <span ng-switch="model.type">
                    <span ng-switch-when="list">
                        <md-input-container class="md-block p3xr-md-input-container-no-bottom">
                            <label>{{ $root.p3xr.strings.form.key.field.index }}</label>
                             <input type="number" step="1" ng-model="model.index" name="index">
                        </md-input-container>
                         <div class="p3xr-md-input-container-bottom-info">
                            {{ $root.p3xr.strings.label.redisListIndexInfo }}
                        </div>
                    </span>
                    <span ng-switch-when="hash">
                        <md-input-container class="md-block">
                            <label>{{ $root.p3xr.strings.form.key.field.hashKey }}</label>
                            <input required minlength="1" ng-model="model.hashKey" name="hashKey">
                            <div ng-messages="p3xrKeyNewForm.hashKey.$error">
                                <div ng-message-exp="['required', 'minlength']">
                                    {{ $root.p3xr.strings.form.key.error.hashKey }}
                                </div>
                            </div>
                        </md-input-container>
                    </span>
                    <span ng-switch-when="zset">
                        <md-input-container class="md-block">
                            <label>{{ $root.p3xr.strings.form.key.field.score }}</label>
                             <input type="number" required ng-model="model.score" name="score">
                            <div ng-messages="p3xrKeyNewForm.score.$error">
                                <div ng-message-exp="['required']">
                                    {{ $root.p3xr.strings.form.key.error.score }}
                                </div>
                            </div>
                        </md-input-container>
                    </span>
                </span>

                <md-button class="md-button md-raised md-primary" ng-if="$root.p3xr.state.donated" ng-click="jsonEditor({ $event: $event, value: model.value})">
                    <md-icon>edit</md-icon>
                    <span hide-sm hide-xs>{{ $root.p3xr.strings.intention.jsonViewEditor }}</span>
                    <md-tooltip ng-if="$root.$mdMedia('sm') || $root.$mdMedia('xs')" md-direction="bottom">{{
                        $root.p3xr.strings.intention.jsonViewEditor }}
                    </md-tooltip>
                </md-button>

                <md-button class="md-button md-raised md-primary" ng-click="formatJson({ $event: $event})" ng-if="$root.p3xr.state.donated">
                    <md-icon>format_line_spacing</md-icon>
                    <span hide-sm hide-xs>{{ $root.p3xr.strings.intention.formatJson }}</span>
                    <md-tooltip ng-if="$root.$mdMedia('sm') || $root.$mdMedia('xs')" md-direction="bottom">{{
                        $root.p3xr.strings.intention.formatJson }}
                    </md-tooltip>
                </md-button>

                <md-switch ng-model="validateJson" class="md-accent" style="margin-top: 0px;">
                    {{ $root.p3xr.strings.label.validateJson }}
                </md-switch>

                <md-input-container class="md-block">
                    <label>{{ $root.p3xr.strings.form.key.field.value }}</label>
                    <textarea ng-model="model.value" required p3x-validate-json
                              p3x-validate-json-required="validateJson" name="value"></textarea>
                    <div ng-messages="p3xrKeyNewForm.value.$error">
                        <div ng-message-exp="['required']">
                            {{ $root.p3xr.strings.form.key.error.value }}
                        </div>
                    </div>
                    <div ng-messages="p3xrKeyNewForm.value.$error">
                        <div ng-message-exp="['p3xValidateJson']">
                            {{ $root.p3xr.strings.label.jsonViewNotParsable }}
                        </div>
                    </div>
                </md-input-container>


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

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

            <md-button class="md-raised md-primary" type="submit">
                <md-icon>{{ options.type === 'edit' ? 'edit' : 'add'}}</md-icon>
                {{ options.type === 'edit' ? $root.p3xr.strings.intention.save : $root.p3xr.strings.intention.add }}
            </md-button>

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

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