<?php defined('ABSPATH') or die('Access denied.'); ?>

<!-- div.apexcharts-charts-type -->
<div class="charts-type apexcharts-charts-type col-sm-12 col-md-12">

    <div class="row">

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="apexcharts_straight_line_chart" data-min_columns="2" data-max_columns="0">
                <div class="card-header">
                    <div class="wdt-chart-wizard-overlay"></div>
                    <img class="img-responsive"
                         src="<?php echo WDT_AC_ASSETS_URL ?>img/apexcharts-straight-line-chart.png"
                         alt="straight line chart">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Line chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="apexcharts_spline_chart" data-min_columns="2" data-max_columns="0">
                <div class="card-header">
                    <div class="wdt-chart-wizard-overlay"></div>
                    <img class="img-responsive"
                         src="<?php echo WDT_AC_ASSETS_URL ?>img/apexcharts-spline-chart.png" alt="spline chart">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Spline chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="apexcharts_stepline_chart" data-min_columns="2" data-max_columns="0">
                <div class="card-header">
                    <div class="wdt-chart-wizard-overlay"></div>
                    <img class="img-responsive"
                         src="<?php echo WDT_AC_ASSETS_URL ?>img/apexcharts-stepline-chart.png" alt="stepline chart">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Stepline chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="apexcharts_column_chart" data-min_columns="2" data-max_columns="0">
                <div class="card-header">
                    <div class="wdt-chart-wizard-overlay"></div>
                    <img class="img-responsive"
                         src="<?php echo WDT_AC_ASSETS_URL ?>img/apexcharts-basic-column-chart.png" alt="column chart">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Basic column chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="apexcharts_stacked_column_chart" data-min_columns="2" data-max_columns="0">
                <div class="card-header">
                    <div class="wdt-chart-wizard-overlay"></div>
                    <img class="img-responsive"
                         src="<?php echo WDT_AC_ASSETS_URL ?>img/apexcharts-stacked-column-chart.png"
                         alt="stacked column chart">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Stacked column chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="apexcharts_100_stacked_column_chart" data-min_columns="2" data-max_columns="0">
                <div class="card-header">
                    <div class="wdt-chart-wizard-overlay"></div>
                    <img class="img-responsive"
                         src="<?php echo WDT_AC_ASSETS_URL ?>img/apexcharts-100-stacked-column-chart.png"
                         alt="100% stacked column chart">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('100% stacked column chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>
        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="apexcharts_grouped_bar_chart" data-min_columns="2" data-max_columns="0">
                <div class="card-header">
                    <div class="wdt-chart-wizard-overlay"></div>
                    <img class="img-responsive"
                         src="<?php echo WDT_AC_ASSETS_URL ?>img/apexcharts-basic-bar-chart.png" alt="basic bar chart">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Basic bar chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="apexcharts_stacked_bar_chart" data-min_columns="2" data-max_columns="0">
                <div class="card-header">
                    <div class="wdt-chart-wizard-overlay"></div>
                    <img class="img-responsive"
                         src="<?php echo WDT_AC_ASSETS_URL ?>img/apexcharts-stacked-bar-chart.png"
                         alt="stacked bar chart">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Stacked bar chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="apexcharts_100_stacked_bar_chart" data-min_columns="2" data-max_columns="0">
                <div class="card-header">
                    <div class="wdt-chart-wizard-overlay"></div>
                    <img class="img-responsive"
                         src="<?php echo WDT_AC_ASSETS_URL ?>img/apexcharts-100-stacked-bar-chart.png"
                         alt="100% stacked bar chart">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('100% stacked bar chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="apexcharts_basic_area_chart" data-min_columns="2" data-max_columns="0">
                <div class="card-header">
                    <div class="wdt-chart-wizard-overlay"></div>
                    <img class="img-responsive"
                         src="<?php echo WDT_AC_ASSETS_URL ?>img/apexcharts-basic-area-chart.png"
                         alt="basic area chart">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Basic area chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="apexcharts_spline_area_chart" data-min_columns="2" data-max_columns="0">
                <div class="card-header">
                    <div class="wdt-chart-wizard-overlay"></div>
                    <img class="img-responsive"
                         src="<?php echo WDT_AC_ASSETS_URL ?>img/apexcharts-spline-area-chart.png"
                         alt="step-line area chart">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Spline area chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="apexcharts_stepline_area_chart" data-min_columns="2" data-max_columns="0">
                <div class="card-header">
                    <div class="wdt-chart-wizard-overlay"></div>
                    <img class="img-responsive"
                         src="<?php echo WDT_AC_ASSETS_URL ?>img/apexcharts-stepline-area-chart.png"
                         alt="stepline area chart">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Stepline area chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="apexcharts_pie_chart" data-min_columns="2" data-max_columns="2">
                <div class="card-header">
                    <div class="wdt-chart-wizard-overlay"></div>
                    <img class="img-responsive"
                         src="<?php echo WDT_AC_ASSETS_URL ?>img/apexcharts-pie-chart.png" alt="pie chart">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Pie chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="apexcharts_pie_with_gradient_chart" data-min_columns="2" data-max_columns="2">
                <div class="card-header">
                    <div class="wdt-chart-wizard-overlay"></div>
                    <img class="img-responsive"
                         src="<?php echo WDT_AC_ASSETS_URL ?>img/apexcharts-gradient-pie-chart.png"
                         alt="pie gradient chart">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Pie chart with gradient', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="apexcharts_donut_chart" data-min_columns="2" data-max_columns="2">
                <div class="card-header">
                    <div class="wdt-chart-wizard-overlay"></div>
                    <img class="img-responsive"
                         src="<?php echo WDT_AC_ASSETS_URL ?>img/apexcharts-donut-chart.png" alt="donut chart">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Donut chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="apexcharts_donut_with_gradient_chart" data-min_columns="2"
                 data-max_columns="2">
                <div class="card-header">
                    <div class="wdt-chart-wizard-overlay"></div>
                    <img class="img-responsive"
                         src="<?php echo WDT_AC_ASSETS_URL ?>img/apexcharts-gradient-donut-chart.png"
                         alt="donut with gradient chart">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Donut chart with gradient', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="apexcharts_radar_chart" data-min_columns="2" data-max_columns="0">
                <div class="card-header">
                    <div class="wdt-chart-wizard-overlay"></div>
                    <img class="img-responsive"
                         src="<?php echo WDT_AC_ASSETS_URL ?>img/apexcharts-radar-chart.png" alt="radar chart">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Radar chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>
        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="apexcharts_radialbar_chart" data-min_columns="2" data-max_columns="2">
                <div class="card-header">
                    <div class="wdt-chart-wizard-overlay"></div>
                    <img class="img-responsive"
                         src="<?php echo WDT_AC_ASSETS_URL ?>img/apexcharts-radialbar-chart.png" alt="radial bar chart">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Radial bar chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="apexcharts_radialbar_gauge_chart" data-min_columns="2" data-max_columns="2">
                <div class="card-header">
                    <div class="wdt-chart-wizard-overlay"></div>
                    <img class="img-responsive"
                         src="<?php echo WDT_AC_ASSETS_URL ?>img/apexcharts-radialbar-gauge-chart.png"
                         alt="radial bar chart with gauge">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Radial bar chart with gauge', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

    </div>

</div>
<!-- /div.apexcharts-charts-type -->