{% set options = {
    bg: true,
    breadcrumb: true,
    titleRaw: false,
    description: false,
    descriptionRaw: false,
    skip: false,
    img: true,
    watchButton: true,
    linkButton: false,
    linkButtonText: "",
    linkSection: false,
    isBlogDetail: false,
    projectSearch: false,
    blogSearch: false,
    referenceSearch: false
}|merge(options) %}

<div class="intro">
    {% if options.bg %}
        <div class="intro-bg"></div>
    {% endif %}
    <div class="intro-content-wrapper">
        <div class="intro-top">
            <div class="text-container fit-size">
                {% if (options.breadcrumb ) and ((inner is not defined or inner)) %}
                    {% include "components/_breadcrumb.html.twig" %}
                {% endif %}
                {% if not options.titleRaw %}
                    <h1 class="big-title">{{ options.title }}</h1>
                {% else %}
                    {{ options.title|raw }}
                {% endif %}
                {% if options.description %}
                    {% if not options.descriptionRaw %}
                        <span>{{ options.description }}</span>
                    {% else %}
                        {{ options.description|raw }}
                    {% endif %}
                {% endif %}
            </div>
            {% if options.skip %}
                <div class="intro-link-section">
                        {% if (options.img) and (options.watchButton) %}
                            {#<div class="watch-button standart-button border-button big-button arrow-anim arrow-dark"></div>#}
                        {% endif %}
                        {% if options.skip %}
                            <div class="skip-button black-button big-button" data-skip="{{ options.skip }}"><i class="arrow-down"></i></div>
                        {% endif %}
                        {% if options.linkButton %}
                            <a href="{{options.linkButton}}" class="standart-button black-button big-button arrow-anim">{{options.linkButtonText}}</a>
                        {% endif %}
                </div>
            {% endif %}
            {% if options.linkSection %}{{options.linkSection|raw}}{% endif %}
            {% if options.isBlogDetail %}
                <div class="intro-blog-info">
                    <div class="tag-container">
                        {% for tagId in options.blogTags['content'] %}
                            {% set tag = getBlogTag(tagId, app.request) %}
                            <div class="tag blog-tag">{{tag}}</div>
                        {% endfor %}
                    </div>
                        {% if blog.createdAt is defined %}
                            {% set date = blog.createdAt|date("d F Y")|split(' ') %}
                            {% set date = date[0] ~ " " ~ date[1]|lower|trans ~ " " ~ date[2] %}
                            <div class="blog-date">{{date}}</div>
                        {% endif %}                    <div class="share-container">
                        <span>{{"share"|trans|capitalize}}</span>
                        <div class="icon colored share-icon"></div>
                        <div class="share-content">
                            <div href="https://www.facebook.com/sharer/sharer.php?u={{url}}" class="icon colored facebook-icon"></div>
                            <a href="https://www.linkedin.com/sharing/share-offsite/?url={{url}}" target="_blank" class="icon colored linkedin-icon"></a>
                            <div class="icon colored link-icon"></div>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
        {% if options.img %}
            <div class="intro-img">
                {% if options.projectSearch %}{% include 'components/_project-search.html.twig' %}{% endif %}
                {% if options.blogSearch %}{% include 'components/_blog-search.html.twig' %}{% endif %}
            </div>
        {% endif %}
        {% if options.referenceSearch %}{% include 'components/_reference-search.html.twig' %}{% endif %}
    </div>
</div>