<?php

use Elementor\Utils;

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly
}

list($animate_class, $animation_attr) = tfl_get_animation_atts($settings['widget_animation']);

?>

<div class="tfl-circlebox tfl-<?php echo $settings['style']; ?> tfl-align<?php //echo $settings['align']; ?> <?php echo $animate_class; ?>" <?php echo $animation_attr; ?>>
    <div class="d-flex">

        <?php
        $image = $settings['image'];
        $imageUrl = wp_get_attachment_image_src($image['id'], 'full', false, array('class' => 'tfl-image full'));
        ?>

        <div class="tfl-content-wrapper">
            <div class="wrap-circle hvr-pop" style="background-image: url( <?php echo $imageUrl[0]; ?>)"></div>
            <div class="sub-image">
                <svg xmlns="http://www.w3.org/2000/svg" width="151" height="151" viewBox="0 0 151 151">
                    <g id="Ellipse_50" data-name="Ellipse 50" fill="none" stroke="#348e38" stroke-width="25">
                        <circle cx="75.5" cy="75.5" r="75.5" stroke="none"/>
                        <circle cx="75.5" cy="75.5" r="63" fill="none"/>
                    </g>
                </svg>
            </div>

            <div class="tfl-text">
                <div class="text-inner">
                    <?php echo wp_kses_post($settings['short_text']); ?>
                </div>
            </div>

        </div>
    </div>

</div>