Ghost/ghost/admin/app/components/modal-custom-view-form.hbs

<header class="modal-header" data-test-modal="custom-view-form">
    <h1>{{if this.model.isNew "New view" "Edit view"}}</h1>
</header>
{{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
<button class="close" href title="Close" {{action "closeModal"}} {{action (optional this.noop) on="mouseDown"}}>
    {{svg-jar "close"}}
</button>

<div class="modal-body">
    <fieldset>
        <GhFormGroup @errors={{this.model.errors}} @hasValidated={{this.model.hasValidated}} @property="name">
            <label for="view-name" class="dib fw6">View name</label>
            <GhTextInput
                @id="view-name"
                @value={{this.model.name}}
                @placeholder="Breaking news"
                @focus-out={{action "validate" "name" target=this.model}}
                data-test-input="custom-view-name"
            />
            {{#if this.model.errors}}
                <GhErrorMessage @errors={{this.model.errors}} @property="name" data-test-error="custom-view-name" />
            {{else}}
                {{#if this.model.isNew}}
                    <p>Saved views appear in the app sidebar.</p>
                {{/if}}
            {{/if}}
        </GhFormGroup>
    </fieldset>
    <div>
        <label for="view-name" class="dib fw6">Icon color</label>
        <div class="flex justify-between mt3 nl1">
            {{#each this.customViews.availableColors as |color|}}
                <div class="gh-radio-color">
                    <input
                        type="radio"
                        name="view-color"
                        id="view-{{color}}"
                        checked={{eq color this.delayedModelColor}}
                        value={{color}}
                        {{on "change" (action 'changeColor')}}
                    >
                    <label for="view-{{color}}"><span class="gh-radio-color-{{color}}"></span></label>
                </div>
            {{/each}}
        </div>
    </div>
</div>

<div class="modal-footer">
    {{#if this.model.isNew}}
        <button
            class="gh-btn"
            {{action "closeModal"}}
            {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
            {{on "mousedown" (optional this.noop)}}
            data-test-button="cancel-custom-view-form"
        >
            <span>Cancel</span>
        </button>
    {{else}}
        <button
            class="gh-btn gh-btn-red gh-btn-icon"
            {{on "click" (perform this.deleteTask)}}
            {{on "mousedown" (optional this.noop)}}
            data-test-button="delete-custom-view"
        >
            <span>{{svg-jar "trash"}} Delete</span>
        </button
        >
    {{/if}}

    <GhTaskButton
        @buttonText="Save"
        @successText="Saved"
        @task={{this.saveTask}}
        @taskArgs={{this.model}}
        @class="gh-btn gh-btn-green gh-btn-icon"
        data-test-button="save-custom-view" />
</div>