<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 this.product.name}}
                {{this.product.name}}
            {{else}}
                <span class="midlightgrey">New product</span>
            {{/if}}
        </h2>
        <section class="view-actions">
            <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>

    <section class="gh-main-section">
    <div class="gh-main-section-block">
        <h4 class="gh-main-section-header small bn">Product details</h4>
        <div class="gh-main-section-content grey gh-product-details-form">
            <div class="gh-product-details-fields">
                <GhFormGroup @errors={{this.product.errors}} @hasValidated={{this.product.hasValidated}} @property="name" @classNames="max-width">
                    <label for="product-name">Product name</label>
                    <GhTextInput data-test-input="product-name" @id="product-name" @value={{this.product.name}} />
                    <GhErrorMessage @errors={{this.product.errors}} @property="name" />
                </GhFormGroup>

                <GhFormGroup @property="description" @classNames="max-width">
                    <label for="product-description">Description</label>
                    <GhTextInput data-test-input="product-description" @value={{this.product.description}} />
                    <GhErrorMessage @property="description" />
                </GhFormGroup>

                <GhFormGroup @property="_welcome-page" @classNames="max-width">
                    <label for="_welcome-page">Welcome page</label>
                    <GhUrlInput
                        @value={{readonly this.settings.membersPaidSignupRedirect}}
                        @baseUrl={{readonly this.siteUrl}}
                        @setResult={{action "setPaidSignupRedirect"}}
                        @validateUrl={{action "validatePaidSignupRedirect"}}
                        @placeholder={{readonly this.siteUrl}}
                    />
                    <p>Redirect to this URL after signup for this product</p>
                    <GhErrorMessage
                        @errors={{this.settings.errors}}
                        @property="membersPaidSignupRedirect"
                    />
                </GhFormGroup>
            </div>
        </div>
    </div>
    </section>
    </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"></div>
                </li>
                {{#unless this.stripePrices}}
                    <tr class="gh-list-row {{if this.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>
                                {{#if this.membersUtils.isStripeEnabled}}
                                    {{#unless this.product.isNew}}
                                        <button type="button" class="gh-btn gh-btn-green" {{action "openNewPrice"}}
                                        disabled={{this.saveTask.isRunning}} >
                                            <span>Add price</span>
                                        </button>
                                    {{/unless}}
                                {{else}}
                                    You need to <button class="b gh-setting-group" type="button" {{on "click" this.openStripeConnect}}>connect to Stripe</button> to add prices
                                {{/if}}
                            </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">
                            <span class="name">{{price.nickname}}</span>
                            {{#unless price.active}}
                            <span class="gh-badge archived">Archived</span>
                            {{/unless}}
                        </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-actions">
                        <div class="gh-price-list-actionlist">
                            <button class="gh-btn gh-btn-link" type="button" {{action "openEditPrice" price}}>
                                <span>Edit</span>
                            </button>
                            {{#if price.active}}
                                <button class="gh-btn gh-btn-link gh-btn-archive-toggle archived" disabled={{this.saveTask.isRunning}} type="button" {{action "archivePrice" price}}>
                                    <span>Archive</span>
                                </button>
                            {{else}}
                                <button class="gh-btn gh-btn-link gh-btn-archive-toggle" disabled={{this.saveTask.isRunning}} type="button" {{action "activatePrice" price}}>
                                    <span>Activate</span>
                                </button>
                            {{/if}}
                        </div>
                    </div>
                </li>
                {{/each}}
            </ol>

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

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

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