<?php
//print_r($attributes);
extract($attributes);

Flo_Guten_Blocks_Helper::load_google_fonts(array($titleTypography, $authorTypography, $textTypography, $scrollThrouchTypography));
?>

<div class="<?php echo $className;?> flo-block <?php echo Flo_Guten_Blocks_Helper::get_additional_class($attributes);?> flo-block-testimonials" style="
    --text-elements-color: <?php echo Flo_Guten_Blocks_Helper::get_style_color($textElementsColor)?>;
    --image-width: <?php echo $imageWidth ? ($imageWidth/16)."rem" : '26.3125rem'?>;
    --top-margin: <?php echo $topMargin?>px;
    --bottom-margin: <?php echo $bottomMargin?>px;
    --mobile-top-margin: <?php echo $mobileTopMargin?>px;
    --mobile-bottom-margin: <?php echo $mobileBottomMargin?>px;
    <?php echo Flo_Guten_Blocks_Helper::get_style_for_typography('title', $titleTypography)?>
    <?php echo Flo_Guten_Blocks_Helper::get_style_for_typography('author', $authorTypography)?>
    <?php echo Flo_Guten_Blocks_Helper::get_style_for_typography('text', $textTypography)?>
    <?php echo Flo_Guten_Blocks_Helper::get_style_for_typography('scroll-through', $scrollThrouchTypography)?>
    "
    <?php echo !empty($anchor) ? 'id="'.$anchor.'"' : '';?>
>
    <div
    class="flo-block-testimonials__title"
    data-font="<?php echo Flo_Guten_Blocks_Helper::getDataFontForTypography($titleTypography);?>"
    ><?php echo $title;?></div>

    <div  class="flo-block-testimonials__items">
        <?php foreach ($testimonials as $item):?>
            <div  class="flo-block-testimonials__item-wrapper">
                <div  class="flo-block-testimonials__item">
                    <?php if (!empty($item['image']['url'])):?>
                    <div class="flo-block-testimonials__item-image">
                        <img src="<?php echo $item['image']['url'];?>" />
                    </div>
                    <?php endif;?>
                    <div class="flo-block-testimonials__item-info">
                        <?php if (!empty($item['avatar']['url'])):?>
                        <div class="flo-block-testimonials__item-avatar">
                            <img src="<?php echo $item['avatar']['url'];?>" />
                        </div>
                        <?php endif;?>
                        <div
                            class="flo-block-testimonials__item-author"
                            data-font="<?php echo Flo_Guten_Blocks_Helper::getDataFontForTypography($authorTypography);?>"><?php echo $item['title']?></div>
                        <div
                            class="flo-block-testimonials__item-text"
                            data-font="<?php echo Flo_Guten_Blocks_Helper::getDataFontForTypography($textTypography);?>"
                            
                        ><?php echo $item['text']?></div>
                    </div>
                </div>
            </div>
        <?php endforeach;?>
    </div>
    <?php if (count($testimonials) > 1):?>
    <div class="flo-block-testimonials__navigation">
        <div
            class="flo-block-testimonials__arrow flo-block-testimonials__arrow--prev"
        >
            <i class="gbp-icon-sl-arrow-left"></i>
        </div>
        <div
            class="flo-block-testimonials__scroll-through"
            data-font="<?php echo Flo_Guten_Blocks_Helper::getDataFontForTypography($scrollThrouchTypography);?>"
        >
            <?php echo $scrollThrouchText?>
        </div>
        <div
            class="flo-block-testimonials__arrow flo-block-testimonials__arrow--next"
        >
            <i class="gbp-icon-sl-arrow-right"></i>
        </div>
    </div>
    <?php endif;?>
</div>