<?php

/**
 * Clients Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */

// Create id attribute allowing for custom "anchor" value.
$id = 'tools-' . $block['id'];
if( !empty($block['anchor']) ) {
    $id = $block['anchor'];
}

// Create class attribute allowing for custom "className" and "align" values.
$className = 'central-image';
if( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
    $className .= ' align' . $block['align'];
}

// Load values and assign defaults.
$tools = get_field('tools') ?: [];
$block_title = get_field('block_title') ?: '';;
$block_bg = get_field('block_bg');
$arrow_color = get_field('arrows_color');
?>
<?php if (!empty($tools)) {  ?>
    <section class="block-tools initial block-clients">
        <div class="tools-top" style="background-color:<?php echo $block_bg; ?> ;">
            <header class="tools-top-header">
                <div class="tools-top-title">
                    <h2><?php echo $block_title; ?></h2>
                </div>
                <?php if ($arrow_color != '') { ?>
                <style>
                    .<?php echo $id; ?> button svg path,
                    .<?php echo $id; ?> button svg line{
                        stroke: <?php echo $arrow_color; ?> !important;
                    }
                    .<?php echo $id; ?>::before {
                        background-color: <?php echo $arrow_color; ?> !important;
                    }
                </style>
                <?php } ?>
                <div class="tools-top-nav owl-nav disabled <?php echo $id; ?>" id="sliderNav"><button type="button" role="presentation" class="owl-prev disable"><svg xmlns="http://www.w3.org/2000/svg" width="29.214" height="12.298" viewBox="0 0 29.214 12.298"><g id="Group_286" data-name="Group 286" transform="translate(1.23 0.592)" opacity="0.998"><line id="Line_23" data-name="Line 23" x1="27.536" transform="translate(0.448 5.686)" fill="none" stroke="#c3d3d9" stroke-width="2"></line><path id="Path_110" data-name="Path 110" d="M2680.61,2826l-3.988,5.429,3.988,5.7" transform="translate(-2676.622 -2826)" fill="none" stroke="#c3d3d9" stroke-width="2"></path></g></svg></button><button type="button" role="presentation" class="owl-next"><svg xmlns="http://www.w3.org/2000/svg" width="29.215" height="12.298" viewBox="0 0 29.215 12.298"><g id="Group_285" data-name="Group 285" transform="translate(0 0.592)"><line id="Line_23" data-name="Line 23" x2="27.536" transform="translate(0 5.686)" fill="none" stroke="#fff" stroke-width="2"></line><path id="Path_110" data-name="Path 110" d="M2676.622,2826l3.988,5.429-3.988,5.7" transform="translate(-2652.625 -2826)" fill="none" stroke="#fff" stroke-width="2"></path></g></svg></button></div>
            </header>

            <div class="icon-carousel" id="sliderDots">
                <div class="icon-carousel-wrapper">
                    <div class="icon-carousel-dragger" id="icon-carousel-dragger">
                        <?php foreach($tools as $key => $tool) { ?>
                            <div class="icon-carousel-block <?php echo $key == 0 ? 'active' : ''; ?>" data-key="<?php echo $key; ?>">
                                <div class="icon-carousel-icon"><img src="<?php echo $tool['tab']['icon']; ?>"></div>
                            </div>
                        <?php } ?>
                    </div>
                </div>
            </div>
        </div>

    </section>
<?php } ?>