<div class="add-ons">
    <h2>Optional Add-Ons</h2>
    {{#each add-ons}}
        <div class="add-on mb-5 d-flex flex-column">
            <div class="d-flex mb-3">
                <div class="image-wrapper m-0">
                    <img src="{{ image.url }}" alt="{{ image.alt }}" />
                </div>
                <div class="content-wrapper">
                    <div class="title-wrapper d-flex justify-content-between">
                        <p class="fw-bold">{{ label }}</p>
                        <p class="fw-bold">{{#currencyFormatter price }}/{{ price_type }}</p>
                    </div>
                    <p>{{ description }}</p>
                </div>
            </div>

            <a href="?add-on={{ label }}" class="button--primary align-self-end">
                {{#if in_cart}}
                    Remove from Cart
                {{else}}
                    Add to Cart
                {{/if}}
            </a>
        </div>
    {{/each}}
    {{#each add-ons-onetime}}
        <div class="add-on mb-5 d-flex flex-column">
            <div class="d-flex mb-3">
                <div class="image-wrapper m-0">
                    <img src="{{ image.url }}" alt="{{ image.alt }}" />
                </div>
                <div class="content-wrapper">
                    <div class="title-wrapper d-flex justify-content-between">
                        <p class="fw-bold">{{ label }}</p>
                        <p class="fw-bold">{{#currencyFormatter price }}/{{ price_type }}</p>
                    </div>
                    <p>{{ description }}</p>
                </div>
            </div>

            <a href="?add-on={{ label }}" class="button--primary align-self-end">
                {{#if in_cart}}
                    Remove from Cart
                {{else}}
                    Add to Cart
                {{/if}}
            </a>
        </div>
    {{/each}}
</div>

<style>

strong {
    font-weight: bold;
}
.add-ons h2 {
    margin-bottom: 3rem;
}

p {
    line-height: 28px;
    margin-bottom: .5rem;
}
</style>