database_edit.html

<div class="wrapper">
    <section class="Breadcrumbs">
        <a class="Breadcrumb Breadcrumb--path" cv-org-href="/admin/databases/">Databases</a>
        <cv-chevron-right-icon class="Breadcrumb-divider" width="12px" height="12px"></cv-chevron-right-icon>
        <h2 class="Breadcrumb Breadcrumb--page" ng-if="!database.id">Add Database</h2>
        <h2 class="Breadcrumb Breadcrumb--page" ng-if="database.id">{{database.name}}</h2>
    </section>

    <section class="Grid Grid--gutters Grid--full">
        <!-- form -->
        <div class="Grid-cell Cell--2of3">
            <form class="Form-new bordered rounded shadowed" name="form" novalidate>
                <div class="Form-field" mb-form-field="engine">
                    <mb-form-label display-name="Database type" field-name="engine"></mb-form-label>
                    <label class="Select Form-offset">
                        <select name="engine" ng-model="database.engine" ng-options="type as properties.name for (type, properties) in form_input.engines"></select>
                    </label>
                </div>

                <div class="Form-field" mb-form-field="engine">
                    <mb-form-label display-name="Name" field-name="name"></mb-form-label>
                    <input class="Form-input Form-offset full" name="name" placeholder="How would you like to refer to this database?" ng-model="database.name" required autofocus />
                    <span class="Form-charm"></span>
                </div>

                <!-- Database Input Fields - show a form for each field in DatabaseEdit.ENGINES[database.engine].fields -->
                <div class="FormInputGroup">
                    <div class="Form-field" ng-repeat="field in ENGINES[database.engine].fields" mb-form-field="{{field.fieldName}}">
                        <mb-form-label display-name="{{field.displayName}}" field-name="{{field.fieldName}}"></mb-form-label>
                        <!-- Multiple-Choice Field -->
                        <div ng-if="field.choices" class="Form-input Form-offset full Button-group">
                            <button ng-repeat="choice in field.choices" class="Button"
                                    ng-class="{'Button--active': choice.selectionAccent === 'active' && details[field.fieldName] === choice.value,
                                               'Button--danger': choice.selectionAccent === 'danger' && details[field.fieldName] === choice.value}"
                                    ng-click="details[field.fieldName] = choice.value">
                                {{choice.name}}
                            </button>
                        </div>
                        <!-- String Field (default) -->
                        <input ng-if="!field.choices"
                               class="Form-input Form-offset full"
                               name="{{field.fieldName}}"
                               placeholder="{{field.placeholder}}"
                               ng-model="details[field.fieldName]"
                               ng-required="field.required" />
                        <span class="Form-charm"></span>
                    </div>
                </div>

                <div class="Form-actions">
                    <button class="Button" ng-class="{'Button--primary': form.$valid}" ng-click="save(database, details)" ng-disabled="!form.$valid">
                        Save
                    </button>
                    <mb-form-message></mb-form-message>
                </div>
            </form>
        </div>

        <!-- actions -->
        <div class="Grid-cell Cell--1of3" ng-if="database.id">
            <div class="Actions">
                <h3>Actions</h3>
                <div class="Actions-group">
                    <button class="Button" mb-action-button="sync" success-text="Sync triggered!" failed-text="Failed to sync" active-text="Starting ...">Sync</button>
                </div>

                <div class="Actions-group Actions--dangerZone">
                    <label class="Actions-groupLabel block">Danger Zone:</label>
                    <!-- TODO: this doesn't do anything because its unclear if its really safe to delete dbs -->
                    <button class="Button Button--danger">Remove this database</button>
                </div>
            </div>
        </div>
    </section>
</div><!-- wrapper -->