<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
    xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
    <title><mj-raw><?php echo esc_html__('Website Analytics Report', 'independent-analytics') . ' ' . $date; ?></mj-raw></title><!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style type="text/css">
        #outlook a {
            padding: 0;
        }

        body {
            margin: 0;
            padding: 0;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }

        table,
        td {
            border-collapse: collapse;
            mso-table-lspace: 0pt;
            mso-table-rspace: 0pt;
        }

        img {
            border: 0;
            height: auto;
            line-height: 100%;
            outline: none;
            text-decoration: none;
            -ms-interpolation-mode: bicubic;
        }

        p {
            display: block;
            margin: 13px 0;
        }
    </style><!--[if mso]>
  <noscript>
  <xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
  </xml>
  </noscript>
  <![endif]--><!--[if lte mso 11]>
  <style type="text/css">
    .mj-outlook-group-fix { width:100% !important; }
  </style>
  <![endif]--><!--[if !mso]><!-->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
    <style type="text/css">
        @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
        @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);
    </style><!--<![endif]-->
    <style type="text/css">
        @media only screen and (min-width:480px) {
            .mj-column-per-100 {
                width: 100% !important;
                max-width: 100%;
            }

            .mj-column-per-50 {
                width: 50% !important;
                max-width: 50%;
            }

            .mj-column-per-10 {
                width: 10% !important;
                max-width: 10%;
            }

            .mj-column-per-90 {
                width: 90% !important;
                max-width: 90%;
            }
        }
    </style>
    <style media="screen and (min-width:480px)">
        .moz-text-html .mj-column-per-100 {
            width: 100% !important;
            max-width: 100%;
        }

        .moz-text-html .mj-column-per-50 {
            width: 50% !important;
            max-width: 50%;
        }

        .moz-text-html .mj-column-per-10 {
            width: 10% !important;
            max-width: 10%;
        }

        .moz-text-html .mj-column-per-90 {
            width: 90% !important;
            max-width: 90%;
        }
    </style>
    <style type="text/css"></style>
    <style type="text/css">
        .header-top-container,
        .header-top-container-outlook {
            background-color: <?php echo $colors['0']; ?> !important;
        }

        .header-bottom-container,
        .header-bottom-container-outlook {
            background-color: <?php echo $colors['2']; ?> !important;
        }

        .quick-stat-title {
            background-color: <?php echo $colors['7']; ?> !important;
        }

        .quick-stat-value a {
            color: #000 !important;
            text-decoration: none !important;
        }

        .bar-chart-row td:hover div {
            background-color: #19053C !important;
        }

        .bar-chart-row td:hover span {
            display: block !important;
        }

        .top-ten-table td {
            font-size: 12px;
        }

        .top-ten-table .table-heading {
            line-height: 2;
        }

        .top-ten-table .name {
            max-width: 130px;
            overflow: hidden;
            white-space: nowrap;
            line-height: 1.8;
        }

        .top-ten-table a {
            color: #000 !important;
            text-decoration: none !important;
        }

        .y-axis {
            width: 10% !important;
            width: calc(50px + 0) !important;
        }

        .chart-container {
            width: 90% !important;
            width: calc(100% - 50px) !important;
        }

        .heading-divider,
        .heading-divider p,
        .y-axis,
        .y-axis td,
        .chart-border,
        .chart-border p {
            border-color: <?php echo $colors['6']; ?> !important;
        }

        .body-container {
            background-color: <?php echo $colors['8']; ?>;
        }

        .footer,
        .footer-outlook {
            background-color: <?php echo $colors['9']; ?> !important;
            color: <?php echo $colors['10']; ?> !important;
        }

        @media all and (max-width: 599px) {
            .chart-date-label {
                font-size: 12px;
            }
        }
    </style>
</head>

<body style="word-spacing:normal;">
    <div class="body-container">
        <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="header-top-container-outlook" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
        <div class="header-top-container" style="margin:0px auto;max-width:600px;">
            <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
                style="width:100%;">
                <tbody>
                    <tr>
                        <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
                            <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
                            <div class="mj-column-per-100 mj-outlook-group-fix"
                                style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                                <table border="0" cellpadding="0" cellspacing="0" role="presentation"
                                    style="vertical-align:top;" width="100%">
                                    <tbody>
                                        <tr>
                                            <td align="center" class="site-title-text"
                                                style="font-size:0px;padding:0 0 8px 0;word-break:break-word;">
                                                <div
                                                    style="font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;font-size:24px;font-weight:700;line-height:1;text-align:center;color:<?php echo $colors['1']; ?>;">
                                                    <?php echo esc_html($site_title); ?></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="center" class="sub-title-text"
                                                style="font-size:0px;padding:0;word-break:break-word;">
                                                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="18px" style="vertical-align:top;height:18px;"><![endif]-->
                                                <div
                                                    style="font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;font-size:16px;line-height:1;text-align:center;color:<?php echo $colors['1']; ?>;height:18px;">
                                                    <?php esc_html_e('Website performance report', 'independent-analytics'); ?></div>
                                                <!--[if mso | IE]></td></tr></table><![endif]-->
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div><!--[if mso | IE]></td></tr></table><![endif]-->
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="header-bottom-container-outlook" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
        <div class="header-bottom-container" style="margin:0px auto;max-width:600px;">
            <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
                style="width:100%;">
                <tbody>
                    <tr>
                        <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
                            <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
                            <div class="mj-column-per-100 mj-outlook-group-fix"
                                style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                                <table border="0" cellpadding="0" cellspacing="0" role="presentation"
                                    style="vertical-align:top;" width="100%">
                                    <tbody>
                                        <tr>
                                            <td align="center" class="date-title-text"
                                                style="font-size:0px;padding:6px 0 0 0;word-break:break-word;">
                                                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="32px" style="vertical-align:top;height:32px;"><![endif]-->
                                                <div
                                                    style="font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;font-size:16px;letter-spacing:0.03em;line-height:1.5;text-align:center;text-transform:uppercase;color:<?php echo $colors['3']; ?>;height:32px;">
                                                    <?php echo esc_html($date); ?></div>
                                                <!--[if mso | IE]></td></tr></table><![endif]-->
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div><!--[if mso | IE]></td></tr></table><![endif]-->
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
        <div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
            <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
                style="background:#ffffff;background-color:#ffffff;width:100%;">
                <tbody>
                    <tr>
                        <td style="direction:ltr;font-size:0px;padding:12px 0 0 0;text-align:center;">
                            <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
                            <div class="mj-column-per-100 mj-outlook-group-fix"
                                style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                                <table border="0" cellpadding="0" cellspacing="0" role="presentation"
                                    style="vertical-align:top;" width="100%">
                                    <tbody>
                                        <tr>
                                            <td align="left"
                                                style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                                <div
                                                    style="font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;font-size:21px;font-weight:700;line-height:1;text-align:left;color:#000000;">
                                                    <mj-raw><?php esc_html_e('Performance Overview', 'independent-analytics'); ?></mj-raw></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="center" class="heading-divider"
                                                style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                                <p
                                                    style="border-top:solid 2px <?php echo $colors['6']; ?>;font-size:1px;margin:0px auto;width:100%;">
                                                </p><!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 2px <?php echo $colors['6']; ?>;font-size:1px;margin:0px auto;width:550px;" role="presentation" width="550px" ><tr><td style="height:0;line-height:0;"> &nbsp;
</td></tr></table><![endif]-->
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div><!--[if mso | IE]></td></tr></table><![endif]-->
                        </td>
                    </tr>
                </tbody>
            </table>
        </div><!--[if mso | IE]></td></tr></table><![endif]--> <?php for($x = 0; $x < count($stats); $x++) :
  $stat = $stats[$x];
  if ($x % 2 == 0) : ?>
        <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
        <div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
            <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
                style="background:#ffffff;background-color:#ffffff;width:100%;">
                <tbody>
                    <tr>
                        <td style="direction:ltr;font-size:0px;padding:12px 12px 0 12px;text-align:center;">
                            <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><![endif]-->
                            <?php endif;?>
                            <!--[if mso | IE]><td class="" style="vertical-align:top;width:288px;" ><![endif]-->
                            <div class="mj-column-per-50 mj-outlook-group-fix"
                                style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                                <table border="0" cellpadding="0" cellspacing="0" role="presentation"
                                    width="100%">
                                    <tbody>
                                        <tr>
                                            <td style="vertical-align:top;padding:6px;">
                                                <table border="0" cellpadding="0" cellspacing="0"
                                                    role="presentation" width="100%">
                                                    <tbody>
                                                        <tr>
                                                            <td align="left" class="quick-stat-title"
                                                                style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                                                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="15px" style="vertical-align:top;height:15px;"><![endif]-->
                                                                <div
                                                                    style="font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;font-size:14px;line-height:1;text-align:left;color:#000000;height:15px;">
                                                                    <mj-raw><?php echo esc_html($stat->name()); ?></mj-raw></div>
                                                                <!--[if mso | IE]></td></tr></table><![endif]-->
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td align="left" class="quick-stat-value"
                                                                style="font-size:0px;padding:12px 24px 11px;word-break:break-word;">
                                                                <div
                                                                    style="font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;font-size:24px;line-height:1;text-align:left;color:#000000;">
                                                                    <mj-raw><?php echo wp_kses($stat->formatted_value(), ['span' => []]); ?></mj-raw></div>
                                                            </td>
                                                        </tr> <?php 
          if ($stat->growth_html_class() == 'bad' || $stat->growth_html_class() == 'down bad' ) : 
      ?> <tr>
                                                            <td align="left"
                                                                style="font-size:0px;padding:0 24px 12px;word-break:break-word;">
                                                                <div
                                                                    style="font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;font-size:16px;line-height:1;text-align:left;color:#D93B29;">
                                                                    <mj-raw><?php echo $stat->growth(); ?>%</mj-raw></div>
                                                            </td>
                                                        </tr> <?php else : ?> <tr>
                                                            <td align="left"
                                                                style="font-size:0px;padding:0 24px 12px;word-break:break-word;">
                                                                <div
                                                                    style="font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;font-size:16px;line-height:1;text-align:left;color:#36B366;">
                                                                    <mj-raw><?php echo $stat->growth(); ?>%</mj-raw></div>
                                                            </td>
                                                        </tr> <?php endif; ?>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div><!--[if mso | IE]></td><![endif]--> <?php if ($x % 2 != 0 || $x == count($stats) - 1) : ?>
                            <!--[if mso | IE]></tr></table><![endif]-->
                        </td>
                    </tr>
                </tbody>
            </table>
        </div><!--[if mso | IE]></td></tr></table><![endif]--> <?php endif; ?><?php endfor; ?>
        <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
        <div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
            <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
                style="background:#ffffff;background-color:#ffffff;width:100%;">
                <tbody>
                    <tr>
                        <td style="direction:ltr;font-size:0px;padding:6px 0 6px 0;text-align:center;">
                            <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
                            <div class="mj-column-per-100 mj-outlook-group-fix"
                                style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                                <table border="0" cellpadding="0" cellspacing="0" role="presentation"
                                    style="vertical-align:top;" width="100%">
                                    <tbody>
                                        <tr>
                                            <td align="left"
                                                style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                                <div
                                                    style="font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;font-size:21px;font-weight:700;line-height:1;text-align:left;color:#000000;">
                                                    <mj-raw><?php echo esc_html($chart_title); ?></mj-raw></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="center" class="heading-divider"
                                                style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                                <p
                                                    style="border-top:solid 2px <?php echo $colors['6']; ?>;font-size:1px;margin:0px auto;width:100%;">
                                                </p><!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 2px <?php echo $colors['6']; ?>;font-size:1px;margin:0px auto;width:550px;" role="presentation" width="550px" ><tr><td style="height:0;line-height:0;"> &nbsp;
</td></tr></table><![endif]-->
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div><!--[if mso | IE]></td></tr></table><![endif]-->
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
        <div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
            <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
                style="background:#ffffff;background-color:#ffffff;width:100%;">
                <tbody>
                    <tr>
                        <td style="direction:ltr;font-size:0px;padding:12px 0 12px;text-align:center;">
                            <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="width:600px;" ><![endif]-->
                            <div class="mj-column-per-100 mj-outlook-group-fix"
                                style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;">
                                <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:60px;" ><![endif]-->
                                <div class="mj-column-per-10 mj-outlook-group-fix y-axis"
                                    style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:10%;">
                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation"
                                        width="100%">
                                        <tbody>
                                            <tr>
                                                <td
                                                    style="border-right:solid 2px #ECE9F2;vertical-align:top;padding:0;">
                                                    <table border="0" cellpadding="0" cellspacing="0"
                                                        role="presentation" width="100%">
                                                        <tbody>
                                                            <tr>
                                                                <td align="left"
                                                                    style="font-size:0px;padding:0 6px 20px 0;word-break:break-word;">
                                                                    <table cellpadding="0" cellspacing="0"
                                                                        width="100%" border="0"
                                                                        style="color:#000000;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;border:none;">
                                                                        <tr align="right" height="67px"
                                                                            style="height: 67px">
                                                                            <td
                                                                                style="vertical-align: top; line-height: 1;">
                                                                                <mj-raw><?php echo esc_html($y_labels['0']); ?></mj-raw>
                                                                            </td>
                                                                        </tr>
                                                                        <tr align="right" height="67px"
                                                                            style="height: 67px">
                                                                            <td><mj-raw><?php echo esc_html($y_labels['1']); ?></mj-raw>
                                                                            </td>
                                                                        </tr>
                                                                        <tr align="right" height="67px"
                                                                            vertical-align="bottom"
                                                                            style="height: 67px">
                                                                            <td
                                                                                style="vertical-align: bottom; line-height: 1;">
                                                                                <span
                                                                                    vertical-align="bottom"><mj-raw><?php echo esc_html($y_labels['2']); ?></mj-raw></span>
                                                                            </td>
                                                                        </tr>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div><!--[if mso | IE]></td><td style="vertical-align:top;width:540px;" ><![endif]-->
                                <div class="mj-column-per-90 mj-outlook-group-fix chart-container"
                                    style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:90%;">
                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation"
                                        width="100%">
                                        <tbody>
                                            <tr>
                                                <td style="vertical-align:top;padding:0;">
                                                    <table border="0" cellpadding="0" cellspacing="0"
                                                        role="presentation" width="100%">
                                                        <tbody>
                                                            <tr>
                                                                <td align="left"
                                                                    style="font-size:0px;padding:0 24px 16px 8px;word-break:break-word;">
                                                                    <table cellpadding="0" cellspacing="0"
                                                                        width="100%" border="0"
                                                                        style="color:#000000;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;border:none;">
                                                                        <tr class="bar-chart-row" height="200"
                                                                            style="height: 200px; position:">
                                                                            <?php 
              for ($x = 0; $x < count($chart_views); $x++) :
                  if (count($chart_views) == 24) {
                      $color = ($x + 6) % 6 == 0 ? $colors['5'] : $colors['4']; 
                  } elseif (count($chart_views) == 7) {
                      $color = $x%2 == 0 ? $colors['4'] : $colors['5'];                             
                  } else {
                      $color = ($x + 5) % 5 == 0 ? $colors['5'] : $colors['4']; 
                  }
                  if ($chart_views[$x] == 0) {
                      $height = 0;
                  } else {
                      $height = round(($chart_views[$x]/$most_views) * 200);
                  } ?> <td height="200"
                                                                                style="height: 200px; padding: 2px; vertical-align: bottom;">
                                                                                <!--[if mso]><?php echo '<table height="200"><tr><td height="' . esc_attr($height) . '" style="background-color: ' . esc_attr($color) . '; height: ' . esc_attr($height) . 'px; width: 100%; color: ' . esc_attr($color) . '">A</td></tr></table>'; ?><![endif]-->
                                                                                <?php
                                                                                echo '<div height="' . esc_attr($height) . '" style="background-color: ' . esc_attr($color) . '; height: ' . esc_attr($height) . 'px; width: 100%"></div>';
                                                                                ?> <span
                                                                                    style="display: none; white-space: nowrap; width: 0; height: 0; line-height: 1.45; font-size: 12px;">
                                                                                    <?php echo number_format_i18n($chart_views[$x], 0); ?> </span></td>
                                                                            <?php endfor; ?> </tr>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td align="center" class="chart-border"
                                                                    style="font-size:0px;padding:0 24px 0 0;word-break:break-word;">
                                                                    <p
                                                                        style="border-top:solid 2px #ECE9F2;font-size:1px;margin:0px auto;width:100%;">
                                                                    </p><!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 2px #ECE9F2;font-size:1px;margin:0px auto;width:516px;" role="presentation" width="516px" ><tr><td style="height:0;line-height:0;"> &nbsp;
</td></tr></table><![endif]-->
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td align="left"
                                                                    style="font-size:0px;padding:2px 24px 0 4px;word-break:break-word;">
                                                                    <table cellpadding="0" cellspacing="0"
                                                                        width="100%" border="0"
                                                                        style="color:#000000;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;border:none;">
                                                                        <tr><mj-raw><?php foreach ($x_labels as $date) : ?></mj-raw>
                                                                            <td style="width: <?php echo 100 / count($x_labels); ?>%;"
                                                                                class="chart-date-label">
                                                                                <mj-raw><?php echo esc_html($date); ?></mj-raw>
                                                                            </td><mj-raw><?php endforeach; ?></mj-raw>
                                                                        </tr>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div><!--[if mso | IE]></td></tr></table><![endif]-->
                            </div><!--[if mso | IE]></td></tr></table><![endif]-->
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
        <div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
            <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
                style="background:#ffffff;background-color:#ffffff;width:100%;">
                <tbody>
                    <tr>
                        <td style="direction:ltr;font-size:0px;padding:12px 0 0 0;text-align:center;">
                            <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
                            <div class="mj-column-per-100 mj-outlook-group-fix"
                                style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                                <table border="0" cellpadding="0" cellspacing="0" role="presentation"
                                    style="vertical-align:top;" width="100%">
                                    <tbody>
                                        <tr>
                                            <td align="left"
                                                style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                                <div
                                                    style="font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;font-size:21px;font-weight:700;line-height:1;text-align:left;color:#000000;">
                                                    <mj-raw><?php esc_html_e("Top 10's", 'independent-analytics'); ?></mj-raw></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="center" class="heading-divider"
                                                style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                                <p
                                                    style="border-top:solid 2px <?php echo $colors['6']; ?>;font-size:1px;margin:0px auto;width:100%;">
                                                </p><!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 2px <?php echo $colors['6']; ?>;font-size:1px;margin:0px auto;width:550px;" role="presentation" width="550px" ><tr><td style="height:0;line-height:0;"> &nbsp;
</td></tr></table><![endif]-->
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div><!--[if mso | IE]></td></tr></table><![endif]-->
                        </td>
                    </tr>
                </tbody>
            </table>
        </div><!--[if mso | IE]></td></tr></table><![endif]--> <?php
$x = 0;
foreach($top_ten as $type) :
if ($x % 2 == 0) : ?>
        <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
        <div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
            <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
                style="background:#ffffff;background-color:#ffffff;width:100%;">
                <tbody>
                    <tr>
                        <td
                            style="direction:ltr;font-size:0px;padding:20px 0;padding-bottom:0;padding-top:6px;text-align:center;">
                            <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><![endif]-->
                            <?php endif;?>
                            <!--[if mso | IE]><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
                            <div class="mj-column-per-50 mj-outlook-group-fix"
                                style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                                <table border="0" cellpadding="0" cellspacing="0" role="presentation"
                                    style="vertical-align:top;" width="100%">
                                    <tbody>
                                        <tr>
                                            <td align="left" class="top-ten-table"
                                                style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                                <table cellpadding="0" cellspacing="0" width="100%" border="0"
                                                    style="color:#000000;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;border:none;">
                                                    <tr class="table-heading">
                                                        <th align="left"><?php echo $type['title']; ?></th>
                                                        <th align="right"><mj-raw><?php
                                                        if ($type['title'] == 'Link Patterns') {
                                                            esc_html_e('Clicks', 'independent-analytics');
                                                        } elseif ($type['title'] == 'Forms') {
                                                            esc_html_e('Submissions', 'independent-analytics');
                                                        } elseif ($type['title'] == 'Landing Pages') {
                                                            esc_html_e('Entrances', 'independent-analytics');
                                                        } elseif ($type['title'] == 'Exit Pages') {
                                                            esc_html_e('Exits', 'independent-analytics');
                                                        } else {
                                                            esc_html_e('Views', 'independent-analytics');
                                                        }
                                                        ?></mj-raw></th>
                                                    </tr><mj-raw><?php foreach ($type['rows'] as $row) : ?></mj-raw>
                                                    <tr>
                                                        <td class="name"><mj-raw><?php echo esc_html($row['title']); ?></mj-raw></td>
                                                        <td align="right"><mj-raw><?php echo esc_html(number_format_i18n($row['views'])); ?></mj-raw></td>
                                                    </tr><mj-raw><?php endforeach; ?></mj-raw>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div><!--[if mso | IE]></td><![endif]--> <?php if ($x % 2 != 0 || $x == count($top_ten) - 1) : ?>
                            <!--[if mso | IE]><td class="" style="vertical-align:top;width:300px;" ><![endif]-->
                            <div class="mj-column-per-50 mj-outlook-group-fix"
                                style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                                <table border="0" cellpadding="0" cellspacing="0" role="presentation"
                                    style="vertical-align:top;" width="100%">
                                    <tbody></tbody>
                                </table>
                            </div><!--[if mso | IE]></td></tr></table><![endif]-->
                        </td>
                    </tr>
                </tbody>
            </table>
        </div><!--[if mso | IE]></td></tr></table><![endif]--> <?php endif; ?><?php 
$x++;
endforeach; ?>
        <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="footer-outlook" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
        <div class="footer" style="margin:0px auto;max-width:600px;">
            <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
                style="width:100%;">
                <tbody>
                    <tr>
                        <td style="direction:ltr;font-size:0px;padding:12px;text-align:center;">
                            <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:576px;" ><![endif]-->
                            <div class="mj-column-per-100 mj-outlook-group-fix"
                                style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                                <table border="0" cellpadding="0" cellspacing="0" role="presentation"
                                    style="vertical-align:top;" width="100%">
                                    <tbody>
                                        <tr>
                                            <td align="center"
                                                style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                                <div
                                                    style="font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;font-size:13px;line-height:1.5;text-align:center;">
                                                    <mj-raw><?php
                                                    echo esc_html($footer_text);
                                                    ?></mj-raw></div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div><!--[if mso | IE]></td></tr></table><![endif]-->
                        </td>
                    </tr>
                </tbody>
            </table>
        </div><!--[if mso | IE]></td></tr></table><![endif]-->
    </div>
</body>

</html>
