<?php $__env->startSection('head'); ?>
    <link rel="stylesheet" href="/media/js/vendor/slick/slick.css">
    <link rel="stylesheet" href="/media/js/vendor/slick/slick-theme.css">
<?php $__env->stopSection(); ?>
<?php
    $members = \App\Repositories\TeamRepository::getData();
?>
<section class="app-section team">
    <div class="container">
        <div class="team__inner">
            <header class="app-section__header">
                <h1><?php echo e($block->translatedInput('title')); ?></h1>
            </header>
            <div class="team-slider js-team-slider">
                <?php $__currentLoopData = $members; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $member): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="team-slider__item">
                    <div class="team-slider__item-inner">
                        <div class="team-slider__item-description">
                            <blockquote class="blockquote">
                                <p class="blockquote__text">
                                    <?php echo $member->description; ?>

                                </p>
                                <div class="blockquote__author"><?php echo e($member->title); ?></div>
                                <div class="blockquote__author-position"><?php echo e($member->job_place); ?></div>
                            </blockquote>
                        </div>
                        <div class="team-slider__item-image">
                            <img src="<?php echo $member->image('cover', 'desktop', ['w' => '480', 'h' => '570', 'q' => 95]); ?>" alt="<?php echo e($member->title); ?>">
                        </div>
                    </div>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
            <div class="team-slider-nav js-team-slider-nav">
                <?php $__currentLoopData = $members; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $member): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="team-slider-nav__item">
                    <div class="team-slider-nav__item-inner">
                        <div class="team-slider-nav__item-marker"></div>
                        <div class="team-slider-nav__item-name"></div>
                    </div>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
            <div class="team-slider-arrow btn-arrow btn-arrow--left as-prev-btn">
                <div class="btn-arrow__arrow">
                    <span></span>
                </div>
            </div>
            <div class="team-slider-arrow btn-arrow as-next-btn">
                <div class="btn-arrow__arrow">
                    <span></span>
                </div>
            </div>
        </div>
    </div>
</section>

<script type="text/javascript">

    // Инициализация слайдера Team
    var slickSlider = $('.js-team-slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: false,
        fade: true,
        arrows: true,
        prevArrow: '.team-slider-arrow.as-prev-btn',
        nextArrow: '.team-slider-arrow.as-next-btn',
        autoplaySpeed: 5000,
        asNavFor: '.js-team-slider-nav',
        adaptiveHeight: true,
        mobileFirst: true,
        responsive: [
            {
                breakpoint: 320,
                settings: {
                    autoplay: false
                }
            },
            {
                breakpoint: 768,
                settings: {
                    autoplay: true
                }
            }
        ]
    });

    document.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowLeft') {
            slickSlider.slick('slickPrev');
        } else if (e.key === 'ArrowRight') {
            slickSlider.slick('slickNext');
        }
    })

    // Инициализация доп. навигации для слайдера Team
    $('.js-team-slider-nav').slick({
        slidesToShow: $('.team-slider-nav__item').length,
        slidesToScroll: 1,
        arrows: false,
        dots: false,
        fade: false,
        autoplay: false,
        asNavFor: '.js-team-slider',
        centerMode: true,
        focusOnSelect: true,
    });

</script>
<?php /**PATH /var/www/quadcode-jobs/resources/views/site/blocks/team.blade.php ENDPATH**/ ?>