<div
    class="pluginPromo"
    vue-entry="CoreHome.ContentBlock"
    content-title="{{ title }}"
    image-url="plugins/ProfessionalServices/images/{{ imageName|default('ad-' ~ plugin.name ~ '.png')|lower }}"
    image-alt-text="{{ 'ProfessionalServices_AltTextPreviewImageFor'|translate(plugin.displayName) }}"
>
    <div class="promo-content">
        {% if listOfFeatures|default([])|length %}
            <div class="promo-features">
                <ul>
                    {% for feature in listOfFeatures %}
                        <li><span class="promo-icon icon-ok"></span>{{ feature|raw }}</li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}
    </div>
    <div class="promo-actions">
        <a class="btn" href="?module=Marketplace&action=overview#?showPlugin={{ plugin.name }}">
            {{ 'ProfessionalServices_CTAStartFreeTrial'|translate }}
        </a>
        <a class="learn-more" href="?module=Marketplace&action=overview#?showPlugin={{ plugin.name }}" aria-label="{{ 'ProfessionalServices_CTALearnMore'|translate(plugin.displayName) }}">
            {{ 'CoreAdminHome_LearnMore'|translate }}
        </a>
    </div>
    {% if userCanDismiss %}
        <div class="promo-dismiss">
            {{ 'ProfessionalServices_DismissPromoWidget'|translate('<a href="#" vue-directive="ProfessionalServices.DismissPromoWidget" vue-directive-value="{&quot;widgetName&quot;:&quot;' ~ widgetName ~ '&quot;}">', '</a>')|raw }}
        </div>
    {% endif %}
</div>