<div class="c-addon">
    <div class="c-addon__main">

        <figure class="c-addon__image">
            @if(isset($addon->image))
                <img class="u-clip-path" data-id="{{ ($addonIteration % 2) ? "clip-path-image-1" : "clip-path-image-2" }}" src="{{ $addon->image->small_image_url }}" alt="{{ $addon->image->name  }}">
            @endif
        </figure>

        <div class="c-addon__content">
            <h3 class="c-addon__title">{{ $addon->name }}</h3>
            <p class="c-addon__price">{!! $addon->getAddonLabel()  !!}</p>
            <div class="c-addon__action">
                <button class="c-icon-button  c-icon-button--wide  js-plan-popup" data-product-id="{{ $addon->getProduct()->id }}">
                    <i class="c-icon-button__icon">
                        <svg width="32" height="32">
                            <use href="/img/icon-cart.svg#cart"></use>
                        </svg>
                    </i>
                </button>

            </div>
        </div>
    </div>
</div>