Ghost/ghost/admin/app/components/collections/collection-form.hbs

<div class="gh-main-section">
    <div class="flex justify-between items-center">
        <h4 class="gh-main-section-header small bn">Basic settings</h4>
    </div>
    <section class="gh-main-section-block">
        <div class="gh-main-section-content grey columns-1">
            <GhFormGroup @errors={{@collection.errors}} @hasValidated={{@collection.hasValidated}} @property="title" class="mr2 flex-auto">
                <label for="collection-title">Title</label>
                <input type="text" class="gh-input" id="collection-title" name="title" value={{@collection.title}} {{on "input" (pick "target.value"
                    (fn this.setCollectionProperty "title" ))}} {{on "blur" (fn this.validateCollectionProperty "title" )}}
                    data-test-input="collection-title" />
                <span class="error">
                    <GhErrorMessage @errors={{@collection.errors}} @property="title" />
                </span>
            </GhFormGroup>

            <GhFormGroup @errors={{@collection.errors}} @hasValidated={{@collection.hasValidated}} @property="slug" class="mr2 flex-auto">
                <label for="collection-slug">Slug</label>
                <input type="text" class="gh-input" id="collection-slug" name="slug" value={{@collection.slug}} {{on "input" (pick "target.value"
                    (fn this.setCollectionProperty "slug" ))}} {{on "blur" (fn this.validateCollectionProperty "slug" )}}
                    data-test-input="collection-slug" />
                <span class="error">
                    <GhErrorMessage @errors={{@collection.errors}} @property="slug" />
                </span>
            </GhFormGroup>

            <GhFormGroup class="no-margin" @errors={{@collection.errors}} @hasValidated={{@collection.hasValidated}}
                @property="description">
                <label for="collection-description">Description</label>
                <textarea id="collection-description" name="description" class="gh-input gh-collection-details-textarea"
                    {{on "input" (pick "target.value" (fn this.setCollectionProperty "description" ))}} {{on "blur" (fn
                    this.validateCollectionProperty "description" )}}
                    data-test-input="collection-description">{{@collection.description}}</textarea>

                <GhErrorMessage @errors={{@collection.errors}} @property="description" />
                <p>Maximum: <b>500</b> characters. You’ve used {{gh-count-down-characters @collection.description 500}}</p>
            </GhFormGroup>

            <GhFormGroup class="gh-collection-image-uploader no-margin" @errors={{@collection.errors}} @hasValidated={{@collection.hasValidated}} @property="featureImage">
                <label for="collection-image">Collection image</label>
                <GhImageUploaderWithPreview
                    @image={{@collection.featureImage}}
                    @text="Upload collection image"
                    @allowUnsplash={{true}}
                    @update={{fn this.setCollectionProperty "featureImage"}}
                    @remove={{fn this.setCollectionProperty "featureImage" ""}}
                />
            </GhFormGroup>
        </div>
    </section>

    <section class="gh-main-section-block">
        <div class="gh-main-section-content grey columns-1">
            <GhFormGroup class="gh-collection-image-uploader no-margin" @errors={{@collection.errors}} @hasValidated={{@collection.hasValidated}} @property="type">
                <label for="collection-image">Collection type</label>

                <div class="gh-contentfilter-menu gh-contentfilter-visibility {{if @selectedVisibility.value "gh-contentfilter-selected"}}" data-test-visibility-select="true">
                    <PowerSelect
                        @selected={{this.selectedType}}
                        @options={{this.availableTypes}}
                        @searchEnabled={{false}}
                        @onChange={{this.changeType}}
                        @triggerComponent={{component "gh-power-select/trigger"}}
                        @triggerClass="gh-contentfilter-menu-trigger"
                        @dropdownClass="gh-contentfilter-menu-dropdown"
                        @matchTriggerWidth={{false}}
                        as |type|
                    >
                        {{#if type.name}}{{type.name}}{{else}}<span class="red">Unknown type</span>{{/if}}
                    </PowerSelect>

                    {{#if (eq this.selectedType.value 'manual')}}
                        <p>Add posts to this collection one by one through post settings menu.</p>
                    {{/if}}

                    {{#if (eq this.selectedType.value 'automatic')}}
                        <input type="text" 
                            class="gh-input" 
                            id="collection-filter" 
                            name="filter" 
                            value={{@collection.filter}} 
                            {{on "input" (pick "target.value" (fn this.setCollectionProperty "filter" ))}} 
                            {{on "blur" (fn this.validateCollectionProperty "filter" )}}
                            data-test-input="collection-filter" />
                    {{/if}}
                </div>
            </GhFormGroup>
        </div>
    </section>
</div>