{# derafu_twig:templates/pages/components/block-hero.html.twig #}

{% extends 'layouts/default.html.twig' %}

{% block content %}
<twig:block-hero
    background="{{ base_path }}/img/block-hero.jpeg"
    title="Lorem ipsum"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    :buttons="[
        {
            text: 'Derafu ORG',
            url: 'https://www.derafu.org'
        }
    ]"
    align="left"

/>

<br/>

<twig:block-hero
    background="{{ base_path }}/img/block-hero.jpeg"
    contentBackground="true"
    title="Lorem ipsum"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    :buttons="[
        {
            text: 'Derafu ORG',
            url: 'https://www.derafu.org'
        }
    ]"
    align="left"

/>

<br/>

<twig:block-hero
    background="{{ base_path }}/img/block-hero.jpeg"
    title="Lorem ipsum"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    :buttons="[
        {
            text: 'Derafu ORG',
            url: 'https://www.derafu.org'
        }
    ]"
    align="right"

/>

<br/>

{% for theme, name in themes %}
    <twig:block-hero
        title="Theme: {{ name }}"
        subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        :buttons="[
            {
                text: 'Derafu ORG',
                url: 'https://www.derafu.org'
            },
            {
                text: 'Example.com',
                url: 'https://www.example.com'
            }
        ]"

    />
    <br/>
{% endfor %}

{% set sizes = ['mini', 'small', 'medium', 'large', 'full'] %}
{% set theme_keys = themes|keys %}
{% for size in sizes %}
    {% set theme_key = theme_keys[loop.index0] %}
    <twig:block-hero
        size="{{ size }}"
        background="{{ base_path }}/img/block-hero.jpeg"
        title="Size: {{ size }} ({{ theme_keys[loop.index0] }})"
        subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        :buttons="[
            {
                text: 'Example.com',
                url: 'https://www.example.com'
            }
        ]"
        align="right"

    />
    <br/>
{% endfor %}

{% endblock %}