{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
}}
{{!
    @template message_email/email_digest_html

    Template which defines a forum post for sending in a single-post HTML email.

    Classes required for JS:
    * none

    Data attributes required for JS:
    * none

    Example context (json):
    {
        "conversations": [
            {
                "groupname": "Blue Students",
                "grouppictureurl": "http://example.com/image.jpg",
                "coursename": "Math 101",
                "numberofunreadmessages": "2",
                "messages": [
                    {
                        "userfullname": "Chris Cross",
                        "userpictureurl": "http://example.com/image.jpg",
                        "message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla neque nunc, bibendum ac vestibulum sit amet, scelerisque luctus sem. Maecenas ultricies hendrerit augue, ac venenatis odio volutpat nec",
                        "timesent": "10:12"
                    },
                    {
                        "userfullname": "Irene Ipsum",
                        "userpictureurl": "http://example.com/image.jpg",
                        "message": "Etiam a tristique risus. Pellentesque id tellus eget elit dictum varius id sed sapien",
                        "timesent": "10:14"
                    }
                ],
                "viewallmessageslink": "http://example.com"
            }
        ]
    }
}}
<head>
    <style>
        .table {
            color: #373a3c;
            border: 1px solid #dee2e6;
            border-collapse: collapse;
            font-size: 14px;
            margin-bottom: 20px;
            width: 100%;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        }
        .table th {
            font-weight: normal;
            background-color: #F2F2F2;
            border-bottom: 1px solid #dee2e6;
            padding: 10px;
            vertical-align: top;
        }
        .text-start {
            text-align: left;
        }
        .text-end {
            text-align: right;
        }
        .float-right {
            float: right;
        }
        .table td {
            padding: 10px;
            vertical-align: top;
        }
        .badge {
            background-color: #1177d1;
            color: #ffffff;
            padding: 2px;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            display: inline-block;
            text-align: center;
            font-size: 13px;
            line-height: 15px;
        }
        .linkcolor a {
            color: #1177d1;
        }
        .round {
            border-radius: 50%;
        }
        .message p {
            margin-top: 0;
            padding-right: 40px;
        }
        .nowrap {
            white-space: nowrap;
        }
        .gray-light {
            color: #868e96;
        }
        .text-small {
            font-size: 13px;
        }
    </style>
</head>

{{#conversations}}
    <table class="table">
        <thead>
        <tr>
            <th width="40px">
                <img src="{{{ grouppictureurl }}}" class="round" width="40px" height="40px"/>
            </th>
            <th class="text-start">
                <strong>{{ groupname }}</strong><br>
                {{ coursename }}
            </th>
            <th class="nowrap text-end">
                <span class="badge">{{ numberofunreadmessages }}</span> <span class="gray-light">{{#str}} emaildigestunreadmessages, message_email {{/str}}</span>
            </th>
        </tr>
        </thead>
        <tbody>
            {{#messages}}
            <tr>
                <td width="40px" style="text-align: center;">
                    <img src="{{{ userpictureurl }}}" class="round" width="30px" height="30px">
                </td>
                <td colspan="2" class="message">
                    <strong>{{{ userfullname }}}</strong>
                    <span class="float-right gray-light text-small">{{ timesent }}</span>
                    {{{ message }}}
                </td>
            </tr>
            {{/messages}}
            <tr>
                <td colspan="3" class="linkcolor">
                    {{{viewallmessageslink}}}
                </td>
            </tr>
        </tbody>
    </table>
{{/conversations}}
