{config_load file="$language.conf" section="mailbeez_stats"}


<script language="javascript"
        src="{$mailhive_server_url}configbeez/config_customer_insight/js/easy-pie/jquery.easy-pie-chart.js"></script>
{literal}
    <script type="text/javascript">

        var color_open = '#9ac2df';
        var color_click = '#f8933c';
        var color_order = '#abd37f';


        var initPieChart = function () {
            jQueryMailBeezPanel('.percentage').easyPieChart({
                size: 50,
                animate: 500
            });
            jQueryMailBeezPanel('.percentage-light').easyPieChart({
                barColor: function (percent) {
                    percent /= 100;
                    return "rgb(" + Math.round(255 * (1 - percent)) + ", " + Math.round(255 * percent) + ", 0)";
                },
                size: 50,
                trackColor: '#666',
                scaleColor: false,
                lineCap: 'round',
                lineWidth: 5,
                animate: 500
            });

            jQueryMailBeezPanel('.percentage-open').easyPieChart({
                barColor: color_open,
                size: 50,
                trackColor: 'rgba(154, 194, 223, .2)',
                scaleColor: false,
                lineCap: 'round',
                lineWidth: 5,
                animate: 500
            });

            jQueryMailBeezPanel('.percentage-click').easyPieChart({
                barColor: color_click,
                size: 50,
                trackColor: 'rgba(248, 147, 60, .2)',
                scaleColor: false,
                lineCap: 'round',
                lineWidth: 5,
                animate: 500
            });
            jQueryMailBeezPanel('.percentage-order').easyPieChart({
                barColor: color_order,
                size: 50,
                trackColor: 'rgba(171, 211, 127, .2)',
                scaleColor: false,
                lineCap: 'round',
                lineWidth: 5,
                animate: 500
            });
        };


        jQueryMailBeezInsight(document).ready(function () {
            initPieChart();
        });

    </script>
    <style type="text/css">
        .panel_container {
            width: auto;
            /*width: 650px;*/
            margin: auto;
            text-align: center;
            /*position: fixed;*/
            /*bottom: 0px;*/
            /*top: 0px;*/
            background-color: rgba(32, 32, 32, .75);

        }

        .chart, .chart_number, .chart_arrow {
            float: left;
            margin: 10px;
            margin-bottom: 1px;
            color: #d8d8d8 !important;
            font: "Trebuchet MS, Arial" !important;
        }

        .chart_arrow {
            font-size: 20px;
            color: rgba(255, 255, 255, .25) !important;
            margin: 2px;
            padding-top: 20px;
            font: "Trebuchet MS, Arial" !important;

        }

        .chart_number {
            margin: 0px;
            margin-top: 15px;
            width: 160px;
            border: 0px solid #808080;
            font: "Trebuchet MS, Arial" !important;
        }

        .chart_number > .number {
            color: #d8d8d8 !important;
            font-size: 32px;
        }

        .chart_number > .label {
            font-size: 12px;
            color: #808080;
            margin-top: 6px;
        }

        .percentage,
        .label {
            text-align: center;
            color: #909090;
            font-weight: 100;
            font-size: 1.2em;
            margin-bottom: 0.1em;
            font-size: 12px;
        }

        .panel_container .easyPieChart {
            position: relative;
            text-align: center;
            color: #d8d8d8 !important;
            font-size: 14px;
            font: "Trebuchet MS, Arial" !important;
        }

        .panel_container .easyPieChart canvas {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
{/literal}
<div class="label" style="text-align: left !important; margin-bottom: -5px; margin-top:-2px; margin-left: 14px;">
    {#title#}
</div>
<div class="panel_container">
    {capture name='MH_BOUNCEHANDLING_ENABLED'}{mh_cfg key='MH_BOUNCEHANDLING_ENABLED'}{/capture}
    {if $smarty.capture.MH_BOUNCEHANDLING_ENABLED == 'True'}
        <div class="chart_number">
            <div class="number">{$cnt_delivered}</div>
            <div class="label">{mh_cfg key='MAILBEEZ_STATSBAR_LABEL_EMAILS'}
                {mh_cfg key='MAILBEEZ_STATSBAR_LABEL_DELIVERED'}
            </div>
        </div>
    {else}
        <div class="chart_number">
            <div class="number">{$cnt_sent}</div>
            <div class="label">{mh_cfg key='MAILBEEZ_STATSBAR_LABEL_EMAILS'} {mh_cfg key='MAILBEEZ_STATSBAR_LABEL_SENT'}
            </div>
        </div>
    {/if}

    <div class="chart_arrow">&gt;</div>
    <div class="chart">
        <div class="percentage-open" data-percent="{$pct_opened|string_format:" %d"}" style="margin: auto"><span>{$pct_opened|string_format:"%d"}</span>%
        </div>
        <div class="label">{mh_cfg key='MAILBEEZ_STATSBAR_LABEL_OPENED'}: <br/>
            {$cnt_opened}
        </div>
    </div>
    <div class="chart_arrow">&gt;</div>
    <div class="chart">
        <div class="percentage-click" data-percent="{$pct_clicked|string_format:" %d"}" style="margin: auto"><span>{$pct_clicked|string_format:"%d"}</span>%
        </div>
        <div class="label">{mh_cfg key='MAILBEEZ_STATSBAR_LABEL_CLICKED'}: <br/>
            {$cnt_clicked}
        </div>
    </div>
    <div class="chart_arrow">&gt;</div>
    <div class="chart">
        <div class="percentage-order" data-percent="{$pct_ordered|string_format:" %d"}" style="margin: auto"><span>{$pct_ordered|string_format:"%d"}</span>%
        </div>
        <div class="label">{mh_cfg key='MAILBEEZ_STATSBAR_LABEL_ORDERED'}: <br/>
            {$cnt_orders}
        </div>
    </div>
    <div class="chart_arrow">&gt;</div>
    <div class="chart_number">
        <div class="number">{$revenue}</div>
        <div class="label">{mh_cfg key='MAILBEEZ_STATSBAR_LABEL_REVENUE'}</div>
    </div>

</div>
<div style="clear:both; height: 2px;"></div>
<hr size="1" noshade>