Ghost/ghost/admin/app/components/gh-membership-products-alpha.hbs

<label>Products</label>
<div class="gh-product-cards">
{{#each this.products as |product productIdx|}}
    <div class="gh-product-card">
        <button class="gh-product-card-editbutton gh-btn gh-btn-text gh-btn-link green" {{action "openEditProduct" product}}>
            <span>Edit</span>
        </button>
        <div class="gh-product-card-block">
            <h3 class="gh-product-card-name">
                {{product.name}}
            </h3>
            <p class="gh-product-card-description">
                {{product.description}}
            </p>
            {{#if (and (eq productIdx 0) (not (eq products.length 1)))}}
                <span class="gh-badge gh-badge-green">Available in Portal</span>
            {{/if}}
        </div>
        <div class="gh-product-card-block">
            <h4>Benefits <span class="counter">(3)</span></h4>
            <ul class="benefits">
                {{#each product.benefits as |benefit|}}
                    <li>{{svg-jar "check"}} {{benefit.label}} </li>
                {{/each}}
                <li>{{svg-jar "check"}} Access to all J&amp;A Watch J&amp;A episodes, past and future!</li>
                <li>{{svg-jar "check"}} An exclusive AD-FREE extra video episode of J&amp;A AMA every other week!</li>
                <li>{{svg-jar "check"}} Includes Discord benefits</li>
            </ul>
        </div>
        <div class="gh-product-card-block">
            <div class="gh-product-price-container">
                <div class="gh-product-card-price">
                    <div class="flex items-baseline">
                        <span class="amount">{{gh-price-amount product.monthlyPrice.amount}}</span>
                        <span class="currency">{{product.monthlyPrice.currency}}</span>
                    </div>
                    <div class="period">Monthly</div>
                </div>
                <div class="gh-product-card-price">
                    <div class="flex items-baseline">
                        <span class="amount">{{gh-price-amount product.yearlyPrice.amount}}</span>
                        <span class="currency">{{product.monthlyPrice.currency}}</span>
                    </div>
                    <div class="period">Yearly</div>
                </div>
            </div>
        </div>
    </div>
{{/each}}

<div class="gh-product-cards-footer">
    <button class="gh-btn gh-btn-link gh-btn-text gh-btn-icon gh-btn-add-product green" {{action "openNewProduct" product}}><span>{{svg-jar "add-stroke" class="stroke-green"}}Add product</span></button>
    <span>&ndash; Advanced (<a href="javascript:">learn more</a>)</span>
</div>
</div>

{{#if this.showProductModal}}
    <GhFullscreenModal
        @modal="product"
        @model={{hash
            product=this.productModel
        }}
        @confirm={{this.confirmProductSave}}
        @close={{this.closeProductModal}}
        @modifier="edit-product action wide" />
{{/if}}