{{#extend "base" title="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 badges</h2>

        <div class="container">
            <div class="row">
                {{> price-block-v2
                isProductSaved=false
                isUserLogedOut=false
                badge-text='Buy one get one free'
                badge-color='red'
                install=true
                sample=true
                cc=true
                delivery=true
                }}

                {{> price-block-v2
                isProductSaved=false
                isUserLogedOut=false
                badge-text='clearence'
                badge-color='yellow'
                install=true
                sample=true
                cc=true
                delivery=true
                }}

                {{> price-block-v2
                isProductSaved=false
                isUserLogedOut=false
                badge-text='New lower price'
                badge-color='green'
                install=true
                sample=true
                cc=true
                delivery=true
                }}

                {{> price-block-v2
                isProductSaved=false
                isUserLogedOut=false
                badge-text='New range'
                badge-color='green'
                install=true
                sample=true
                cc=true
                delivery=true
                }}

                {{> price-block-v2
                isProductSaved=false
                isUserLogedOut=false
                badge-text='10% off'
                badge-color='red'
                install=true
                sample=true
                cc=true
                delivery=true
                }}

                {{> price-block-v2
                isProductSaved=false
                isUserLogedOut=false
                badge-text='4 for 3'
                badge-color='red'
                install=true
                sample=true
                cc=true
                delivery=true
                }}

                {{> price-block-v2
                isProductSaved=false
                isUserLogedOut=false
                badge-text='15% off'
                badge-color='blue'
                install=true
                sample=true
                cc=true
                delivery=true
                }}

                {{> price-block-v2
                isProductSaved=false
                isUserLogedOut=false
                badge-text='Weekend Savers'
                badge-color='blue'
                install=true
                sample=true
                cc=true
                delivery=true
                }}

                {{> price-block-v2
                isProductSaved=false
                isUserLogedOut=false
                isCashback=true
                badge-text='30% Cashback'
                badge-color='red'
                install=true
                sample=true
                cc=true
                delivery=true
                }}

            </div>
        </div>
    {{/content}}
{{/extend}}