twigfiddle.com - Fiddle yz33zc v1 - Created on December 2, 2019 16:19

File

{% set assetsUrl = baseUrl ~ '/assets/mail' %}
{% macro icon(icon, assetsUrl) %}
    {% if icon %}
        <img src="{{ assetsUrl ~ '/' ~ icon ~ '.png' }}"
             width="22px"
             height="22px"
             style="vertical-align: middle;"
             title="{{ icon  }} Category Icon">
    {% endif %}
{% endmacro %}
{% macro categoryIconAndName(categoryName, assetsUrl) %}
    {% import _self as macros %}
    {% if categoryName %}
        <table width="100%">
            <tr>
                <td width="22px"
                    height="22px"
                    valign="middle">
                    {{ macros.icon(categoryName, assetsUrl) }}
                </td>
                <td valign="middle">
                    {{ categoryName  }}
                </td>
            </tr>
        </table>
    {% endif %}
{% endmacro %}
{% macro arrowUp(assetsUrl) %}
    <img src="{{ assetsUrl ~ '/arrow-up.png' }}"
         width="13px"
         height="13px"
         style="color: #12b728;"
         title="Increase by"
         alt="+">
{% endmacro %}
{% macro arrowDown(assetsUrl) %}
    <img src="{{ assetsUrl ~ '/arrow-down.png' }}"
         width="13px"
         height="13px"
         style="color: #ff2e2e;"
         title="Decrease by"
         alt="-">
{% endmacro %}
{% macro arrowEquals(assetsUrl) %}
    <img src="{{ assetsUrl ~ '/arrow-equals.png' }}"
         width="13px"
         height="13px"
         style="color: #717171;"
         title="No change"
         alt=" ">
{% endmacro %}
{% macro goal(array, assetsUrl) %}
    {% import _self as macros %}
    {% if array.goal > 0 %}
        {{ array.goal|number_format(1, ',', ' ') }}
        {% if array.goalAchieved %}
            <img src="{{ assetsUrl ~ '/check.png' }}"
                 width="16px"
                 height="16px"
                 style="color: #12b728;font-size: 12px;"
                 title="Goal achieved"
                 alt="&#10003;">
        {%  endif %}
    {% endif %}
{% endmacro %}
{% macro trend(array, assetsUrl, calculateFromZero) %}
    {% import _self as macros %}
    <table width="100%">
        <tr>
            {% if (array.current > 0 and array.previous > 0) or calculateFromZero %}
                {% if array.trend is not null %}
                    {% if array.trend > 0 %}
                        {{ macros.arrowUp(assetsUrl) }}
                        {{ array.trend|abs|number_format(1, ',', ' ') ~ '%' }}
                    {% elseif array.trend < 0 %}
                        {{ macros.arrowDown(assetsUrl) }}
                        {{ array.trend|abs|number_format(1, ',', ' ') ~ '%' }}
                    {% else %}
                        {{ macros.arrowEquals(assetsUrl) }}
                        {{ array.trend|abs|number_format(1, ',', ' ') ~ '%' }}
                    {% endif %}
                {% else %}
                    --
                {% endif %}
            {% else %}
                --
            {% endif %}
        </tr>
    </table>
{% endmacro %}
{% macro ratingTrend(array, assetsUrl) %}
    {% import _self as macros %}
    {% if array.current > 0 and array.previous > 0 %}
        {% if array.current > array.previous %}
            {{ macros.arrowUp(assetsUrl) }}
            {{ (array.current - array.previous )|abs|number_format(1, ',', ' ') }}
        {% elseif array.current < array.previous %}
            {{ macros.arrowDown(assetsUrl) }}
            {{ (array.current - array.previous )|abs|number_format(1, ',', ' ') }}
        {% else %}
            {{ (array.current - array.previous )|abs|number_format(1, ',', ' ') }}
        {% endif %}
    {% else %}
        --
    {% endif %}
{% endmacro %}
{% macro markIfNoCurrentFoodbacks(text, currentFoodbacks) %}
    {% if currentFoodbacks > 0 %}
        {{ text }}
    {% else %}
        --
    {% endif %}
{% endmacro %}
{% import _self as inline %}


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type"
          content="text/html; charset=UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
    <style type="text/css">
        #PreviewIntercomModal .ic_message_content h1,
        #PreviewIntercomModal .ic_message_content h2 {
            color: #0072b0 !important;
        }

        #PreviewIntercomModal .ic_message_without_image > .ic_message_internals > .ic_message_content {
            border-color: #0072b0 !important;
        }

        #PreviewIntercomModal .ic_user_comment_body {
            background-color: #0072b0 !important;
            border-color: #0072b0 !important;
        }

        #PreviewIntercomModal .ic_message_content a {
            color: #0072b0 !important;
        }

        #PreviewIntercomModal .ic_message_content a:hover {
            color: #0072b0 !important;
        }

        #PreviewIntercomModal .ic_user_comment_body {
            background-color: #0072b0 !important;
            border-color: #0072b0 !important;
        }

        .intercom-h2b-button br {
            display: none;
        }
    </style>
    <style type="text/css"
           data-premailer="ignore">
        /* styles in here will not be inlined. Use for media queries etc */
        /* force Outlook to provide a "view in browser" menu link. */
        #outlook a {
            padding: 0;
        }

        /* prevent Webkit and Windows Mobile platforms from changing default font sizes.*/
        body {
            width: 100% !important;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            margin: 0;
            padding: 0;
        }

        /* force Hotmail to display emails at full width */
        .ExternalClass {
            width: 100%;
        }

        /* force Hotmail to display normal line spacing. http://www.emailonacid.com/forum/viewthread/43/ */
        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
            line-height: 100%;
        }

        /* fix a padding issue on Outlook 07, 10 */
        table td {
            border-collapse: collapse;
        }

        table {
            table-layout: fixed;
        }

        @media only screen and (max-width: 360px) {
            .small_col {
                width: 30px;
            }
        }

        @media only screen and (max-width: 480px) {
            br.hidden {
                display: block !important;
            }

            td.padding_cell {
                display: none !important;
            }

            table.message_footer_table td {
                font-size: 11px !important;
            }
        }

        @media only screen and (max-device-width: 480px) {
            br.hidden {
                display: block !important;
            }

            td.padding_cell {
                display: none !important;
            }

            table.message_footer_table td {
                font-size: 11px !important;
            }
        }
    </style>

    <style type="text/css"
           data-premailer="ignore">
        /* styles in here will not be inlined. Use for media queries etc */
        /* force Outlook to provide a "view in browser" menu link. */
        #outlook a {
            padding: 0;
        }

        /* prevent Webkit and Windows Mobile platforms from changing default font sizes.*/
        body {
            width: 100% !important;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            margin: 0;
            padding: 0;
        }

        /* force Hotmail to display emails at full width */
        .ExternalClass {
            width: 100%;
        }

        /* force Hotmail to display normal line spacing. http://www.emailonacid.com/forum/viewthread/43/ */
        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
            line-height: 100%;
        }

        /* fix a padding issue on Outlook 07, 10 */
        table td {
            border-collapse: collapse;
        }

        @media only screen and (max-width: 480px) {
            br.hidden {
                display: block !important;
            }

            td.padding_cell {
                display: none !important;
            }

            table.message_footer_table td {
                font-size: 11px !important;
            }
        }

        @media only screen and (max-device-width: 480px) {
            br.hidden {
                display: block !important;
            }

            td.padding_cell {
                display: none !important;
            }

            table.message_footer_table td {
                font-size: 11px !important;
            }
        }
    </style>

    <style type="text/css">

        .admin_name b {
            color: #6f6f6f;
        }

        .date_cell a {
            color: #999999;
        }

        .comment_header_td {
            width: 100%;
            background: #e85E6c;
            border: none;
            font-family: 'Helvetica Neue', Arial, sans-serif
        }

        .content-td {
            color: #525252;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
            font-family: Helvetica, Arial, sans-serif;
        }

        .content-td h1 {
            font-size: 26px;
            line-height: 33px;
            color: #282F33;
            margin-bottom: 7px;
            margin-top: 30px;
            font-weight: normal;
        }

        .content-td h1 a {
            color: #282F33;
        }

        .content-td h2 {
            font-size: 18px;
            font-weight: bold;
            color: #282F33;
            margin: 30px 0 7px;
        }

        .content-td h2 a {
            color: #282F33;
        }

        .content-td h1 + h2 {
            margin-top: 0 !important;
        }

        .content-td h2 + h1 {
            margin-top: 0 !important;
        }

        .content-td h3,
        .content-td h4,
        .content-td h5 {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .content-td p {
            margin: 0 0 17px 0;
            line-height: 1.5;
        }

        .content-td p img,
        .content-td h1 img,
        .content-td h2 img,
        .content-td li img,
        .content-td .intercom-h2b-button img {
            margin: 0;
            padding: 0;
        }

        .content-td a {
            color: #1251ba;
        }

        .content-td p.intro {
            font-size: 20px;
            line-height: 30px;
        }

        .content-td blockquote {
            margin: 40px 0;
            font-style: italic;
            color: #8C8C8C;
            font-size: 18px;
            text-align: center;
            padding: 0 30px;
            font-family: Georgia, sans-serif;
            quotes: none;
        }

        .content-td blockquote a {
            color: #8C8C8C;
        }

        .content-td ul {
            list-style: disc;
            margin: 0 0 20px 40px;
            padding: 0;
        }

        .content-td ol {
            list-style: decimal;
            margin: 0 0 20px 40px;
            padding: 0;
        }

        .content-td img {
            max-width: 100%;
        }

        .content-td .intercom-container {
            margin-bottom: 16px;
        }

        .content-td hr {
            border: none;
            border-top: 1px solid #DDD;
            border-bottom: 0;
            margin: 50px 30% 50px 30%;
        }

        table.intercom-container {
            margin: 17px 0;
        }

        table.intercom-container.intercom-align-center {
            margin-left: auto;
            margin-right: auto;
        }

        table.intercom-container td {
            background-color: #e85E6c;
            padding: 12px 35px;
            border-radius: 3px;
            font-family: Helvetica, Arial, sans-serif;
            margin: 0;
        }

        .content-td .intercom-h2b-button {
            font-size: 14px;
            color: #FFF;
            font-weight: bold;
            display: inline-block;
            text-decoration: none;
            background-color: #e85E6c;
            border: none !important;

            padding: 13px 35px;

        }

        a.intercom-h2b-button {
            background-color: #0E4595;
            border-radius: 5px;
            border: 1px solid rgba(0, 0, 0, 0.2);
            color: #fff;
            display: inline-block;
            font-size: 15px;
            font-weight: bold;
            min-height: 20px;
            text-decoration: none;
        }

        .content-td .intercom-h2b-button:hover {
            background-color: #ee7884;
        }

        .message_footer_table .avatar {
            -ms-interpolation-mode: bicubic;
            -webkit-background-clip: padding-box;
            -webkit-border-radius: 20px;
            background-clip: padding-box;
            border-radius: 20px;
            display: inline-block;
            height: 40px;
            max-width: 100%;
            outline: none;
            text-decoration: none;
            width: 40px;
        }

        .powered-by-table .powered-by-text a {
            font-weight: bold;
            text-decoration: none;
            color: #999;
        }

        .main_wrapper {
            padding: 0 20px;
        }

        .margin-arrow {
            display: none;
            mso-hide: all;
            visibility: hidden;
            width: 0;
            height: 0;
            max-width: 0;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
        }

        .content-td > :first-child {
            margin-top: 0;
            padding-top: 0;
        }
    </style>


    <style type="text/css"
           data-premailer="ignore">

        @media screen and (max-width: 635px) {
            .main-wrap {
                width: 100% !important;
            }
        }

        @media screen and (max-width: 480px) {
            .content-td {
                padding: 30px 15px !important;
            }

            .content-td h1 {
                margin-bottom: 5px;
            }

            .message_footer_table .space {
                width: 20px !important;
            }

            .message_footer_table .arrow-wrap {
                padding-left: 20px !important;
            }

            .message_footer_table .admin_name b {
                display: block !important;
            }

            .main_wrapper {
                padding: 0;
            }

            .image-arrow {
                display: none !important;
            }

            .margin-arrow {
                display: table !important;
                visibility: visible !important;
                width: 100% !important;
                height: auto !important;
                max-width: none !important;
                max-height: none !important;
                opacity: 1 !important;
                overflow: visible !important;
            }

            .comment_body {
                border-bottom: 1px solid #DDD !important;
            }

            .footer-td-wrapper {
                display: block !important;
                width: 100% !important;
                text-align: left !important;
            }

            .footer-td-wrapper .date_cell {
                text-align: left !important;
                padding: 15px 0 0 20px !important;
            }
        }

    </style>


    <style type="text/css"
           data-premailer="ignore">
        .content-td blockquote + * {
            margin-top: 20px !important;
        }

        .ExternalClass .content-td h1 {
            padding: 20px 0 !important;
        }

        .ExternalClass .content-td h2 {
            padding: 0 0 5px !important;
        }

        .ExternalClass .content-td p {
            padding: 10px 0 !important;
        }

        .ExternalClass .content-td .intercom-container {
            padding: 5px 0 !important;
        }

        .ExternalClass .content-td hr + * {
            padding-top: 30px !important;
        }

        .ExternalClass .content-td ol,
        .ExternalClass .content-td ul {
            padding: 0 0 20px 40px !important;
            margin: 0 !important;
        }

        .ExternalClass .content-td ol li,
        .ExternalClass .content-td ul li {
            padding: 3px 0 !important;
            margin: 0 !important;
        }

        .content-td > :first-child {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }

        .ExternalClass .content-td > :first-child {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }
    </style>


    <style type="text/css">
        .intercom-align-right {
            text-align: right !important;
        }

        .intercom-align-center {
            text-align: center !important;
        }

        .intercom-align-left {
            text-align: left !important;
        }

        /* Over-ride for RTL */
        .right-to-left .intercom-align-right {
            text-align: left !important;
        }

        .right-to-left .intercom-align-left {
            text-align: right !important;
        }

        .right-to-left .intercom-align-left {
            text-align: right !important;
        }

        .right-to-left li {
            text-align: right !important;
            direction: rtl;
        }

        .right-to-left .intercom-align-left img,
        .right-to-left .intercom-align-left .intercom-h2b-button {
            margin-left: 0 !important;
        }

        .intercom-attachment,
        .intercom-attachments,
        .intercom-attachments td,
        .intercom-attachments th,
        .intercom-attachments tr,
        .intercom-attachments tbody,
        .intercom-attachments .icon,
        .intercom-attachments .icon img {
            border: none !important;
            box-shadow: none !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        .intercom-attachments {
            margin: 10px 0 !important;
        }

        .intercom-attachments .icon,
        .intercom-attachments .icon img {
            width: 16px !important;
            height: 16px !important;
        }

        .intercom-attachments .icon {
            padding-right: 5px !important;
        }

        .intercom-attachment {
            display: inline-block !important;
            margin-bottom: 5px !important;
        }

        .intercom-interblocks-content-card {
            width: 334px !important;
            max-height: 136px !important;
            max-width: 100% !important;
            overflow: hidden !important;
            border-radius: 20px !important;
            font-size: 16px !important;
            border: 1px solid #e0e0e0 !important;
        }

        .intercom-interblocks-link,
        .intercom-interblocks-article-card {
            text-decoration: none !important;
        }

        .intercom-interblocks-article-icon {
            width: 22.5% !important;
            height: 136px !important;
            float: left !important;
            background-color: #fafafa !important;
            background-image: url('https://static.intercom-mail-400.com/assets/article_book-1a595be287f73c0d02f548f513bfc831.png') !important;
            background-repeat: no-repeat !important;
            background-size: 32px !important;
            background-position: center !important;
        }

        .intercom-interblocks-article-text {
            width: 77.5% !important;
            float: right !important;
            background-color: #fff !important;
        }

        .intercom-interblocks-link-title,
        .intercom-interblocks-article-title {
            color: #519dd4 !important;
            font-size: 15px !important;
            margin: 16px 18px 12px !important;
            line-height: 1.3em !important;
            overflow: hidden !important;
        }

        .intercom-interblocks-link-description,
        .intercom-interblocks-article-body {
            margin: 0 18px 12px !important;
            font-size: 14px !important;
            color: #65757c !important;
            line-height: 1.3em !important;
        }

        .intercom-interblocks-link-author,
        .intercom-interblocks-article-author {
            margin: 10px 15px !important;
            height: 24px !important;
            line-height: normal !important;
        }

        .intercom-interblocks-link-author-avatar,
        .intercom-interblocks-article-author-avatar {
            width: 16px !important;
            height: 16px !important;
            display: inline-block !important;
            vertical-align: middle !important;
            float: left;
            margin-right: 5px;
        }

        .intercom-interblocks-link-author-avatar-image,
        .intercom-interblocks-article-author-avatar-image {
            width: 16px !important;
            height: 16px !important;
            border-radius: 50% !important;
            margin: 0 !important;
            vertical-align: top !important;
            font-size: 12px !important;
        }

        .intercom-interblocks-link-author-name,
        .intercom-interblocks-article-author-name {
            color: #74848b !important;
            margin: 0 0 0 5px !important;
            font-size: 12px !important;
            font-weight: 500 !important;
            overflow: hidden !important;
        }

        .intercom-interblocks-article-written-by {
            color: #8897a4 !important;
            margin: 1px 0 0 5px !important;
            font-size: 12px !important;
            overflow: hidden !important;
            vertical-align: middle !important;
            float: left !important;
        }

    </style>


</head>
<body>


<table cellpadding="0"
       cellspacing="0"
       border="0"
       class="bgtc personal"
       align="center"
       style="border-collapse: collapse; line-height: 100% !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; width: 100% !important; background-color: #f9f9f9;">
    <tr>
        <td>
            <!--[if (gte mso 10)]>
            <tr>
                <td>
                    <table style="width: 600px">
            <![endif]-->
            <table style="border-collapse: collapse; margin: auto; width: 100%; max-width: 635px; min-width: 320px; mso-table-lspace: 0pt; mso-table-rspace: 0pt"
                   class="main-wrap">
                <tr>
                    <td valign="top">
                        <table cellpadding="0"
                               cellspacing="0"
                               border="0"
                               class="reply_header_table"
                               style="border-collapse: collapse; color: #c0c0c0; font-family: 'Helvetica Neue',Arial,sans-serif; font-size: 13px; line-height: 26px; margin: 0 auto 26px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%">
                        </table>
                    </td>
                </tr>
                <tr>
                    <td valign="top"
                        class="main_wrapper">

                        <table cellpadding="0"
                               cellspacing="0"
                               border="0"
                               class="comment_wrapper_table admin_comment"
                               align="center"
                               style="-webkit-background-clip: padding-box; -webkit-border-radius: 3px; background-clip: padding-box; border-collapse: collapse; border-radius: 3px; color: #545454; font-family: 'Helvetica Neue',Arial,sans-serif; font-size: 13px; line-height: 20px; margin: 0 auto; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%">
                            <tr>
                                <td valign="top"
                                    class="comment_wrapper_td">
                                    <table cellpadding="0"
                                           cellspacing="0"
                                           border="0"
                                           class="comment_header"
                                           style="border-collapse: separate; border: none; font-size: 1px; height: 2px; line-height: 3px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%">
                                        <tr>
                                            <td valign="top"
                                                class="comment_header_td">
                                            </td>
                                        </tr>
                                    </table>
                                    <table cellpadding="0"
                                           cellspacing="0"
                                           border="0"
                                           class="comment_body"
                                           style="-webkit-background-clip: padding-box; -webkit-border-radius: 0 0 3px 3px; background-clip: padding-box; border-collapse: collapse; border-color: #dddddd; border-radius: 0 0 3px 3px; border-style: solid; border-width: 0 1px 1px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; border-bottom: none">
                                        <tr>
                                            <td class="comment_body_td content-td"
                                                style="-webkit-background-clip: padding-box; -webkit-border-radius: 0 0 3px 3px; background-clip: padding-box; border-radius: 0 0 3px 3px; color: #525252; font-family: 'Helvetica Neue',Arial,sans-serif; font-size: 15px; line-height: 22px; overflow: hidden; padding: 40px 40px 30px; background-color: white;">
                                                <div class="right-to-left">
                                                    <!-- CONTENT -->
                                                    <table width="100%"
                                                           bgcolor="#ffffff"
                                                           cellpadding="0"
                                                           cellspacing="0">
                                                        <tr>
                                                            <td>
                                                                <h2 style="margin: 0">Foodback Daily Report</h2>
                                                            </td>
                                                            <td rowspan="2"
                                                                width="60px">
                                                                <img width="60px"
                                                                     height="60px"
                                                                     alt="Foodback Logo"
                                                                     src="http://beta.foodback.com/wp-content/uploads/2016/08/Foodback-Logo-1000x874-transparent-bg-150x150.png">
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="display: table;">
                                                                <table width="100%">
                                                                    <tr>
                                                                        <!-- REPORT DETAILS -->
                                                                        <td valign="middle"
                                                                            width="13px">
                                                                            <img src="{{ assetsUrl ~ '/restaurant.png' }}"
                                                                                 width="13px"
                                                                                 height="13px">
                                                                        </td>
                                                                        <td valign="middle" style="font-size: 13px; font-family: 'Roboto';">
                                                                            {{ venueBrandName }}
                                                                            <span style="font-size: 13px; color: #717171">
                                                                               | {{ reportDate | date('D d.m.Y') | upper }}
                                                                            </span>
                                                                        </td>
                                                                        <!-- /REPORT DETAILS -->
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td colspan="2"
                                                                style="padding-top: 10px;">
                                                                Good morninig, here is yesterday's report for your venue.
                                                                To read all the foodbacks and dig deeper, log into Foodback.
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <!-- LOG IN BUTTON -->
                                                            <td colspan="2"
                                                                style="padding-top: 20px;">

                                                                <table style="width: 190px; height: 36px; background: #e85e6c; padding: 10px 22px; border-radius: 100px; border-color: transparent; ">
                                                                    <tr>
                                                                        <td>
                                                                            <a href="{{ baseUrl }}/home/dashboard/{{ venueUuid }}"
                                                                               style="color: white; text-decoration: none; text-transform: uppercase; font-size: 13px; white-space: nowrap;">
                                                                                <div>
                                                                                    Log into Foodback
                                                                                </div>
                                                                            </a></td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                            <!-- /LOG IN BUTTON -->
                                                        </tr>
                                                    </table>
                                                    <!-- /TOP PART -->
                                                    <!-- USAGE & RATINGS TABLE -->
                                                    <table style="width: 100%; margin-top: 20px;">
                                                        <!-- USAGE -->
                                                        <tr>
                                                            <td colspan="5"
                                                                style="text-transform: uppercase; border-bottom: 1px solid #ccc; padding-bottom: 5px;">
                                                                Usage
                                                            </td>
                                                        </tr>
                                                        <tr style="font-size: 12px; text-transform: uppercase; color: #717171;">
                                                            <td colspan="2"></td>
                                                            <td style="padding-top: 15px;">{{ reportDate | date('D d.m') }}</td>
                                                            <td style="padding-top: 15px;">Day Before</td>
                                                            <td style="padding-top: 15px;">Trend</td>
                                                        </tr>

                                                        <!-- SINGLE METRIC ENTRY -->
                                                        <tr>
                                                            <td colspan="2" style="font-weight: bold;">Foodbacks</td>
                                                            <td>{{ usage.foodbacks.current|number_format(0, ',', ' ') }}</td>
                                                            <td>{{ usage.foodbacks.previous|number_format(0, ',', ' ') }}</td>
                                                            <td>
                                                                {{ inline.trend(usage.foodbacks, assetsUrl, true) }}
                                                            </td>
                                                        </tr>
                                                        <!-- /SINGLE METRIC ENTRY -->
                                                        <!-- SINGLE METRIC ENTRY -->
                                                        <tr>
                                                            <td colspan="2" style="font-weight: bold;">Response Rate</td>
                                                            <td>{{ inline.markIfNoCurrentFoodbacks(usage.responseRate.current|number_format(0, ',', ' ') ~ '%', usage.foodbacks.current) }}</td>
                                                            <td>{{ inline.markIfNoCurrentFoodbacks(usage.responseRate.previous|number_format(0, ',', ' ') ~ '%', usage.responseRate.previous)}}</td>
                                                            <td>{{ inline.trend(usage.responseRate, assetsUrl, false) }}</td>
                                                        </tr>
                                                        <!-- /SINGLE METRIC ENTRY -->
                                                        <!-- SINGLE METRIC ENTRY -->
                                                        <tr>
                                                            <td colspan="2" style="font-weight: bold;">Emails Collected</td>
                                                            <td>{{ usage.emails.current|number_format(0, ',', ' ') }}</td>
                                                            <td>{{ usage.emails.previous|number_format(0, ',', ' ') }}</td>
                                                            <td>{{ inline.trend(usage.emails, assetsUrl, true) }}</td>
                                                        </tr>
                                                        <!-- /SINGLE METRIC ENTRY -->
                                                        <!-- /USAGE -->
                                                        <!-- SPACE: -->
                                                        <tr>
                                                            <td style="padding: 10px;"></td>
                                                        </tr>
                                                        <!-- RATINGS -->
                                                        <tr>
                                                            <td colspan="5"
                                                                style="text-transform: uppercase; border-bottom: 1px solid #ccc; padding-bottom: 5px;">
                                                                Ratings
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <table style="width: 100%">
                                                        <tr style="font-size: 12px; text-transform: uppercase; color: #717171;">
                                                            <td colspan="2"></td>
                                                            <td style="padding-top: 15px; width: 90px;">{{ reportDate | date('D d.m') }}</td>
                                                            <td class="small_col" style="padding-top: 15px;"></td>
                                                            <td style="padding-top: 15px;">{% if goalsActive %}Goal{% endif %}</td>
                                                        </tr>
                                                        {% for rating in ratings %}
                                                            <tr>
                                                                <td colspan="2" style="font-weight: bold; line-height: 22px;">
                                                                    {{ inline.categoryIconAndName(rating.name, assetsUrl) }}
                                                                </td>
                                                                <td {% if loop.first %}style="font-weight: bold;"{% endif %}>
                                                                    {{ inline.markIfNoCurrentFoodbacks(rating.current|number_format(1, ',', ' '), rating.current) }}
                                                                    ({{ inline.ratingTrend(rating, assetsUrl) }})
                                                                </td>
                                                                <td></td>
                                                                <td {% if loop.first %}style="font-weight: bold;"{% endif %}>
                                                                    {{ inline.goal(rating, assetsUrl) }}
                                                                </td>
                                                            </tr>
                                                        {% endfor %}
                                                        <!-- /RATINGS -->
                                                    </table>
                                                    <!-- /USAGE & RATINGS TABLE -->
                                                    {% if goalAchieved == ratings|length  %}
                                                        <div style="margin-top: 20px;background-color: #12b728;padding: 10px 50px;color: white;font-weight: bold;border-radius: 5px;">
                                                            <table style="width: 100%">
                                                                <tbody>
                                                                <tr>
                                                                    <td width="20px" valign="middle">
                                                                        <img style="vertical-align: middle;"
                                                                                             title="Cup Icon"
                                                                                             src="{{ assetsUrl ~ '/cup.png' }}">
                                                                    </td>
                                                                    <td valign="middle" style="color: white;">
                                                                        You reached all your goals this day, great work!
                                                                    </td>
                                                                </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    {% endif %}
                                                    <!-- BOTTOM RATED QUESTION -->
                                                    {% if bottomRatedStatement %}
                                                        <table style="width: 100%; margin-top: 20px;">
                                                            <tr>
                                                                <td style="text-transform: uppercase; border-bottom: 1px solid #ccc; padding-bottom: 5px;">
                                                                    Bottom Rated Question
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td style="font-size: 16px; line-height: 22px; padding-top: 15px;">
                                                                    Your lowest rated question this day was:
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td style="font-size: 16px; line-height: 22px;">
                                                                    <b>"{{ bottomRatedStatement.getLow().getStatement().getEnTranslationWithFallback() }}"</b> from
                                                                    {{ inline.icon(bottomRatedStatement.getCategory().getName(), assetsUrl) }}
                                                                    {{ bottomRatedStatement.getCategory().getName() }}
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    {% endif %}
                                                    <!-- /BOTTOM RATED QUESTION -->
                                                    <!-- COMMENTS -->
                                                    <table style="width: 100%; margin-top: 20px;">
                                                        <tr>
                                                            <td style="text-transform: uppercase; border-bottom: 1px solid #ccc; padding-bottom: 5px;">
                                                                Comments
                                                            </td>
                                                        </tr>
                                                        {% if comments is empty %}
                                                            <tr>
                                                                <td style="font-size: 15px; line-height: 22px; padding-top: 15px; font-style: italic; color: #717171;">
                                                                    No comments were written this day.
                                                                </td>
                                                            </tr>
                                                        {% endif %}
                                                    </table>
                                                    <!-- COMENTS CONTAINER -->
                                                    <table style="width: 100%; color: #717171">
                                                        <!-- COMENTS CONTAINER -->
                                                        {% for comment in comments %}
                                                            <tr>
                                                                <td style="font-size: 28px; width: 15%; padding-top: 15px; vertical-align: initial; font-family: 'Roboto'">
                                                                    {{ comment.overallExperienceAverage is empty ? 'n/a' : comment.overallExperienceAverage|number_format(1) }}
                                                                </td>
                                                                <td style="font-size: 15px; line-height: 22px; padding-top: 15px;">
                                                                    <div style="font-size: 12px; text-transform: uppercase;">
                                                                        <b>
                                                                            {{ comment.date | date('D d.m - H:i') }}
                                                                        </b>
                                                                        {% if comment.infos is not empty %}
                                                                            |
                                                                        {% endif %}
                                                                        {% for info in comment.infos %}
                                                                            {{ loop.last ? info : info ~ ', ' }}
                                                                        {% endfor %}
                                                                    </div>
                                                                    <div style="font-family: 'Roboto', sans-serif; color: #000;">
                                                                        {{ comment.content }}
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        {% endfor %}
                                                    </table>
                                                    <!-- /COMENTS CONTAINER -->
                                                    <div style="margin-top: 15px;">
                                                        {% if commentsCount > commentsLimit %}
                                                            <p>Wow, you got {{ commentsCount }} comments today! This report shows the first 25,
                                                                <a style="color: #e85e6c; text-decoration: none;" href="{{ viewFoodbacksWithCommentsUrl }}">log into Foodback</a> to view the rest.
                                                            </p>
                                                        {% else %}
                                                            <a style="color: #e85e6c; text-decoration: none;" href="{{ viewFoodbacksWithCommentsUrl }}">
                                                                View all foodbacks with comment
                                                            </a>
                                                        {% endif %}
                                                    </div>
                                                    <!-- /COMMENTS -->
                                                    <!-- /CONTENT -->
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>

                        <div class="margin-arrow">
                            <table cellpadding="0"
                                   cellspacing="0"
                                   border="0"
                                   class="message_footer_table margin-arrow"
                                   align="center"
                                   style="border-collapse: collapse; color: #545454; font-family: 'Helvetica Neue',Arial,sans-serif; font-size: 13px; line-height: 20px; margin: 0 auto; max-width: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%">
                                <tr>
                                    <td valign="top"
                                        width="80"
                                        class="arrow-wrap"
                                        style="color: #272727; height: 18px; text-align: left; padding-left: 40px;">
                                        <img alt="Triangle"
                                             class="image_fix"
                                             height="18"
                                             src="https://marketing.intercomassets.com/assets/email/personal/triangle-8747882e9ef8882f9bc057241fd3c049.png"
                                             style="-ms-interpolation-mode: bicubic; display: inline-block; max-width: 100%; outline: none; text-decoration: none; margin-top: -1px;"
                                             width="40">
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="image-arrow">
                            <table cellpadding="0"
                                   cellspacing="0"
                                   border="0"
                                   class="message_footer_table image-arrow"
                                   align="center"
                                   style="border-collapse: collapse; margin: 0 auto; max-width: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%">
                                <tr>
                                    <td valign="top"
                                        width="100%">
                                        <img alt=""
                                             src="https://marketing.intercomassets.com/assets/email/personal/arrow-37f6774809df6fd083bfc98e9d562e23ca6ede618e2b5e10c042de88d2f858dd.png"
                                             style="max-width: 100%; width: 100%;">
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <table cellpadding="0"
                               cellspacing="0"
                               border="0"
                               class="message_footer_table"
                               align="center"
                               style="border-collapse: collapse; color: #545454; font-family: 'Helvetica Neue',Arial,sans-serif; font-size: 13px; line-height: 20px; margin: 0 auto; max-width: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%">
                            <tr>
                                <table width="100%"
                                       cellpadding="0"
                                       cellspacing="0"
                                       border="0">
                                    <tr>
                                        <td width="75%"
                                            class="footer-td-wrapper">
                                            <table width="100%"
                                                   cellpadding="0"
                                                   cellspacing="0"
                                                   border="0"
                                                   style="border-collapse: collapse; color: #545454; font-family: 'Helvetica Neue',Arial,sans-serif; font-size: 13px; line-height: 20px; margin: 0 auto; max-width: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%"
                                                   class="message_footer_table">
                                                <tr>
                                                    <td width="40"
                                                        class="space">
                                                    </td>

                                                    <td valign="middle"
                                                        width="50"
                                                        style="color: #272727;"
                                                        align="left">
                                                        <img src="{{ assetsUrl }}/team-foodback.png"
                                                             height="40"
                                                             width="40"
                                                             class="avatar"
                                                             alt="intercomavatar">
                                                    </td>

                                                    <td class="admin_name"
                                                        style="color: #999999">
                                                        Team Foodback
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                        <td width="25%"
                                            class="footer-td-wrapper">
                                            <table width="100%"
                                                   cellpadding="0"
                                                   cellspacing="0"
                                                   border="0"
                                                   style="border-collapse: collapse; color: #545454; font-family: 'Helvetica Neue',Arial,sans-serif; font-size: 13px; line-height: 20px; margin: 0 auto; max-width: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%"
                                                   class="message_footer_table">
                                                <tr>
                                                    <td valign="middle"
                                                        align="right"
                                                        class="date_cell"
                                                        style="color: #999999; text-align: right; font-size: 11px;">

                                                        <a href="{{ baseUrl }}/my-profile">Unsubscribe</a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td valign="bottom"
                        height="20">
                        <div class="main_wrapper">
                            <div style="border-bottom: 1px solid #ccc;">&nbsp;</div>
                        </div>
                    </td>
                </tr>
            </table>
            <!--[if (gte mso 10)]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </td>
    </tr>
</table>

<table style="width: 100%; border-collapse: collapse; color: #545454; font-family: 'Helvetica Neue',Arial,sans-serif; font-size: 13px; line-height: 20px; margin: 0 auto; max-width: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; letter-spacing: 0.02em; background-color: #f9f9f9;"
       class="powered-by-table">
    <tr>
        <td class="powered-by-text"
            style="text-align: center; width:100%; padding: 10px 0; color: #999999; font-size: 11px;">
            You get this email because you're a Foodback user for restaurant {{ venueBrandName }}
        </td>
    </tr>
    <tr>
        <td class="powered-by-text"
            style="text-align: center; width:100%; padding-top: 10px; color: #999999; font-size: 11px;">
            Follow us for all latest and greatest about Foodback:
        </td>
    </tr>
    <tr>
        <td class="powered-by-text"
            style="text-align: center; width:100%; padding: 0; color: #999999; font-size: 11px;">
            <table width="142px"
                   style="margin: 0 auto;">
                <tr>
                    <td>
                        <a href="https://www.linkedin.com/company/foodback-as/"
                           style="text-decoration: none;"
                           target="_blank">
                            <img src="{{ assetsUrl ~ '/icon-footer-1.png' }}"
                                 height="32"
                                 width="32"
                                 title="Foodback on LinkedIn"
                                 alt="LinkedIn">
                        </a>
                    </td>
                    <td>
                        <a href="https://www.facebook.com/foodbackcom/"
                           style="text-decoration: none;"
                           target="_blank">
                            <img src="{{ assetsUrl ~ '/icon-footer-2.png' }}"
                                 height="32"
                                 width="32"
                                 title="Foodback on Facebook"
                                 alt="Facebook">
                        </a>
                    </td>
                    <td>
                        <a href="https://www.instagram.com/foodback/"
                           style="text-decoration: none;"
                           target="_blank">
                            <img src="{{ assetsUrl ~ '/icon-footer-3.png' }}"
                                 height="32"
                                 width="32"
                                 title="Foodback on Instagram"
                                 alt="Instagram">
                        </a>
                    </td>
                    <td>
                        <a href="https://twitter.com/foodbackcom"
                           style="text-decoration: none;"
                           target="_blank">
                            <img src="{{ assetsUrl ~ '/icon-footer-4.png' }}"
                                 height="32"
                                 width="32"
                                 title="Foodback on Twitter"
                                 alt="Twitter">
                        </a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

</body>
</html>

Format

{
  "header": "Septemeber 2019",
  "brandName": "Account brandname",
  "accountUuid": "434tyg4g3t23t2ghgrqr",
  "baseUrl": "test.com",
  "venueBrandName": "venueBrandName",
  "dateFrom": "12-05-2018",
  "dateTo": "12-05-2018",
  "venueUuid": "venueUuid",
  "monthYearLabel": "JAN 2020",
  "usage": {
    "foodbacks": {
      "current": 345,
      "previous": 300,
      "trend": 4.5,
      "trendChange": "up"
    },
    "comments": {
      "current": 345,
      "previous": 300,
      "trend": 4.5,
      "trendChange": "up"
    },
    "responseRate": {
      "current": 345,
      "previous": 300,
      "trend": 4.5,
      "trendChange": "up"
    },
    "emails": {
      "current": 345,
      "previous": 300,
      "trend": 4.5,
      "trendChange": "up"
    }
  },
  "goalsActive": true,
  "ratings": [
    {
      "name": "statement_category.overall",
      "current": 5.3,
      "previous": 2.5,
      "icon": "goal",
      "goalAchieved": "yes",
      "goal": 5.5,
      "trendChange": "up"
    },
    {
      "name": "statement_category.meal",
      "current": 5.3,
      "previous": 2.5,
      "icon": "statement_category.meal.icon",
      "goalAchieved": "yes",
      "goal": 5.5,
      "trendChange": "up"
    },
    {
      "name": "statement_category.service",
      "current": 5.3,
      "previous": 2.5,
      "icon": "statement_category.service.icon",
      "goalAchieved": "yes",
      "goal": 5.5,
      "trendChange": "up"
    },
    {
      "name": "statement_category.atmosphere",
      "current": 5.3,
      "previous": 2.5,
      "icon": "statement_category.atmosphere.icon",
      "goalAchieved": "no",
      "goal": 5.5,
      "trendChange": "down"
    },
    {
      "name": "statement_category.restaurant",
      "current": 5.3,
      "previous": 2.5,
      "icon": "statement_category.restaurant.icon",
      "goalAchieved": "almost",
      "goal": 5.5,
      "trendChange": "same"
    }
  ],
  "scoreboardUp": [
    {
      "number": 1,
      "name": "Venue name 1",
      "overallExperience": 5.4,
      "foodbacksCount": 320,
      "trendChange": "up",
      "goal": 5.2,
      "goalAchieved": "yes"
    },
    {
      "number": 2,
      "name": "Venue name 2",
      "overallExperience": 5.4,
      "foodbacksCount": 320,
      "trendChange": "down",
      "goal": 5.2,
      "goalAchieved": "almost"
    },
    {
      "number": 2,
      "name": "Venue name 2",
      "overallExperience": 5.4,
      "foodbacksCount": 320,
      "trendChange": "down",
      "goal": 5.2,
      "goalAchieved": "no"
    }
  ],
  "scoreboardDown": [
    {
      "number": 1,
      "name": "Venue name 1",
      "overallExperience": 5.4,
      "foodbacksCount": 320,
      "trendChange": "up",
      "goal": 5.2,
      "goalAchieved": "yes"
    },
    {
      "number": 2,
      "name": "Venue name 2",
      "overallExperience": 5.4,
      "foodbacksCount": 320,
      "trendChange": "down",
      "goal": 5.2,
      "goalAchieved": "almost"
    },
    {
      "number": 2,
      "name": "Venue name 2",
      "overallExperience": 5.4,
      "foodbacksCount": 320,
      "trendChange": "down",
      "goal": 5.2,
      "goalAchieved": "no"
    }
  ],
  "goalAchieved": 4,
  "hiddenVenuesNumber": 55,
  "bottomRatedStatement": false,
  "reportDate": "12-05-2018",
  "comments": [
    {
      "overallExperienceAverage": 3.4,
      "date": "12-05-2018",
      "infos": [],
      "content": "Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test "
    }
  ],
  "commentsCount": 0,
  "commentsLimit": 0,
  "viewFoodbacksWithCommentsUrl": "test.ccc"
}