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

<!-- div.highcharts-charts-type -->
<div class="charts-type highcharts-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="highcharts_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_HC_ASSETS_URL ?>img/highcharts_line_chart.jpg">
                </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="highcharts_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_HC_ASSETS_URL ?>img/highcharts_spline_chart.jpg">
                </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="highcharts_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_HC_ASSETS_URL ?>img/highcharts_basic_area_chart.jpg">
                </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="highcharts_stacked_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_HC_ASSETS_URL ?>img/highcharts_stacked_area_chart.jpg">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Stacked area chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="highcharts_basic_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_HC_ASSETS_URL ?>img/highcharts_basic_bar_chart.jpg">
                </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="highcharts_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_HC_ASSETS_URL ?>img/highcharts_stacked_bar_chart.jpg">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Stacked bar chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

    </div>

    <div class="row">

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="highcharts_basic_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_HC_ASSETS_URL ?>img/highcharts_basic_column_chart.jpg">
                </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="highcharts_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_HC_ASSETS_URL ?>img/highcharts_stacked_column_chart.jpg">
                </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="highcharts_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_HC_ASSETS_URL ?>img/highcharts_pie_chart.jpg">
                </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="highcharts_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_HC_ASSETS_URL ?>img/highcharts_pie_with_gradient_chart.jpg">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Pie with gradient chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="highcharts_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_HC_ASSETS_URL ?>img/highcharts_donut_chart.jpg">
                </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="highcharts_scatter_plot" 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_HC_ASSETS_URL ?>img/highcharts_scatter_plot.jpg">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Scatter plot', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

    </div>

    <div class="row">

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="highcharts_3d_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_HC_ASSETS_URL ?>img/highcharts_3d_column_chart.jpg">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('3D column chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="highcharts_3d_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_HC_ASSETS_URL ?>img/highcharts_3d_pie_chart.jpg">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('3D pie chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="highcharts_3d_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_HC_ASSETS_URL ?>img/highcharts_3d_donut_chart.jpg">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('3D donut chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="highcharts_treemap_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_HC_ASSETS_URL ?>img/highcharts_treemap_chart.jpg">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Treemap chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>
        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="highcharts_treemap_level_chart" data-min_columns="3" data-max_columns="0">
                <div class="card-header">
                    <div class="wdt-chart-wizard-overlay"></div>
                    <img class="img-responsive"
                         src="<?php echo WDT_HC_ASSETS_URL ?>img/highcharts_treemap_level_chart.jpg">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Treemap level chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>
        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="highcharts_polar_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_HC_ASSETS_URL ?>img/highcharts_polar_chart.jpg">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Polar chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

    </div>

    <div class="row">

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="highcharts_spiderweb_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_HC_ASSETS_URL ?>img/highcharts_spiderweb_chart.png">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Spiderweb chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="highcharts_funnel_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_HC_ASSETS_URL ?>img/highcharts_funnel_chart.jpg">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Funnel chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="highcharts_funnel3d_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_HC_ASSETS_URL ?>img/highcharts_funnel3d_charts.jpg">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('3D funnel chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="highcharts_bubble_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_HC_ASSETS_URL ?>img/highcharts_bubble_chart.png">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Bubble chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="highcharts_bubble3d_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_HC_ASSETS_URL ?>img/highcharts_bubble3d_chart.png">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('3D Bubble chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>

        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="highcharts_sized_bubble_chart" data-min_columns="3" data-max_columns="0">
                <div class="card-header">
                    <div class="wdt-chart-wizard-overlay"></div>
                    <img class="img-responsive"
                         src="<?php echo WDT_HC_ASSETS_URL ?>img/highcharts_sized_bubble_chart.png">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('Sized Bubble chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>
        <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
            <div class="card" data-type="highcharts_sized_bubble3d_chart" data-min_columns="3" data-max_columns="0">
                <div class="card-header">
                    <div class="wdt-chart-wizard-overlay"></div>
                    <img class="img-responsive"
                         src="<?php echo WDT_HC_ASSETS_URL ?>img/highcharts_sized_bubble3d_chart.png">
                </div>
                <div class="card-body">
                    <h4 class="f-14"><?php esc_html_e('3D Sized Bubble chart', 'wpdatatables'); ?></h4>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /div.highcharts-charts-type -->