Ghost/ghost/admin/app/templates/offer.hbs

<section class="gh-canvas circle-bg">
    <GhCanvasHeader class="gh-canvas-header">
        <h2 class="gh-canvas-title" data-test-screen-title>
            <LinkTo @route="offers" data-test-link="offers-back">Offers</LinkTo>
            <span>{{svg-jar "arrow-right"}}</span>
            New offer
        </h2>
        <section class="view-actions">
            <GhTaskButton @class="gh-btn gh-btn-primary gh-btn-icon" @type="button" @task={{this.saveTask}} @data-test-button="save" />
        </section>
    </GhCanvasHeader>

    <section class="view-container">
        <div class="gh-main-layout content-preview">
            <form>
                <div class="gh-main-section gh-offer-form">
                    <div class="gh-main-section-block no-margin">
                        <h4 class="gh-main-section-header small bn">Basic</h4>
                        <div class="gh-main-section-content grey">
                            <GhFormGroup @errors={{this.errors}} @property="name">
                                <label for="name" class="fw6">Name</label>
                                <GhTextInput
                                    @name="name"
                                    @placeholder="Black Friday"
                                    @id="name"
                                    @class="gh-input" />
                                <GhErrorMessage @errors={{this.errors}} @property="name" />
                                <p>Will be shown to members on the Stripe Checkout page</p>
                            </GhFormGroup>
                        </div>

                        <h4 class="gh-main-section-header small bn">Discount info</h4>
                        <div class="gh-main-section-content grey">
                            <GhFormGroup @errors={{this.errors}} @property="product-cadence">
                                <label for="product-cadence" class="fw6">Product – cadence</label>
                                <span class="gh-select">
                                    <OneWaySelect @value={{this.selectedVisibility}}
                                        @options={{this.cadences}}
                                        @optionValuePath="name"
                                        @optionLabelPath="label"
                                        @optionTargetPath="name"
                                        @update={{this.updateVisibility}}
                                    />
                                    {{svg-jar "arrow-down-small"}}
                                </span>
                                <GhErrorMessage @errors={{this.errors}} @property="product-cadence" />
                            </GhFormGroup>
                            {{#if (eq this.selectedDiscountType "percentage")}}
                                <GhFormGroup @errors={{this.errors}} @property="amount">
                                    <label for="amount" class="fw6">Percentage off</label>
                                    <div class="gh-offer-value percentage">
                                        <span class="unit">%</span>
                                        <GhTextInput
                                            @type="number"
                                            @name="amount"
                                            @placeholder=""
                                            @id="amount"
                                            @class="gh-input" />
                                        <GhErrorMessage @errors={{this.errors}} @property="amount" />
                                    </div>
                                </GhFormGroup>
                            {{else}}
                                <GhFormGroup @errors={{this.errors}} @property="amount">
                                    <label for="amount" class="fw6">Amount off</label>
                                    <div class="gh-offer-value fixed">
                                        <span class="unit">$</span>
                                        <GhTextInput
                                            @name="amount"
                                            @type="number"
                                            @placeholder=""
                                            @id="amount"
                                            @class="gh-input" />
                                        <GhErrorMessage @errors={{this.errors}} @property="amount" />
                                    </div>
                                </GhFormGroup>
                            {{/if}}
                            <div class="gh-offer-type">
                                <div class="gh-radio {{if (eq this.selectedDiscountType "percentage") "active"}}" {{on "click" (fn this.setDiscountType "percentage")}}>
                                    <div class="gh-radio-button"></div>
                                    <div class="gh-radio-content">
                                        <div class="gh-radio-label">Percentage discount</div>
                                    </div>
                                </div>
                                <div class="gh-radio {{if (eq this.selectedDiscountType "fixed") "active"}}" {{on "click" (fn this.setDiscountType "fixed")}}>
                                    <div class="gh-radio-button"></div>
                                    <div class="gh-radio-content">
                                        <div class="gh-radio-label">Fixed amount discount</div>
                                    </div>
                                </div>
                            </div>
                            <div class="gh-offer-duration">
                                <GhFormGroup @errors={{this.errors}} @property="duration">
                                    <label for="product-cadence" class="fw6">Duration</label>
                                    <span class="gh-select">
                                        <OneWaySelect @value=''
                                            @options={{this.durations}}
                                            @optionValuePath="duration"
                                            @optionLabelPath="label"
                                            @optionTargetPath="duration"
                                            @update = {{this.setDuration}}
                                        />
                                        {{svg-jar "arrow-down-small"}}
                                    </span>
                                    <GhErrorMessage @errors={{this.errors}} @property="duration" />
                                </GhFormGroup>
                                {{#if (eq this.selectedDuration "multiple-months")}}
                                <GhFormGroup @errors={{this.errors}} @property="duration-months" @class="duration-months">
                                    <label for="name" class="fw6">Number of months</label>
                                    <GhTextInput
                                        @name="duration-months"
                                        @id="duration-months"
                                        @class="gh-input" />
                                    <GhErrorMessage @errors={{this.errors}} @property="duration-months" />
                                </GhFormGroup>
                                {{/if}}
                            </div>
                        </div>

                        <h4 class="gh-main-section-header small bn">Portal settings</h4>
                        <div class="gh-main-section-content grey">
                            <div class="form-col2">
                                <GhFormGroup @errors={{this.errors}} @property="display-title">
                                    <label for="display-title" class="fw6">Display title</label>
                                    <GhTextInput
                                        @name="display-title"
                                        @placeholder="Black Friday Special"
                                        @id="display-title"
                                        @class="gh-input" />
                                    <GhErrorMessage @errors={{this.errors}} @property="display-title" />
                                </GhFormGroup>
                                <GhFormGroup @errors={{this.errors}} @property="code">
                                    <label for="code" class="fw6">Offer code</label>
                                    <GhTextInput
                                        @name="code"
                                        @placeholder="black-friday"
                                        @id="code"
                                        @class="gh-input" />
                                    <GhErrorMessage @errors={{this.errors}} @property="code" />
                                </GhFormGroup>
                            </div>
                            <GhFormGroup @errors={{this.errors}} @property="description">
                                <label for="description" class="fw6">Description</label>
                                <GhTextarea
                                    @id="description"
                                    @name="description"
                                    @stopEnterKeyDownPropagation="true"
                                />
                                <GhErrorMessage @errors={{this.errors}} @property="description" />
                            </GhFormGroup>
                        </div>
                    </div>
                </div>
            </form>
            
            <div class="gh-offer-portal-preview">
                <div>
                    <h4 class="gh-main-section-header small bn">Preview</h4>
                    <div class="gh-offer-portal-preview-mock">Portal preview</div>
                </div>
            </div>

        </div>

        <div class="gh-main-section">
            <div class="gh-main-section-block">
                <button
                    type="button"
                    class="gh-btn gh-btn-red gh-btn-icon"
                >
                    <span>Delete offer</span>
                </button>
            </div>
        </div>
    </section>
</section>