<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, main content and CTA button -->
    <div class="row-item">
        <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
            <div class="as-logo-container">
                <a href="{{>trackingUrl}}" class="as-link" target="_blank" rel="nofollow">
                    <img src="" as-data-src="{{>imageUrl}}" class="img-responsive loan-img as-lazy" />
                </a>
            </div>
			{{if ~showRating() == true}}
				<input type="rating" class="rating" value="{{>5*rating/100}}">
			{{/if}}   
        </div>
        <div class="col-xs-12 col-sm-7 col-md-8 col-lg-8 text-center margin-top">
            <div class="col-xs-6 col-md-3">
                <span class="as-small">
                    {{>~getTranslation('pricePerMonth')}}
                </span>
                <span class="as-highlight">
                    {{if ~isValidNumber(pricePerMonth)}}
                        {{>~printInterval(pricePerMonth, null, null, true, true)}} <small>{{>~getTranslation('currency')}}</small>
                    {{else}}
                        -
                    {{/if}}
                </span>
            </div>
            <div class="col-xs-6 col-md-3">
                <span class="as-small">
                    {{>~getTranslation('startupFee')}}
                </span>
                <span class="as-highlight">
                    {{if ~isValidNumber(startUpFee)}}
                        {{>~printInterval(startUpFee, null, null, true, true)}} <small>{{>~getTranslation('currency')}}</small>
                    {{else}}
                        -
                    {{/if}}
                </span>
            </div>
            <div class="col-xs-6 col-md-3">
                <span class="as-small">
                    {{>~getTranslation('serverSpace')}}
                </span>
                <span class="as-highlight">
                    {{if ~isValidNumber(serverSpaceGB)}}
                        {{>~printInterval(serverSpaceGB, null, null, true, true)}} <small>GB</small>
                    {{else}}
                        -
                    {{/if}}
                </span>
            </div>  
            <div class="col-xs-6 col-md-3">
                <span class="as-small">
                    {{>~getTranslation('backup')}}
                </span>
                <span class="as-highlight">
                    {{if ~isValid(backup)}}
                        {{>backup}}
                    {{else}}
                        -
                    {{/if}}                    
                </span>
            </div>
        </div>
        <div class="col-xs-12 col-sm-2 col-md-2 col-lg-2 margin-top">
            <a href="{{>trackingUrl}}" class="btn btn-cta btn-block btn-max-width-card margin-top-25-sm" target="_blank" rel="nofollow">
                {{>~getTranslation('order')}}
            </a>
            {{if ~getCountryCode() === 'DK' || ~getCountryCode() === 'NO'}}
                <div class=text-center><span class="as-small as-color-black">{{>~getTranslation('advertisement')}}</span></div>
            {{/if}}
        </div>
    </div>

    <div class="row-item">
        <div class="col-xs-12 col-sm-3 col-md-2 col-lg-2 text-center small-padding-xs margin-top-15">
            <div class="as-read-more nowrap no-margin light-hover" style="position: static;">
                <a class="as-small move-up-3px" data-open="{{>~getTranslation('showMore')}}" data-close="{{>~getTranslation('showLess')}}">{{>~getTranslation('showMore')}}</a>
                <div class="as-read-more-icon margin-left-xs">
                    <i class="fa fa-angle-down fa-lg"></i>
                </div>                
            </div>
        </div>
    </div>

    <div class="row-item as-show-more-content row-padding">  
        <div class="hr-divider"></div>              
        <div class="col-xs-12 col-md-push-2 col-md-8 text-center">
            {{if ~isValid(pricePerYear)}}
            <div class="more-col col-xs-6 col-sm-3">
                <div class="as-data-type">{{>~getTranslation('pricePerYear')}}</div>
                <div class="as-data-c">{{>~printInterval(pricePerYear, null, ~getTranslation('currency'), true, true, true)}}</div>
            </div>
            {{/if}}
            {{if ~printOrGetBoolean(unlimitedTraffic, true) === false && ~isValid(amountOfTrafficGB)}}
            <div class="more-col col-xs-6 col-sm-3">
                <div class="as-data-type">{{>~getTranslation('amountOfTrafficGB')}}</div>
                <div class="as-data-c">{{>amountOfTrafficGB }} GB</div>
            </div>
            {{/if}}
            <div class="more-col col-xs-6 col-sm-3">
                <div class="as-data-type">{{>~getTranslation('unlimitedTraffic')}}</div>
                <div class="as-data-c">{{>~printOrGetBoolean(unlimitedTraffic)}}</div>
            </div>
            {{if ~printOrGetBoolean(unlimitedAmountOfDomains, true) === false && ~isValid(amountOfDomainsIncluded)}}
            <div class="more-col col-xs-6 col-sm-3">
                <div class="as-data-type">{{>~getTranslation('domains')}}</div>
                <div class="as-data-c">{{>amountOfDomainsIncluded}}</div>
            </div>
            {{/if}}
            <div class="more-col col-xs-6 col-sm-3">
                <div class="as-data-type">{{>~getTranslation('oneClickInstall')}}</div>
                <div class="as-data-c">{{>~printOrGetBoolean(oneClickInstall)}}</div>
            </div>
            <div class="more-col col-xs-6 col-sm-3">
                <div class="as-data-type">{{>~getTranslation('unlimitedAmountOfDomains')}}</div>
                <div class="as-data-c">{{>~printOrGetBoolean(unlimitedAmountOfDomains)}}</div>
            </div>
            <div class="more-col col-xs-6 col-sm-3">
                <div class="as-data-type">{{>~getTranslation('support')}}</div>
                <div class="as-data-c">
                    {{if ~isValid(Support)}}
                        {{>Support}}
                    {{else}}
                        -
                    {{/if}}
                </div>
            </div>
            <div class="more-col col-xs-6 col-sm-3">
                <div class="as-data-type">{{>~getTranslation('emailAddresses')}}</div>
                <div class="as-data-c">
                    {{if ~isValidNumber(amountOfMailAccounts)}}
                        {{>amountOfMailAccounts}}
                    {{else}}
                        -
                    {{/if}}
                </div>
            </div>
        </div>
    </div>
</div>