<?php defined('ABSPATH') or die("Cannot access pages directly."); ?>

<div class="row">

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

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

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

    <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
        <div class="card" data-type="google_histogram" 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_ASSETS_PATH ?>img/chart-thumbs/google_histogram.jpg">
            </div>
            <div class="card-body">
                <h4 class="f-14"><?php esc_html_e('Histogram', '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="google_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_ASSETS_PATH ?>img/chart-thumbs/google_bar_chart.jpg">
            </div>
            <div class="card-body">
                <h4 class="f-14"><?php esc_html_e('Bar chart', 'wpdatatables'); ?></h4>
            </div>
        </div>
    </div>

    <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
        <div class="card" data-type="google_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_ASSETS_PATH ?>img/chart-thumbs/google_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 class="wdt-chart-wizard-chart-selecter-block col-sm-2">
        <div class="card" data-type="google_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_ASSETS_PATH ?>img/chart-thumbs/google_bubble_chart.jpg">
            </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="google_donut_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_ASSETS_PATH ?>img/chart-thumbs/google_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="google_gauge_chart" data-min_columns="1" data-max_columns="2">
            <div class="card-header">
                <div class="wdt-chart-wizard-overlay"></div>
                <img class="img-responsive" src="<?php echo WDT_ASSETS_PATH ?>img/chart-thumbs/google_gauge_chart.jpg">
            </div>
            <div class="card-body">
                <h4 class="f-14"><?php esc_html_e('Gauge chart', 'wpdatatables'); ?></h4>
            </div>
        </div>
    </div>

    <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
        <div class="card" data-type="google_scatter_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_ASSETS_PATH ?>img/chart-thumbs/google_scatter_chart.jpg">
            </div>
            <div class="card-body">
                <h4 class="f-14"><?php esc_html_e('Scatter 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="google_candlestick_chart" data-min_columns="5" data-max_columns="5">
            <div class="card-header">
                <div class="wdt-chart-wizard-overlay"></div>
                <img class="img-responsive"
                     src="<?php echo WDT_ASSETS_PATH ?>img/chart-thumbs/google_candlestick_chart.jpg">
            </div>
            <div class="card-body">
                <h4 class="f-14"><?php esc_html_e('Candlestick chart', 'wpdatatables'); ?></h4>
            </div>
        </div>
    </div>

    <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
        <div class="card" data-type="google_waterfall_chart" data-min_columns="5" data-max_columns="5">
            <div class="card-header">
                <div class="wdt-chart-wizard-overlay"></div>
                <img class="img-responsive"
                     src="<?php echo WDT_ASSETS_PATH ?>img/chart-thumbs/google_waterfall_chart.jpg">
            </div>
            <div class="card-body">
                <h4 class="f-14"><?php esc_html_e('Waterfall chart', 'wpdatatables'); ?></h4>
            </div>
        </div>
    </div>
    <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
        <div class="card opacity-6" data-type="google_geo_chart" data-min_columns="2" data-max_columns="3" data-toggle="html-premium-popover" data-placement="top" title="title" data-content="content">
            <div class="card-header">
                <div class="wdt-chart-wizard-overlay"></div>
                <img class="img-responsive"
                     src="<?php echo WDT_ASSETS_PATH ?>img/chart-thumbs/google_geochart_region.png">
            </div>
            <div class="card-body">
                <h4 class="f-14"><i class="wpdt-icon-star-full" style="color: #FFC078;"></i><?php esc_html_e('Region Geochart', 'wpdatatables'); ?></h4>
            </div>
        </div>
    </div>
    <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
        <div class="card opacity-6" data-type="google_marker_geo_chart" data-min_columns="2" data-max_columns="3" data-toggle="html-premium-popover" data-placement="top" title="title" data-content="content">
            <div class="card-header">
                <div class="wdt-chart-wizard-overlay"></div>
                <img class="img-responsive"
                     src="<?php echo WDT_ASSETS_PATH ?>img/chart-thumbs/google_geochart_markers.png">
            </div>
            <div class="card-body">
                <h4 class="f-14"><i class="wpdt-icon-star-full" style="color: #FFC078;"></i><?php esc_html_e('Marker Geochart', 'wpdatatables'); ?></h4>
            </div>
        </div>
    </div>
    <div class="wdt-chart-wizard-chart-selecter-block col-sm-2">
        <div class="card opacity-6" data-type="google_text_geo_chart" data-min_columns="2" data-max_columns="3" data-toggle="html-premium-popover" data-placement="top" title="title" data-content="content">
            <div class="card-header">
                <div class="wdt-chart-wizard-overlay"></div>
                <img class="img-responsive"
                     src="<?php echo WDT_ASSETS_PATH ?>img/chart-thumbs/google_geochart_text.png">
            </div>
            <div class="card-body">
                <h4 class="f-14"><i class="wpdt-icon-star-full" style="color: #FFC078;"></i><?php esc_html_e('Text Geochart', 'wpdatatables'); ?></h4>
            </div>
        </div>
    </div>

</div>