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

<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_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_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_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 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>

<div class="row">

    <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_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_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_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="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_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.png">
            </div>
            <div class="card-body">
                <h4 class="f-14"><?php esc_html_e('Waterfall chart', 'wpdatatables'); ?></h4>
            </div>
        </div>
    </div>
    <div id="google_geo_chart_option" class="wdt-chart-wizard-chart-selecter-block col-sm-2">
        <div class="card" data-type="google_geo_chart" data-min_columns="2" data-max_columns="3">
            <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"><?php esc_html_e('Region Geochart', 'wpdatatables'); ?></h4>
            </div>
        </div>
    </div>
    <div id="google_marker_geo_chart_option" class="wdt-chart-wizard-chart-selecter-block col-sm-2">
        <div class="card" data-type="google_marker_geo_chart" data-min_columns="2" data-max_columns="3">
            <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"><?php esc_html_e('Marker Geochart', 'wpdatatables'); ?></h4>
            </div>
        </div>
    </div>
    <div id="google_text_geo_chart_option" class="wdt-chart-wizard-chart-selecter-block col-sm-2">
        <div class="card" data-type="google_text_geo_chart" data-min_columns="2" data-max_columns="3">
            <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"><?php esc_html_e('Text Geochart', 'wpdatatables'); ?></h4>
            </div>
        </div>
    </div>
    <div class="col-xs-12" style="margin-left:2px">
        <div class="alert alert-info alert-dismissible hidden" role="alert">
            <i class="wpdt-icon-info-circle-full"></i>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                        aria-hidden="true">×</span>
            </button>
            <span class="wdt-alert-title f-600"><?php esc_html_e('Marker GeoChart and Text GeoChart are disabled without Google Maps API key! Region GeoChart can be used without Google Maps API key, but options for choosing continents, subcontinents and countries are disabled!', 'wpdatatables'); ?><br></span>
        </div>
    </div>
</div>