{% from "/macros/rating.html" import rating %}
{% from "/macros/profile-image.html" import productImageLarge %}
{% from "/macros/simple-tooltip.html" import simpleTooltip %}

{% macro listingItemsRow(listing) %}
    <div class="listing-items-row">
    {% for app in listing.items %}
    <div data-id="{{ app.id }}" data-component="ListingRow" data-url="{{ app.url }}" class="listing-row">
        <div class="listing-row-image">
            <p aria-hidden="true" role="presentation">
                {{ productImageLarge(app.iconUrl, app.url, app.productRibbon) }}
            </p>
            {{ rating(app.rating) }}
        </div>
        <div class="listing-row-content js-row-content">
            <a class="listing-row-content-title js-title--link" href="{{ app.url }}">{{ app.name }}</a>
            <span class="js-badges-container">
                <span class="listing-row-badges">
                    {% for badge in app.badges %}
                    <span class="badge badge--{{ badge.type }}">{{ badge.label }}</span>
                    {% endfor %}
                </span>
            </span>
            <h4 class="title__small">{{ app.blurb }}</h4>
            <p class="listing-description">
                {{ app.overview }}
                <a class="more" href="{{ app.url }}">{{ listing.i18n.learnMore }}</a>
            </p>
            <div class="merchandising-badges">
                {% for badge in app.merchandisingBadges %}
                <div class="merchandising-badges-item">
                    <img src="{{ badge.image }}" alt="{{ badge.name }}" />
                </div>
                {% endfor %}
            </div>
        </div>
        <menu class="listing-row-toolbar">
            <div class="stat listing-row-price js-tile-pricing-container">
                <div class="caption">{{ app.startingPrice.priceCaption }}</div>
                <div class="js-listing-item-price">
                    <div class="price--value" title="{{ app.startingPrice.formattedPrice }}">{{ app.startingPrice.formattedPrice }}</div>
                    {% if app.startingPrice.frequency.shortLabel %}
                        <span class="price--unit">/{{ app.startingPrice.frequency.shortLabel | lower }}</span>
                    {% endif %}
                </div>
            </div>
            <div class="listing-row-actions">
                <a class="button button__primary button__long_i18n_text" href="{{ app.url }}">{{ listing.i18n.viewProfile }}</a>
                <label class="label selector__button button button__small adb-js-checkbox compare-label js-compare-label tooltip">
                    <span class="selector--input"><input type="checkbox" class="js-compare-checkbox" data-app-id="{{ app.id }}"></span>
                    <span class="selector--value">{{ listing.i18n.compare }}</span>
                    {{ simpleTooltip(listing.i18n.selectToCompare, "bottom") }}
                </label>
            </div>
        </menu>
    </div>
    {% endfor %}
    </div>
{% endmacro %}