<div class="compare-row slim-compare-row" data-campaign-id="{{>campId}}">
    <!-- Custom feed label if defined -->
    {{if customLabel && customLabel.text && customLabel.icon}}
        <div class="as-feed-label" as-data-style="{{if customLabel.color}}background-color: #{{>customLabel.color}}{{/if}}">
            <div class="text-large ellipsis">
                <i class="fa fa-{{>customLabel.icon}} fa-lg"></i>
                {{>customLabel.text}}
            </div>
            <div class="flag-label" as-data-style="{{if customLabel.color}}border: 1em solid #{{>customLabel.color}}{{/if}}"></div>
            <div class="flag-edge"></div>
        </div>
    {{/if}}
    <!-- Row containing logo, rating, main info and order button. -->
    <div class="row-item row-padding">
        <div class="col-xs-6 col-sm-2 col-md-2 col-lg-2 text-center no-padding small-padding-xs">
            <div class="as-logo-container-mobile">
                <a href="{{>trackingUrl}}" class="as-link" target="_blank" rel="nofollow">
                    <img src="" as-data-src="{{>imageUrl}}" class="img-responsive logo-img as-lazy" />
                </a>
            </div>
            {{if ~showRating() == true}}
                <input type="rating" class="rating" value="{{>5*rating/100}}">
            {{/if}}   
        </div>
        <div class="col-sm-8 col-md-8 col-lg-8 hidden-xs text-center margin-top">
            <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 no-padding">
                <span class="font-large font-bold display-block black min-height-22">
                    {{>~printInterval(minPersons, maxPersons, null, true, true)}}
                    <i class="fa fa-user align-baseline"></i>
                </span>
                <span class="as-small">
                    {{>~getTranslation('numberOfPersons')}}
                </span>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 border-left no-padding">
                <span class="font-large font-bold display-block black min-height-22">
                    {{>~printInterval(minDaysPerWeek, maxDaysPerWeek, null, true, true)}}
                    <i class="fa fa-cutlery align-baseline"></i>
                </span>
                <span class="as-small">
                    {{>~getTranslation('daysPerWeek')}}
                </span>
            </div>
            <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 border-left no-padding">
                <span class="font-large font-bold display-block green min-height-22">
                    <span class="font-small">{{>~getTranslation('from')}}</span>
                    {{>~printInterval(minPricePerMeal, null, null, true, true, true)}}
                    <span class="font-caps">{{>~getTranslation('currency')}}</span>
                </span>                
                <span class="as-small">{{>~getTranslation('perMeal')}}</span>
            </div>            
        </div>
        <div class="col-xs-6 col-sm-2 col-md-2 col-lg-2 text-center margin-top no-padding padding-left-xs">
            <div class="hidden-sm hidden-md hidden-lg margin-bottom-5">
                <span class="font-large font-bold display-block green">
                    <span class="font-small">{{>~getTranslation('from')}}</span>
                    {{>~printInterval(minPricePerMeal, null, null, true, true, true)}}
                    <span class="font-caps">{{>~getTranslation('currency')}}</span>
                </span>
                <span class="as-small">{{>~getTranslation('perMeal')}}</span>
            </div>
            <a href="{{>trackingUrl}}" class="btn btn-cta btn-block btn-max-width" target="_blank" rel="nofollow">
                {{>~getTranslation('goToProvider')}}
            </a>
            {{if ~getCountryCode() === 'DK' || ~getCountryCode() === 'NO'}}
                <div class=text-center><span class="as-small as-color-black">{{>~getTranslation('advertisement')}}</span></div>
            {{/if}}
        </div>
    </div>

    <!-- Row containing key info that's only visible on mobile. -->
    <div class="row-item hidden-sm hidden-md hidden-lg row-padding">
        <div class="col-xs-12 text-center border-top small-padding-xs">
            <div class="col-xs-6 margin-top small-padding-xs">
                <span class="font-large font-bold display-block black min-height-22">
                    {{>~printInterval(minPersons, maxPersons, null, true, true)}}
                    <i class="fa fa-user align-baseline"></i>
                </span>
                <span class="as-small">
                    {{>~getTranslation('numberOfPersons')}}
                </span>
            </div>
            <div class="col-xs-6 margin-top small-padding-xs border-left">
                <span class="font-large font-bold display-block black min-height-22">
                    {{>~printInterval(minDaysPerWeek, maxDaysPerWeek, null, true, true)}}
                    <i class="fa fa-cutlery align-baseline"></i>
                </span>
                <span class="as-small">
                    {{>~getTranslation('daysPerWeek')}}
                </span>
            </div>
        </div>
    </div>

    <!-- Row containing benefites. -->
    <div class="row-item hidden-xs row-padding">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center border-top small-padding-xs">
            {{if ~isValid(benefit1)}}
                <div class="as-bonus-label as-bonus-label-blue as-bonus-label-text margin-top">{{>benefit1}}</div>
            {{/if}}
            {{if ~isValid(benefit2)}}
                <div class="as-bonus-label as-bonus-label-blue as-bonus-label-text margin-top">{{>benefit2}}</div>
            {{/if}}
            {{if ~isValid(benefit3)}}
                <div class="as-bonus-label as-bonus-label-blue as-bonus-label-text margin-top">{{>benefit3}}</div>
            {{/if}}
            {{if ~isValid(benefit4)}}
                <div class="as-bonus-label as-bonus-label-blue as-bonus-label-text margin-top">{{>benefit4}}</div>
            {{/if}}
            {{if ~isValid(benefit5)}}
                <div class="as-bonus-label as-bonus-label-blue as-bonus-label-text margin-top">{{>benefit5}}</div>
            {{/if}}
        </div>        
    </div>

    <!-- Row containing promotion -->
    <div class="row-item row-item-block row-padding-no-bottom">
        <div class="hr-divider"></div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center margin-top small-padding-xs">
            {{if ~isValid(promotion)}}
                <div class="as-bonus-label as-bonus-label-yellow as-bonus-label-text font-bold wrap">{{>promotion}}</div>
            {{/if}}
        </div>
    </div>
</div>