<!DOCTYPE html>
<html lang="en">
<head>
<title><%= properties["reports.report"] %></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
    /* CLIENT-SPECIFIC STYLES */
    #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
    .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
    body, table, td, a{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
    table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
    img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */

    /* RESET STYLES */
    body{margin:0; padding:0;}
    img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
    table{border-collapse:collapse !important;}
    body{height:100% !important; margin:0; padding:0; width:100% !important;}

    /* iOS BLUE LINKS */
    .appleBody a {color:#68440a; text-decoration: none;}
    .appleFooter a {color:#999999; text-decoration: none;}

    #report-title span { font-size: 25px; display: block; }
    .report-email-subtitle{ font-size: 16px; font-weight: normal; padding: 15px 0px 0px 0px; line-height:16px; }

    .mobile-table {
        display: none !important;
    }
    .desktop-table {
        display: grid !important;
    }

    /* MOBILE STYLES */
    @media screen and (max-width: 525px) {
        .mobile-no-margin {
            margin:0px 0px !important;
        }
        .mobile-table {
            display: grid !important;
        }
        .desktop-table {
            display: none !important;
        }
        .table-title {
            padding-top:30px !important;
        }
        .app-name {
            margin-top: 100px !important;
        }

        /* FULL-WIDTH TABLES */
        table[class="responsive-table"]{
            width:100% !important;
        }

        /* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */
        td[class="padding"]{
          padding: 10px 5% 15px 5% !important;
        }

        td[class="padding-copy"]{
          padding: 10px 5% 10px 5% !important;
          text-align: left !important;
        }

        td[class="section-padding"]{
          padding: 10px 32px 10px 32px !important;
        }

        td[class="section-padding-bottom-image"]{
          padding: 50px 15px 0 15px !important;
        }

        table[class="mobile-button-container"]{
            margin:0 auto;
            width:100% !important;
        }

        a[class="mobile-button"]{
            width:90% !important;
            padding: 15px !important;
            border: 0 !important;
            font-size: 16px !important;
        }

        #report-title { font-size: 25px !important; line-height: 30px !important; }
        #report-title span { font-size: 20px; }
    }
</style>
</head>
<body style="margin: 0; padding: 0; background-color:#f2f2f2;">
<div style=" white-space:nowrap; font:15px courier; color:#ffffff; line-height:0; width:320px !important; min-width:320px !important; max-width:600px !important;">&nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
<div style="margin:100px auto;max-width:700px;" class="mobile-no-margin">

<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td bgcolor="#ffffff" align="center" style="padding: 0px 50px;" class="section-padding">
            <table border="0" cellpadding="0" cellspacing="0" width="600" class="responsive-table">
                <tr>
                    <td style="padding:38px 0 49px 0;">
                        <!-- HEADER -->
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td bgcolor="#ffffff" align="left" style="padding:0 15px;">
                                    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="responsive-table">
                                        <tr>
                                            <td style="padding: 30px 0px 30px 0px;" class="logo" align="left">
                                                <table border="0" cellpadding="0" cellspacing="0" width="100%" >
                                                    <tr>
                                                        <td bgcolor="#ffffff" width="100" align="left"><a href="<%= version.page %>" target="_blank"><img alt="Logo" src="<%= host %>/images/dashboard/logo.png" width="150" style="display: block; font-family: Helvetica, Arial, sans-serif; color: #666666; font-size: 16px;" border="0"></a></td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>

                        <!-- ONE COLUMN SECTION -->
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td bgcolor="#FFFFFF" align="left" style="padding: 20px 0px;69px 0;">
                                    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="responsive-table">
                                        <tr>
                                            <td>
                                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <td id="report-title" align="left" style="font-size: 35px; font-family: Helvetica, Arial, sans-serif; color: #333333; padding-top: 0px; line-height: 36px; font-weight: 600;" ><%- properties["reports.your"] %></td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <% for(var i=0; i < apps.length; i++) { %>
                <% if (apps[i] && apps[i].display) { %>
                <!-- THREE COLUMN SECTION -->

                <tr>
                    <td style="padding: 10px 0 30px 0;">
                        <table cellspacing="0" cellpadding="0" border="0" width="100%">
                            <tr>
                                <td valign="top" class="mobile-wrapper">
                                    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100%;" align="left">
                                        <tr>
                                            <td style="padding: 0 0 0px 0;">
                                                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                    <tr>
                                                        <td align="left" style="font-family: Arial, sans-serif; color: #333333; font-size: 24px; font-weight:bold;">
                                                            <img src="<%= host %>/appimages/<%= apps[i]._id %>.png" style="float:left; width:20px; height:20px; border-radius:5px; border:1px solid #DDD;" <% if(i !== 0) { %> class="app-name" <% } %> />
                                                            <div  style="float:left; padding-top:0px; margin-left:10px;" <% if(i !== 0) { %> class="app-name" <% } %>  ><%= apps[i].name %></div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <% for(var j in apps[i].results) {%>
                <% if (report.metrics[j]) { %>
                <tr>
                    <td style="padding: 10px 0 0 0; border-bottom: 1px #DDDDDD; ">
                        <table cellspacing="0" cellpadding="0" border="0" width="100%">
                            <tr>
                                <td valign="top" class="mobile-wrapper">
                                    <table cellpadding="0" cellspacing="0" border="0" width="48%" style="width: 48%;" align="left">
                                        <tr>
                                            <td style="padding: 0 0 14px 0;">
                                                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                    <tr>
                                                        <td align="left" style="font-family: Arial, sans-serif; color: #333333; font-size: 20px; font-weight: bold;" class="table-title">
                                                            <%= properties["reports."+j] %>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <% if (metricProps && metricProps[j]) { %>
                <tr class="desktop-table" >
                    <td style="padding: 5px 0 0 0; border-bottom: 1px dashed #dddddd;">
                        <table cellspacing="0" cellpadding="0" border="0" width="100%" style="display:inline-table">
                            <tr>
                                <td valign="top" class="mobile-wrapper">
                                    <% for(var k = 0; k < metricProps[j].length; k++) {  %>
                                    <% var item = metricProps[j][k]; %>
                                    <!-- left column -->
                                    <table cellpadding="0" cellspacing="0" border="0"  style="<% if(k == 0){ %>width: 48%;" align="left" <% } if(k ===1){ %> width:28%;" align="left"<%} if(k ===2) {%>  width:20%;" align="right" <%}%>>
                                        <tr>
                                            <td style="padding: 0 0 10px 0;">
                                                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                    <tr>
                                                        <th align="<% if(k == 0){ %>left<% } else {%>right<%} %>" style="font-family: arial, sans-serif;color: #979797;  font-size: 13px;word-wrap:break-word;word-break:break-word; font-weight: 400;"><%= item %></th>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                    <% } %>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <% } %>

                <% for(var key in apps[i].results[j]) {%>
                <% if (metrics[key] || j == "events") { var keyName = key; %>
                <% if (j == "events") { keyName = apps[i].results[j][key].name || keyName;}%>
                <tr class="desktop-table">
                    <td style="padding: 10px 0 0 0;">
                        <table cellspacing="0" cellpadding="0" border="0" width="100%" style="display:inline-table">
                            <tr>
                                <td valign="top" class="mobile-wrapper">
                                    <!-- LEFT COLUMN -->
                                    <table cellpadding="0" cellspacing="0" border="0" width="48%" style="width: 48%;" align="left">
                                        <tr>
                                            <td style="padding: 0 0 10px 0;">
                                                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                    <tr>
                                                        <% if (properties["reports."+keyName]) { %>
                                                        <td align="left" style="font-family: Arial, sans-serif; color: #333333; font-size: 13px;word-wrap:break-word;word-break:break-word;"><%= properties["reports."+keyName] %></td>
                                                        <% }else{ %>
                                                        <td align="left" style="font-family: Arial, sans-serif; color: #333333; font-size: 13px;word-wrap:break-word;word-break:break-word;"><%= keyName %></td>
                                                        <% } %>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                    <table cellpadding="0" cellspacing="0" border="0" width="28%" style="width: 28%;" align="left">
                                        <tr>
                                            <td style="padding: 0 0 10px 0;">
                                                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                    <tr>
                                                        <td align="right" style="font-family: Arial, sans-serif; color: #333333; font-size: 13px;"><%= apps[i].results[j][key].total %></td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                    <table cellpadding="0" cellspacing="0" border="0" width="20%" style="width: 20%;" align="right">
                                        <tr>
                                            <td style="padding: 0 0 10px 0;">
                                                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                    <tr>
                                                        <td align="right" style="font-family: Arial, sans-serif; <% if (apps[i].results[j][key].change != "NA" && apps[i].results[j][key].change != "0%") { %> <% if (apps[i].results[j][key].trend == "d" && j != "crash") { %> color: red; <% } else if (apps[i].results[j][key].trend == "u" && j != "crash"){ %> color: green; <% } else if (apps[i].results[j][key].trend == "d" && j == "crash") { %> color: green2; <% } else { %> color: red; <% } %> <% } else { %> color:#333333; <% } %> font-size: 13px;"><%= apps[i].results[j][key].change %></td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr class="mobile-table" style=" display: none; ">
                    <td style="padding: 10px 0 0 0;">
                        <table cellspacing="0" cellpadding="0" border="0" width="100%" style="display:inline-table">
                            <tr>
                                <td valign="top" class="mobile-wrapper">
                                    <table cellpadding="0" cellspacing="0" width="100%" border="0" align="left">
                                        <tr>
                                            <td style="padding: 0 0 10px 0;">
                                                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                    <tr>
                                                        <td style="font-family: arial, sans-serif;color: #979797;  font-size: 13px;word-wrap:break-word;word-break:break-word; font-weight: 400;">
                                                            <%= metricProps[j] && metricProps[j][0] %>
                                                        </td>
                                                        <% if (properties["reports."+keyName]) { %>
                                                        <td align="right" style="font-family: Arial, sans-serif; color: #333333; font-size: 13px;word-wrap:break-word;word-break:break-word; font-weight: bold;"><%= properties["reports."+keyName] %></td>
                                                        <% }else{ %>
                                                        <td align="right" style="font-family: Arial, sans-serif; color: #333333; font-size: 13px;word-wrap:break-word;word-break:break-word;font-weight: bold;"><%= keyName %></td>
                                                        <% } %>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <table cellpadding="0" cellspacing="0" border="0" width="100%"  align="left">
                                        <tr>
                                            <td style="padding: 0 0 10px 0;">
                                                <table cellpadding="0" cellspacing="0" width="100%" border="0" width="100%">
                                                    <tr>
                                                        <td  style="font-family: arial, sans-serif;color: #979797;  font-size: 13px;word-wrap:break-word;word-break:break-word; font-weight: 400;">
                                                            <%=  metricProps[j] && metricProps[j][1] %>
                                                        </td>
                                                        <td align="right" style="font-family: Arial, sans-serif; color: #333333; font-size: 13px;"><%= apps[i].results[j][key].total %></td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <table cellpadding="0" cellspacing="0" border="0" width="100%" align="right">
                                        <tr>
                                            <td style="padding: 0 0 10px 0;">
                                                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                    <tr>
                                                        <td style="font-family: arial, sans-serif;color: #979797;  font-size: 13px;word-wrap:break-word;word-break:break-word; font-weight: 400;" >
                                                            <%= metricProps[j] && metricProps[j][2] %>
                                                        </td>
                                                        <td align="right" style="font-family: Arial, sans-serif; <% if (apps[i].results[j][key].change != "NA" && apps[i].results[j][key].change != "0%") { %> <% if (apps[i].results[j][key].trend == "d" && j != "crash") { %> color: red; <% } else if (apps[i].results[j][key].trend == "u" && j != "crash"){ %> color: green; <% } else if (apps[i].results[j][key].trend == "d" && j == "crash") { %> color: green2; <% } else { %> color: red; <% } %> <% } else { %> color:#333333; <% } %> font-size: 13px;"><%= apps[i].results[j][key].change %></td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td style="border-top: 1px dashed #DDDDDD;">
                                    <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                        <tr>
                                            <td valign="top" class="mobile-wrapper">
                                                <table cellpadding="0" cellspacing="0" border="0" width="32%" style="width: 32%;" align="left">
                                                    <tr>
                                                        <td style="padding: 0 0 10px 0;">
                                                            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                                <tr>
                                                                    <td align="left" style="font-family: Arial, sans-serif; color: #333333; font-size: 16px; font-weight: bold;">

                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <% } %>
                <% } %>
                <tr class="desktop-table" >
                    <td style="padding: 10px 0 17px 0; border-top: 1px dashed #DDDDDD;">
                        <table cellspacing="0" cellpadding="0" border="0" width="100%">
                            <tr>
                                <td valign="top" class="mobile-wrapper">
                                    <table cellpadding="0" cellspacing="0" border="0" width="32%" style="width: 32%;" align="left">
                                        <tr>
                                            <td style="padding: 0 0 10px 0;">
                                                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                                    <tr>
                                                        <td align="left" style="font-family: Arial, sans-serif; color: #333333; font-size: 16px; font-weight: bold;">

                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>


                <% } %>
                <% } %>
                <% for(var key in apps[i].plugin_metrics) { %>
                <%- apps[i].plugin_metrics[key].html %>
                <% } %>


                <% } %>
                <% } %>
		<tr class="                    <td>
                        <!-- ONE COLUMN SECTION -->
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td bgcolor="#ffffff" align="center" style="padding: 0px 15px 64px 15px;" class="section-padding">
                                    <table border="0" cellpadding="0" cellspacing="0" width="500" class="responsive-table">
                                        <tr>
                                            <td>
                                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <td align="center">
                                                            <!-- BULLETPROOF BUTTON -->
                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
                                                                <tr>
                                                                    <td align="center" style="padding: 10px 0 0 0;" class="padding-copy">
                                                                        <table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
                                                                            <tr>
                                                                                <td align="center"><a href="<%= host %>/dashboard" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #3a9d3e; border-top: 15px solid #3a9d3e; border-bottom: 15px solid #3a9d3e; border-left: 25px solid #3a9d3e; border-right: 25px solid #3a9d3e; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="mobile-button"><%= properties["reports.to-dashboard"] %></a></td>
                                                                            </tr>
                                                                        </table>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>

                    </td>
                </tr>

                <tr class="desktop-table" style="padding-bottom: 100px;">
                    <td>
                        <!-- FOOTER -->
                        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #fff;">
                            <tr>
                                <td style="padding:50px 0px 10px 0px;">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="responsive-table" style="width:500px;">
                                        <tr>
                                            <td align="left" style="font-size: 12px; line-height: 18px; font-family: Helvetica, Arial, sans-serif; color:#666666;">
                                                <span style="color: #979797;"><%= properties["reports.sent-by"] %></span>
                                                <a style="color: #979797;" href="https://count.ly" target="_blank"><%= version.title %></a>
                                            </td>
                                            <td align="right" style="font-size: 12px; line-height: 18px; font-family: Helvetica, Arial, sans-serif; color:#666666;">
                                                <a style="color: #979797;padding:0 5px;" href="<%= host %>/dashboard#/manage/reports" target="_blank"><%= properties["reports.settings"] %></a> |
                                                <a style="color: #979797; padding:0 5px;" href="https://support.count.ly/hc/en-us/articles/360037876031-Email-reports" target="_blank"><%= properties["reports.get-help"] %></a>  
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>

                    </td>
                </tr>

                <tr class="mobile-table" style=" display : none; ">
                    <td>
                        <!-- FOOTER -->
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td style="padding:50px 0px 10px 0px;">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="left" class="responsive-table">
                                        <tr>
                                           <td align="center" style="font-size: 12px; line-height: 18px; font-family: Helvetica, Arial, sans-serif; color:#666666;">
                                                <a style="color: #979797;padding:0 5px;" href="<%= host %>/dashboard#/manage/reports" target="_blank"><%= properties["reports.settings"] %></a> |
                                                <a style="color: #979797; padding:0 5px;" href="https://support.count.ly/hc/en-us/articles/360037876031-Email-reports" target="_blank"><%= properties["reports.get-help"] %></a>  
                                            </td>
                                        </tr>
                                        <tr>
                                           <td align="center" style="padding:20px 0px 30px 0; font-size: 12px; line-height: 18px; font-family: Helvetica, Arial, sans-serif; color:#666666;">
                                                <span style="color: #979797;"><%= properties["reports.sent-by"] %></span>
                                                <a style="color: #979797;" href="https://count.ly" target="_blank"><%= version.title %></a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

</div>

</body>
</html>
