{% load static i18n cms_tags rfc_5646_locale thumbnail %}
<div class="hero-intro{% if instance.logo %} hero-intro--with-logo{% endif %}"
    {% if instance.background_image.url %} style="background-image: url('{% thumbnail instance.background_image 1400x800 crop=',0' %}');"{% endif %}
    >
    <div class="hero-intro__inner">
        <div class="hero-intro__body">
            <div class="hero-intro__content">
                {{ instance.content|safe }}

                {% if instance.logo %}
                    <img src="{% thumbnail instance.logo 500x180 %}" class="hero-intro__logo" alt="{{ instance.logo_alt_text }}">
                {% endif %}
            </div>

            <div class="hero-intro__search">
                <p class="hero-intro__search-title">
                    {% trans "Search in our courses" %}
                </p>

                <div class="richie-react richie-react--root-search-suggest-field"
                    data-props='{"courseSearchPageUrl": "{% page_url 'courses' %}"}'></div>

                <a class="hero-intro__cta" href="{% page_url 'courses' %}">
                    {% trans "Explore our catalog" %}
                </a>
            </div>
        </div>
    </div>
</div>
