{% extends 'base.html.twig' %}

{% block title %}{{ 'home.title'|trans({}, 'meta') }}{% endblock %}

{% block meta %}
    {{ include('partials/seo.html.twig', {
        title_key: 'home.title',
        description_key: 'home.description',
        robots: 'index,follow'
    }) }}
{% endblock %}

{% block page_hero %}
    {% set hero_image_path %}{% block hero_image %}{{ viti_theme_asset('images/headers/header-home.jpg') }}{% endblock %}{% endset %}
    {% include 'partials/_hero.html.twig' with {
        page_key: 'home',
        target_id: 'home',
        image: 'images/headers/header-home.jpg',
        image_path: hero_image_path|trim,
        image_alt: 'background-header.home'
    } %}
{% endblock %}

{% block main %}
    <section id="home" class="theme-page theme-home-page">
        <div class="theme-container">
            <div class="theme-home-grid">
                <div class="theme-home-intro theme-home-cell theme-home-cell--full">
                    <p class="theme-intro">{{ 'home.subtitle'|trans|raw }}</p>
                </div>

                <div class="theme-home-row">
                <div class="theme-home-title-panel theme-home-cell theme-home-cell--5">
                    <h3 class="theme-history-title">{{ 'home.title_1'|trans }}</h3>
                </div>
                <div class="theme-home-image-panel theme-home-cell theme-home-cell--7">
                    {% include 'partials/_home_picture.html.twig' with {
                        image: 'images/home/history-1.jpg',
                        alt: 'home.title_1'|trans,
                        variant: 'panel'
                    } only %}
                </div>
                <div class="theme-split-text theme-home-cell theme-home-cell--full">
                    {{ 'home.text_1'|trans|raw }}
                </div>
                <div class="theme-old-pictures theme-home-cell theme-home-cell--full">
                    <twig:Image mapping="public" class="theme-landscape" alt="{{ 'home.photo_1'|trans({}, 'img') }}" lazy="{{ false }}" responsive="{{ false }}" path="{{ viti_theme_asset('images/home/photo-1.jpg') }}" imageWidth="1913" imageHeight="1312" />
                    <twig:Image mapping="public" class="theme-landscape" alt="{{ 'home.photo_2'|trans({}, 'img') }}" lazy="{{ false }}" responsive="{{ false }}" path="{{ viti_theme_asset('images/home/photo-2.jpg') }}" imageWidth="794" imageHeight="498" />
                    <twig:Image mapping="public" class="theme-portrait" alt="{{ 'home.photo_3'|trans({}, 'img') }}" lazy="{{ false }}" responsive="{{ false }}" path="{{ viti_theme_asset('images/home/photo-3.jpg') }}" imageWidth="617" imageHeight="940" />
                    <twig:Image mapping="public" class="theme-landscape theme-landscape-max" alt="{{ 'home.photo_4'|trans({}, 'img') }}" lazy="{{ false }}" responsive="{{ false }}" path="{{ viti_theme_asset('images/home/photo-4.jpg') }}" imageWidth="934" imageHeight="615" />
                </div>
                <div class="theme-home-wide-image theme-home-cell theme-home-cell--full">
                    {% include 'partials/_home_picture.html.twig' with {
                        image: 'images/home/history-2.jpg',
                        alt: 'home.title_1'|trans,
                        variant: 'wide'
                    } only %}
                </div>
                </div>

                <div class="theme-home-row">
                <div class="theme-home-image-panel theme-home-image-panel--left theme-home-cell theme-home-cell--7 theme-home-cell--left">
                    {% include 'partials/_home_picture.html.twig' with {
                        image: 'images/home/history-3.jpg',
                        alt: 'home.title_2'|trans,
                        variant: 'panel'
                    } only %}
                </div>
                <div class="theme-home-title-panel theme-home-title-panel--right theme-home-cell theme-home-cell--5 theme-home-cell--right">
                    <h3 class="theme-history-title theme-title-right">{{ 'home.title_2'|trans }}</h3>
                </div>
                <div class="theme-split-text theme-home-cell theme-home-cell--full">
                    {{ 'home.text_2'|trans|raw }}
                </div>
                <div class="theme-home-wide-image theme-home-cell theme-home-cell--full">
                    {% include 'partials/_home_picture.html.twig' with {
                        image: 'images/home/history-4.jpg',
                        alt: 'home.title_2'|trans,
                        variant: 'wide',
                        top: true
                    } only %}
                </div>
                </div>

                <div class="theme-home-row">
                <div class="theme-home-title-panel theme-home-cell theme-home-cell--5">
                    <h3 class="theme-history-title">{{ 'home.title_3'|trans }}</h3>
                </div>
                <div class="theme-home-image-panel theme-home-cell theme-home-cell--7">
                    {% include 'partials/_home_picture.html.twig' with {
                        image: 'images/home/history-5.jpg',
                        alt: 'home.title_3'|trans,
                        variant: 'panel'
                    } only %}
                </div>
                <div class="theme-split-text theme-home-cell theme-home-cell--full">
                    {{ 'home.text_3'|trans|raw }}
                </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
