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

<div id="clients" data-id="y-view" class="d-none y-bg-gradient scroll-v" data-is-client="true">


    {# Heading #}
    <div class="row d-flex justify-content-around">
        <div class="col"></div>
        <div class="col text-center">
            <span class="view-header">Clients</span>
        </div>
        <div class="col text-end" style="padding-right: 20px;padding-top: 5px;">
            <span class="btn-close-view btn-close-view" title="Close">
                            <i class="fa fa-times"></i>
            </span>
        </div>
    </div>

    {# Rotators #}
    <div class="row">
        <div class="col text-center">
            <button type="button"
                    title="Rotate to left"
                    class="btn btn-carousel-paginator previous-button m-2">
                <i class="fa fa-arrow-left"></i>
            </button>
            <button type="button"
                    title="Rotate to right"
                    class="btn btn-carousel-paginator next-button m-2">
                <i class="fa fa-arrow-right"></i>
            </button>
        </div>
    </div>


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

            {% set images = [
                '/img/front/apple.png',
                '/img/front/microsoft.png',
                '/img/front/tesla.png',
                '/img/front/apple.png',
                '/img/front/microsoft.png',
                '/img/front/tesla.png',
                '/img/front/apple.png',
                '/img/front/microsoft.png',
                '/img/front/tesla.png',
                '/img/front/apple.png',
                '/img/front/microsoft.png',
                '/img/front/tesla.png',
                '/img/front/apple.png',
                '/img/front/microsoft.png',
                '/img/front/tesla.png',
            ] %}

            <div class="scene-container">
                <div class="scene">
                    <div class="carousel">
                        {% for img in images %}
                            <div class="carousel__cell rounded-3 p-3">
                                <div class="row">
                                    <div class="col-4 text-start">
                                        <div class="row">
                                            <div class="col-12 m-1">
                                                <img src="{{ asset(img) }}" height="250" width="250">
                                            </div>
                                            <div class="col-12 m-1">
                                                <a href="https://www.tesla.com/">
                                                    <strong class="y-primary-color">
                                                        <i class="fa fa-external-link"></i>
                                                    </strong>
                                                    <span>https://www.tesla.com/</span>
                                                </a>
                                            </div>
                                            <div class="col-12 m-1">
                                                <strong class="y-primary-color">
                                                    <i class="fa fa-envelope"></i></strong>
                                                <span>email@example.com</span>
                                            </div>
                                            <div class="col-12 m-1">
                                                <strong class="y-primary-color">
                                                    <i class="fa fa-phone"></i>
                                                </strong>
                                                <span>+1 (123) 456-0789</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-8">
                                        <div class="row text-start">
                                            <div class="col-12">
                                                <h3 class="y-primary-color">Company Name</h3>
                                                <hr>
                                            </div>

                                            <div class="col-12">
                                                <strong class="y-primary-color y-font-20">Industry:</strong>
                                                <span>Food</span>
                                            </div>
                                            <div class="col-12">
                                                <strong class="y-primary-color y-font-20">Overview:</strong>
                                                <small>Tesla, Inc. is an American multinational automotive and clean
                                                    energy company headquartered in Austin, Texas. Tesla designs and
                                                    manufactures electric vehicles, battery energy storage from home to
                                                    grid-scale, solar panels and solar roof tiles, and related products
                                                    and services.
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>