{#
 # Frontend Package Pricing Display Template
 #
 # @package WC_Tier_Package_Prices
 # @var array packages
 # @var bool restrict_to_packages
 #}
<div class="wc-tpp-package-pricing-table{% if restrict_to_packages %} wc-tpp-restricted-mode{% endif %}">
    <h3>{{ 'Package Deals'|__('wc-tier-package-prices') }}</h3>
    {% if restrict_to_packages %}
        <p class="wc-tpp-restriction-notice">{{ 'Choose a package size below'|__('wc-tier-package-prices') }}</p>
    {% endif %}
    <div class="wc-tpp-packages">
        {% for index, package in packages %}
            {% set price_per_unit = package.qty > 0 ? package.price / package.qty : 0 %}
            <div class="wc-tpp-package{% if restrict_to_packages %} wc-tpp-package-selectable{% endif %}" data-qty="{{ package.qty|esc_attr }}" data-price="{{ package.price|esc_attr }}">
                <div class="wc-tpp-package-header">
                    {% if package.label is not empty %}
                        <h4>{{ package.label|esc_html }}</h4>
                    {% endif %}
                </div>
                <div class="wc-tpp-package-details">
                    <div class="wc-tpp-package-qty">
                        <strong>{{ package.qty|esc_html }}</strong> {{ 'pieces'|__('wc-tier-package-prices') }}
                    </div>
                    <div class="wc-tpp-package-price">
                        {{ wc_price(package.price)|raw }}
                    </div>
                    <div class="wc-tpp-package-unit-price">
                        {{ wc_price(price_per_unit)|raw }} {{ 'per unit'|__('wc-tier-package-prices') }}
                    </div>
                </div>
                <button type="button" class="button wc-tpp-select-package" data-package-index="{{ index|esc_attr }}">
                    {{ 'Select Package'|__('wc-tier-package-prices') }}
                </button>
            </div>
        {% endfor %}
    </div>
</div>