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

{% set pageTitle = projectName|title %}

{% block importScripts %}
    {{ importmap('project') }}
{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/project-style.css') }}">
    <style>
        :root{
            --background: {{ content.backgroundColorCode }};
            --main-color: {{ content.colorCode }};
        }
        .nav-project-logo{
            background-image: url({{asset('img/project/'~projectName~'/header-logo.png')}});
        }
    </style>
{% endblock %}

{% block body %}
    <div id="smooth-wrapper">
        {% include 'project/_header.html.twig' %}
        <div id="smooth-content">
            <section class="main-section" data-name="{{projectName}}">

                {% include "components/_intro.html.twig" with {options: {
                    title: title,
                    description: description,
                    img: false,
                    skip: false,
                    linkButton: "https://" ~ content.url,
                    linkButtonText: content.url,
                }} %}

                <div class="featured-slider-wrapper">
                    <div class="featured-slider owl-carousel" data-carousel="{'stagePadding':0,'loop':true,'margin':20,'nav':false,'autoplay':true,'slideTransition':'linear','autoplayTimeout':4000,'autoplaySpeed':4000,'autoplayHoverPause':true,'mouseDrag':false,'touchDrag':false,'responsive': {'0': {'items': 1}, '1240': {'items': 2}, '1900': {'items': 3}}}">
                        {% for featuredItem in content.featuredSlider["content"][locale] %}
                            <div class="featured-item">
                                <i class="icon {{projectName}}-icon"></i>
                                <span class="featured-title">{{featuredItem[0]}}</span>
                                <span>—</span>
                                <span>{{featuredItem[1]}}</span>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                {% for section in content.content["content"] %}
                    <div class="section-wrapper project-about-wrapper">
                        <div class="content-section project-about">
                            <div class="content-title-wrapper">
                                <span class="content-title">{{section.contentTitle[locale]}}</span>
                            </div>
                            <div class="content-inner">
                                {% set cont = [] %}
                                {% if section.leftSide is defined %}{% set cont = cont|merge([section.leftSide]) %}{% endif %}
                                {% if section.rightSide is defined %}{% set cont = cont|merge([section.rightSide]) %}{% endif %}
                                {% for side in cont %}
                                    {% set list = [] %}    
                                    {% if side.type == "textContainer" %}
                                        {% if side.content.list is defined %}{% set list = side.content.list %}{% endif %}
                                        {% include "components/_text-container.html.twig" with {content: {
                                            "title": side.content.title[locale],
                                            "description": side.content.description[locale],
                                            "list": list,
                                            "isDark": (side.content.isDark is defined)? side.content.isDark : false,
                                            "maxWidth": (side.content.maxWidth is defined)? side.content.maxWidth : null,
                                            "multipleLists": (side.content.multipleLists is defined)? side.content.multipleLists : null
                                        }} %}
                                    {% elseif side.type == "ddboxContainer" %}
                                        {% set boxes = [] %}
                                        {% for box in side.content.boxes %}
                                            {% set boxes = boxes|merge([{
                                                "title": box.title,
                                                "content": box.content,
                                                "link": box.link
                                            }]) %}
                                        {% endfor %}
                                        {% include "components/_ddbox-container.html.twig" with {ddboxItems: boxes} %}
                                    {% elseif side.type == "image" %}
                                        <div class="content-img"><img src="{{asset('img/project/'~projectName~'/'~side.content.src)}}" alt=""></div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </section>
            {% include "_footer.html.twig" %}
        </div>
    </div>
{% endblock %}