<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>
            Products
        </h2>
    </GhCanvasHeader>

    <section class="view-container">
        <div class="gh-product-list">
            <div class="gh-product-card">
                <span class="gh-product-list-icon">{{svg-jar "members"}}</span>
                <h3 class="gh-product-card-name">
                    Free membership
                </h3>
                <p class="gh-product-card-description">
                    {{this.settings.membersFreePriceDescription}}
                </p>
                <LinkTo @route="settings.products" class="gh-btn" {{action (toggle "showFreeMembershipModal" this)}}>
                    <span>Customize</span>
                </LinkTo>
            </div>

            {{#each this.products as |product|}}
            <div class="gh-product-card">
                <span class="gh-product-list-icon"><div class="gh-product-list-siteicon" style={{this.iconStyle}}></div></span>
                <h3 class="gh-product-card-name">
                    {{product.name}}
                </h3>
                <p class="gh-product-card-description">
                    {{product.description}}
                </p>
                <LinkTo @route="settings.product" @model={{product}} class="gh-btn">
                    <span>Customize</span>
                </LinkTo>
            </div>
            {{/each}}
        </div>
    </section>
</section>

{{#if this.showFreeMembershipModal}}
    <GhFullscreenModal
    @modal="free-membership-settings"
    @close={{this.closeFreeMembershipModal}}
    @modifier="action wide product-ssprice" />
{{/if}}
