{% embed "system/embed/card/card-with-title.html.twig" with {contentSpacing: false} %}
    {% import "system/macro/card/card-heading.html.twig" as card_heading %}
    {% block header %}
        {{ card_heading.component({
            title: localized.headline.acknowledgement,
        }) }}
    {% endblock %}
    {% block content %}
        {% embed "system/embed/form-row.html.twig" %}
            {% block label %}
                <div class="bc-flex bc-items-center">
                    <span>Animate.css</span>
                </div>
            {% endblock %}

            {% block input %}
                <a class="brlbs-cmpnt-link brlbs-cmpnt-link-with-icon" href="https://animate.style/" rel="nofollow noopener noreferrer" target="_blank">
                    <span>https://animate.style/</span>
                    <span class="brlbs-cmpnt-external-link-icon"></span>
                </a>
            {% endblock %}
        {% endembed %}

        {% embed "system/embed/form-row.html.twig" %}
            {% block label %}
                <div class="bc-flex bc-items-center">
                    <span>Chart.js</span>
                </div>
            {% endblock %}

            {% block input %}
                <a class="brlbs-cmpnt-link brlbs-cmpnt-link-with-icon" href="https://www.chartjs.org/" rel="nofollow noopener noreferrer" target="_blank">
                    <span>https://www.chartjs.org/</span>
                    <span class="brlbs-cmpnt-external-link-icon"></span>
                </a>
            {% endblock %}
        {% endembed %}

        {% embed "system/embed/form-row.html.twig" %}
            {% block label %}
                <div class="bc-flex bc-items-center">
                    <span>GeoLite2 Geolocation Data</span>
                </div>
            {% endblock %}

            {% block input %}
                <span class="bc-italic">This product includes GeoLite2 data created by MaxMind, available from.</span>
                <a class="brlbs-cmpnt-link brlbs-cmpnt-link-with-icon" href="https://www.maxmind.com" rel="nofollow noopener noreferrer" target="_blank">
                    <span>https://www.maxmind.com</span>
                    <span class="brlbs-cmpnt-external-link-icon"></span>
                </a>
            {% endblock %}
        {% endembed %}

        {% embed "system/embed/form-row.html.twig" %}
            {% block label %}
                <div class="bc-flex bc-items-center">
                    <span>Maizzle</span>
                </div>
            {% endblock %}

            {% block input %}
                <a class="brlbs-cmpnt-link brlbs-cmpnt-link-with-icon" href="https://maizzle.com/" rel="nofollow noopener noreferrer" target="_blank">
                    <span>https://maizzle.com/</span>
                    <span class="brlbs-cmpnt-external-link-icon"></span>
                </a>
            {% endblock %}
        {% endembed %}

        {% embed "system/embed/form-row.html.twig" %}
            {% block label %}
                <div class="bc-flex bc-items-center">
                    <span>multi-select.js</span>
                </div>
            {% endblock %}

            {% block input %}
                <a class="brlbs-cmpnt-link brlbs-cmpnt-link-with-icon" href="https://github.com/lou/multi-select" rel="nofollow noopener noreferrer" target="_blank">
                    <span>https://github.com/lou/multi-select</span>
                    <span class="brlbs-cmpnt-external-link-icon"></span>
                </a>
            {% endblock %}
        {% endembed %}

        {% embed "system/embed/form-row.html.twig" %}
            {% block label %}
                <div class="bc-flex bc-items-center">
                    <span>Tailwind CSS</span>
                </div>
            {% endblock %}

            {% block input %}
                <a class="brlbs-cmpnt-link brlbs-cmpnt-link-with-icon" href="https://tailwindcss.com/" rel="nofollow noopener noreferrer" target="_blank">
                    <span>https://tailwindcss.com/</span>
                    <span class="brlbs-cmpnt-external-link-icon"></span>
                </a>
            {% endblock %}
        {% endembed %}

        {% embed "system/embed/form-row.html.twig" %}
            {% block label %}
                <div class="bc-flex bc-items-center">
                    <span>TinyColor</span>
                </div>
            {% endblock %}

            {% block input %}
                <a class="brlbs-cmpnt-link brlbs-cmpnt-link-with-icon" href="https://github.com/bgrins/TinyColor" rel="nofollow noopener noreferrer" target="_blank">
                    <span>https://github.com/bgrins/TinyColor</span>
                    <span class="brlbs-cmpnt-external-link-icon"></span>
                </a>
            {% endblock %}
        {% endembed %}

        {% embed "system/embed/form-row.html.twig" %}
            {% block label %}
                <div class="bc-flex bc-items-center">
                    <span>Twig</span>
                </div>
            {% endblock %}

            {% block input %}
                <a class="brlbs-cmpnt-link brlbs-cmpnt-link-with-icon" href="https://twig.symfony.com/" rel="nofollow noopener noreferrer" target="_blank">
                    <span>https://twig.symfony.com/</span>
                    <span class="brlbs-cmpnt-external-link-icon"></span>
                </a>
            {% endblock %}
        {% endembed %}

        {% embed "system/embed/form-row.html.twig" %}
            {% block label %}
                <div class="bc-flex bc-items-center">
                    <span>Vue.js</span>
                </div>
            {% endblock %}

            {% block input %}
                <a class="brlbs-cmpnt-link brlbs-cmpnt-link-with-icon" href="https://vuejs.org/" rel="nofollow noopener noreferrer" target="_blank">
                    <span>https://vuejs.org/</span>
                    <span class="brlbs-cmpnt-external-link-icon"></span>
                </a>
            {% endblock %}
        {% endembed %}
    {% endblock %}
{% endembed %}
