Ghost/ghost/admin/app/templates/settings/product.hbs

<section class="gh-canvas">
    <GhCanvasHeader class="gh-canvas-header">
        <h2 class="gh-canvas-title" data-test-screen-title>
            <LinkTo @route="settings">Settings</LinkTo>
            <span>{{svg-jar "arrow-right"}}</span>
            <LinkTo @route="settings.products">Products</LinkTo>
            <span>{{svg-jar "arrow-right"}}</span>
            {{#if product.name}}
                {{product.name}}
            {{else}}
                <span class="midlightgrey">New product</span>
            {{/if}}
        </h2>
        <section class="view-actions">
            <span class="dropdown">
                <GhDropdownButton @dropdownName="product-actions-menu" @classNames="gh-btn gh-btn-white gh-btn-icon only-has-icon user-actions-cog" @title="User Actions">
                    <span>
                        {{svg-jar "settings"}}
                        <span class="hidden">Product actions</span>
                    </span>
                </GhDropdownButton>
                <GhDropdown @name="product-actions-menu" @tagName="ul" @classNames="product-actions-menu dropdown-menu dropdown-align-right">
                    <li>
                        <button class="delete">
                            Delete product
                        </button>
                    </li>
                </GhDropdown>
            </span>

            <GhTaskButton @buttonText="Save product"
                @task={{this.saveTask}}
                @successText="Saved"
                @runningText="Saving"
                @class="gh-btn gh-btn-primary gh-btn-icon"
                data-test-button="save-settings"
            />
        </section>
    </GhCanvasHeader>

    <form>
    <div class="gh-product-details">
        <section class="gh-product-config">
            <h4 class="gh-main-section-header small bn">Product details</h4>
            <div class="gh-main-section-content grey gh-product-details-form">
                {{!-- <GhFormGroup @property="name" @class="gh-product-icon-container">
                    <label for="member-name">ICON</label>
                    <div class="gh-product-icon whitegrey">Icon</div>
                </GhFormGroup> --}}
                <div class="gh-product-details-fields">
                    <GhFormGroup @property="name" @classNames="max-width">
                        <label for="product-name">Product name</label>
                        <GhTextInput data-test-input="product-name" @id="product-name" @value={{product.name}}/>
                        <GhErrorMessage @property="name" />
                    </GhFormGroup>

                    <GhFormGroup @property="name" @classNames="max-width gh-product-description-container">
                        <label for="member-name">Description</label>
                        <GhTextInput data-test-input="member-name" />
                        <GhErrorMessage @property="name" />
                    </GhFormGroup>
                </div>
            </div>
        </section>
        {{!-- <section class="gh-product-stats">
            <h4 class="gh-main-section-header small bn">Members</h4>
            <div class="gh-product-stat-container">
                <div class="gh-product-chart">CHART</div>
                <div class="gh-product-stat-details">
                    <h3 class="data">330</h3>
                    <p class="info">members have access to this product</p>
                </div>
                <LinkTo @route="members">See members &rarr;</LinkTo>
            </div>
        </section> --}}
    </div>
    </form>

    <div class="gh-main-section">
        <div class="gh-main-section-block p0">
            <ol class="gh-price-list gh-list">
                <li class="gh-list-row header">
                    <div class="gh-list-header">Prices({{this.noOfPrices}})</div>
                    <div class="gh-list-header">Price</div>
                    <div class="gh-list-header">Subscriptions</div>
                    <div class="gh-list-header"></div>
                </li>
                {{#unless this.stripePrices}}
                <tr class="gh-list-row {{if price.active "" "gh-price-list-archived"}}">
                    <td colspan="4" class="gh-list-data">
                        <div class="gh-price-list-noprices">
                            <div class="mb2">There are no prices for this product.</div>
                            <button type="button" class="gh-btn gh-btn-green" {{action "openNewPrice"}}>
                                <span>Add price</span>
                            </button>
                        </div>
                    </td>
                </tr>
                {{/unless}}
                {{#each this.stripePrices as |price|}}
                <li class="gh-list-row {{if price.active "" "gh-price-list-archived"}}">
                    <div class="gh-list-data gh-price-list-title">
                        <h3 class="gh-price-list-name">
                            {{price.nickname}}
                        </h3>
                        <p class="ma0 pa0 f8 midgrey gh-price-list-description">
                            Price description
                        </p>
                    </div>

                    <div class="gh-list-data gh-price-list-price">
                        <span>{{currency-symbol price.currency}}{{price.amount}} / {{price.interval}}</span>
                    </div>

                    <div class="gh-list-data gh-price-list-subscriptions">
                        <span>0</span>
                    </div>

                    <div class="gh-list-data gh-price-list-actions">
                        <div class="gh-price-list-actionlist">
                            <button class="gh-btn gh-btn-link" {{action "openEditPrice" price}}>
                                <span>Edit</span>
                            </button>
                            {{#if price.active}}
                                <button class="gh-btn gh-btn-link archived">
                                    <span>Archive</span>
                                </button>
                            {{else}}
                                <button class="gh-btn gh-btn-link"><span>Activate</span></button>
                            {{/if}}
                        </div>
                    </div>
                </li>
                {{/each}}
            </ol>

            {{#if this.stripePrices}}
            <button type="button" class="gh-btn gh-btn-green" {{action "openNewPrice"}}>
                <span>Add price</span>
            </button>
            {{/if}}
        </div>
    </div>

    {{#if this.showPriceModal}}
        {{!-- <GhFullscreenModal @modifier="action wide member-product">
            <ModalProductPrice
                    @model={{hash
                        price=this.priceModel
                    }}
                    @confirm={{action "savePrice"}}
                    @closeModal={{this.closePriceModal}} />
        </GhFullscreenModal> --}}
        <GhFullscreenModal
            @modal="product-price"
            @model={{hash
                price=this.priceModel
            }}
            @confirm={{action "savePrice"}}
            @close={{this.closePriceModal}}
            @modifier="action wide body-scrolling product-ssprice" />
    {{/if}}

    {{#if this.showUnsavedChangesModal}}
        <GhFullscreenModal
            @modal="leave-settings"
            @confirm={{this.leaveScreen}}
            @close={{this.toggleUnsavedChangesModal}}
            @modifier="action wide" />
    {{/if}}
</section>