{{! Client-side Mustache template for rendering messages.}}

{{! Because we use table-layout: fixed for the Message table,
    all the column widths are computed from the first row;
    these CSS classes specify the widths for that first,
    collapsed row. (Otherwise, colspan breaks everything).}}
{{#include_layout_row}}
<tr class="ztable_layout_row">
  <td class="ztable_col1" />
  <td class="ztable_col2" />
  <td class="ztable_col3" />
</tr>
{{/include_layout_row}}

{{#each messages}}
{{#with this}}
{{#include_bookend}}
<tr class="bookend_tr"><td /><td /><td class="bookend" /></tr>
{{/include_bookend}}

{{#include_recipient}}
{{#if is_stream}}
<tr class="recipient_row">
    <td colspan="2"
        class="message_header message_header_stream left_part">
    </td>
    <td class="message_header message_header_stream right_part">
      <span class="message_label_clickable"
            onclick="narrow.target({{id}}); narrow.by_recipient();"
            title="Narrow to stream &quot;{{display_recipient}}&quot;">{{display_recipient}}</span>
      &nbsp; | &nbsp;
      <span class="message_label_clickable"
            onclick="narrow.target({{id}}); narrow.by_subject();"
            title="Narrow to stream &quot;{{display_recipient}}&quot;, subject &quot;{{subject}}&quot;">{{subject}}</span>
    </td>
</tr>
{{else}}
<tr class="recipient_row">
    <td colspan="2"
        class="message_header message_header_huddle left_part">
    </td>
    <td class="message_label_clickable message_header message_header_huddle right_part"
        onclick="narrow.target({{id}}); narrow.by_recipient();"
        title="Narrow to your private messages with {{display_reply_to}}">You and {{display_reply_to}}</td>
</tr>
{{/if}}
{{/include_recipient}}
<tr zid="{{id}}" id="{{dom_id}}"
    class="message_row{{^is_stream}} personal-message{{/is_stream}}{{#include_sender}} include-sender{{/include_sender}}">
    <td class="message_picture">
    {{#include_sender}}
        <img class="img-rounded profile_picture user_info_hover"
             src="https://secure.gravatar.com/avatar/{{gravatar_hash}}?d=identicon&s=30"
             onclick="userinfo_popover(event, this, {{id}});"/>
    {{/include_sender}}
    </td>
    <td class="pointer"><p></p></td>
    <td class="messagebox{{^include_sender}} prev_is_same_sender{{/include_sender}}{{^is_stream}} personal-message{{/is_stream}}"
        onclick="select_message_by_id({{id}});"
        onmousedown="mousedown();"
        onmousemove="mousemove();"
        onmouseover="show_email({{id}});"
        onmouseout="hide_email();">
        {{#include_sender}}
        <span class="message_sender user_info_hover"
              onclick="userinfo_popover(event, this, {{id}});">
            <span class="sender_name">{{sender_full_name}}</span>
            <span class="sender_email invisible">{{sender_email}}</span>
        </span>
    {{/include_sender}}
        <span class="message_time" title="{{full_date_str}}">{{{timestr}}}</span>
        <div class="message_content">{{{content}}}</div>
    </td>
</tr>
{{/with}}
{{/each}}