{% load cms_tags frontend cms_component %}

{# Declare component - template tags are evaluated at project startup and will render empty #}
{% cms_component "AutoHeroWithSlots" name=_("My Slotted Hero Auto Component") %}
{% field "title" forms.CharField required=True %}
{% field "slogan" forms.CharField required=True widget=forms.Textarea %}
{% field "hero_image" ImageFormField required=True help_text=_("At least 1024px wide image") %}

{# Actual template - when rendering declared fields are available in the context #}
<section class="bg-white dark:bg-gray-900">
    <div class="grid max-w-screen-xl px-4 py-8 mx-auto lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12">
        <div class="mr-auto place-self-center lg:col-span-7">
            <h1 class="max-w-2xl mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl xl:text-6xl dark:text-white">
                {% inline_field "title" %}
            </h1>
            <p class="max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400">
                {{ slogan }}
            </p>
                {% childplugins instance "buttons" _("Buttons") %}
                    Add buttons here
                {% endchildplugins %}
        </div>
        <div class="hidden lg:mt-0 lg:col-span-5 lg:flex">
            <img src="{{ hero_image.url }}">
        </div>
    </div>
</section>