<?php
$col_xs = $widget->get_setting('col_xs', '');
$col_sm = $widget->get_setting('col_sm', '');
$col_md = $widget->get_setting('col_md', '');
$col_lg = $widget->get_setting('col_lg', '');
$col_xl = $widget->get_setting('col_xl', '');

$col_xl = 12 / intval($col_xl);
$col_lg = 12 / intval($col_lg);
$col_md = 12 / intval($col_md);
$col_sm = 12 / intval($col_sm);
$col_xs = 12 / intval($col_xs);

$grid_sizer = "col-xl-{$col_xl} col-lg-{$col_lg} col-md-{$col_md} col-sm-{$col_sm} col-{$col_xs}";
$item_class = "pxl-grid-item col-xl-{$col_xl} col-lg-{$col_lg} col-md-{$col_md} col-sm-{$col_sm} col-{$col_xs}";
?>
<?php if(isset($settings['box']) && !empty($settings['box']) && count($settings['box'])): ?>
    <div class="pxl-grid pxl-box-link pxl-box-link1" data-layout="<?php echo esc_attr($settings['data_layout']); ?>">
        <div class="pxl-grid-inner pxl-grid-masonry row" data-gutter="15">
            <?php foreach ($settings['box'] as $key => $value):
    			$title = isset($value['title']) ? $value['title'] : '';
                $desc = isset($value['desc']) ? $value['desc'] : '';
                $link_key = $widget->get_repeater_setting_key( 'item_link', 'value', $key );
                if ( ! empty( $value['item_link']['url'] ) ) {
                    $widget->add_render_attribute( $link_key, 'href', $value['item_link']['url'] );

                    if ( $value['item_link']['is_external'] ) {
                        $widget->add_render_attribute( $link_key, 'target', '_blank' );
                    }

                    if ( $value['item_link']['nofollow'] ) {
                        $widget->add_render_attribute( $link_key, 'rel', 'nofollow' );
                    }
                }
                $link_attributes = $widget->get_render_attribute_string( $link_key );
                ?>
                <div class="<?php echo esc_attr($item_class); ?>">
                    <div class="pxl-item--inner <?php echo esc_attr($settings['pxl_animate']); ?>">
                        <div class="pxl-item--holder">
                            <div class="pxl-item--title">
                                <?php echo pxl_print_html($title); ?>
                            </div>
                            <div class="pxl-item--meta">
                                <div class="pxl-item--desc"><?php echo pxl_print_html($desc); ?></div>
                                <div class="pxl-item-btn">
                                    <a class="pxl-btn-dow" <?php echo implode( ' ', [ $link_attributes ] ); ?>>
                                        <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 683 683" width="683" height="683">
                                            <defs>
                                                <clipPath clipPathUnits="userSpaceOnUse" id="cp1">
                                                    <path d="m0 0h682.67v682.67h-682.67z"/>
                                                </clipPath>
                                            </defs>
                                            <g id="g393">
                                                <g id="g395">
                                                    <path id="path397" d="m174 371.3l167.3 167.4 167.4-167.4" 
                                                          fill="none" stroke="#000000" stroke-linecap="square" 
                                                          stroke-miterlimit="10" stroke-width="53.3"/>
                                                </g>
                                                <g id="g399">
                                                    <g id="Clip-Path: g401" clip-path="url(#cp1)">
                                                        <g id="g401">
                                                            <g id="g407">
                                                                <path id="path409" d="m341.3 514.7v-488" 
                                                                      fill="none" stroke="#000000" stroke-linecap="square" 
                                                                      stroke-linejoin="round" stroke-width="53.3"/>
                                                            </g>
                                                            <g id="g411">
                                                                <path id="path413" d="m0 656h682.7" 
                                                                      fill="none" stroke="#000000" stroke-miterlimit="10" 
                                                                      stroke-width="53.3"/>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </g>
                                            </g>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                   </div>
                </div>
            <?php endforeach; ?>
            <div class="grid-sizer <?php echo esc_attr($grid_sizer); ?>"></div>
        </div>
    </div>
<?php endif; ?>
