{% import '/front/components/components.html.twig' as helper %}

<div id="aboutUs" data-id="y-view" class="d-none y-view" data-is-about-us="true">

    {# Quote #}
    {% include '/front/quote/_quote.html.twig' %}

    {# 3D Carousel #}
    <div class="row nav d-flex justify-content-center">
        <div class="col">


            <div class="scene">
                <div class="carousel">

                    <input class="cells-range d-none"
                           type="range"
                           min="3"
                           max="{{ aboutUsCarouselCellCount }}"
                           value="{{ aboutUsCarouselCellCount }}"/>

                    {% set aboutUsCellData = {
                        id: 1,
                        index: 1,
                        title: 'About Us',
                        theme: '1.jpg',
                        data: aboutUs
                    } %}
                    {% include '/front/aboutUs/partials/_aboutUsCell.html.twig' with { aboutUsCellData: aboutUsCellData} %}

                    {% set contactUsCellData = {
                        id: 2,
                        index: 2,
                        title: 'Contact Us',
                        theme: '2.jpg',
                    } %}
                    {% include '/front/aboutUs/partials/_contactUsCell.html.twig' with { contactUsCellData: contactUsCellData} %}

                    {% set aboutUsCarouselCellIndex = 2 %}
                    {% for data in teamMembers %}
                        {% set aboutUsCarouselCellIndex = aboutUsCarouselCellIndex + 1 %}
                        {% include '/front/aboutUs/partials/_teamMemberCell.html.twig' with {
                            aboutUsCarouselCellIndex: aboutUsCarouselCellIndex
                        } %}
                    {% endfor %}


                </div>
            </div>

        </div>
    </div>


    {# # ------------------------------------------
     ## ----- Carousel  Rotators
     ## ----------------------------------------- # #}
    <div class="row mt-4">
        <div class="col text-center d-flex justify-content-center">
            <div class="w-25 d-flex justify-content-center">

                {# Rotate to Left #}
                <button type="button"
                        title="Rotate to Left"
                        class="btn btn-carousel-paginator previous-button m-2">
                    <i class="fa fa-chevron-left"></i>
                </button>

                {# Dropdown selector #}
                <div class="dropdown m-2 aboutUsCarouselMenu">
                    <button class="btn dropdown-toggle"
                            type="button"
                            id="btnOpenAboutUsCarouselMenu"
                            data-bs-toggle="dropdown"
                            aria-expanded="false">
                        About Us
                    </button>
                    <ul class="dropdown-menu text-center" aria-labelledby="btnOpenAboutUsCarouselMenu">
                        <li>
                            <a class="dropdown-item aboutUsCarouselMenuLink"
                               data-cell-index="0"
                               data-cell-title="About Us">
                                About Us
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item aboutUsCarouselMenuLink"
                               data-cell-index="1"
                               data-cell-title="Contact Us">
                                Contact Us
                            </a>
                        </li>
                        {% set aboutUsDropDownIndex = 1 %}
                        {% for item in teamMembers %}
                            {% set aboutUsDropDownIndex = aboutUsDropDownIndex + 1 %}
                            <li>
                                <a class="dropdown-item aboutUsCarouselMenuLink"
                                   data-cell-index="{{ aboutUsDropDownIndex }}"
                                   data-cell-title="{{ item.getFullName }}">
                                    {{ item.getFullName }}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>

                {# Rotate to right #}
                <button type="button"
                        title="Rotate to Right"
                        class="btn btn-carousel-paginator next-button m-2">
                    <i class="fa fa-chevron-right"></i>
                </button>
            </div>

        </div>

    </div>

</div>