{{#extend "base" title="Ripple badges"
          isDiscount=true
          isSQM=true
          isDescription=true
          isCashback=false
}}
    {{#content "head" mode="append"}}
        <link type="text/css" rel="stylesheet" href="./css/pages/page_product-details.css">
        <link type="text/css" rel="stylesheet" href="./css/pages/page_product-details-v2.css">
        <link type="text/css" rel="stylesheet" href="./css/components/price-block-v2.css">

        <style>
            .row {
                display: flex;
                flex: 0 0 33%;
                justify-content: space-between;
                flex-direction: row;
            }

            .pdp-price-container {
                max-width: 33%;
                margin-top: 10px;
            }

            @media only screen and (max-width: 960px) {
                .row {
                    flex: 0 0 50%;
                    gap: 10px;
                }

                .pdp-price-container {
                    max-width: calc(50% - 10px);
                }
            }

            @media only screen and (max-width: 540px) {
                .row {
                    flex: 0 0 100%;
                }

                .pdp-price-container {
                    max-width: 100%;
                }
            }
        </style>
    {{/content}}
    {{#content "body"}}
        <h2>Different ripple badges</h2>

        <div class="container">
            <div class="row">
                {{> price-block-v2
                isProductSaved=false
                isUserLogedOut=false
                isStaticBadges=true
                badges=pdp-price-badges.rippleBadges.twoRed
                install=true
                sample=true
                cc=true
                delivery=true
                }}

                {{> price-block-v2
                isProductSaved=false
                isUserLogedOut=false
                isStaticBadges=true
                badges=pdp-price-badges.rippleBadges.greenRed
                install=true
                sample=true
                cc=true
                delivery=true
                }}

                {{> price-block-v2
                isProductSaved=false
                isUserLogedOut=false
                isStaticBadges=true
                badges=pdp-price-badges.rippleBadges.oneYellow
                install=true
                sample=true
                cc=true
                delivery=true
                }}

                {{> price-block-v2
                isProductSaved=false
                isUserLogedOut=false
                isStaticBadges=true
                badges=pdp-price-badges.rippleBadges.twoBlueOneLong
                install=true
                sample=true
                cc=true
                delivery=true
                }}

                {{> price-block-v2
                isProductSaved=false
                isUserLogedOut=false
                isStaticBadges=true
                badges=pdp-price-badges.rippleBadges.oneBlueDarkLong
                install=true
                sample=true
                cc=true
                delivery=true
                }}

                {{> price-block-v2
                isProductSaved=false
                isUserLogedOut=false
                isStaticBadges=true
                badges=pdp-price-badges.rippleBadges.greenRedLong
                install=true
                sample=true
                cc=true
                delivery=true
                }}
            </div>
        </div>
    {{/content}}
{{/extend}}