{literal}
    <style>
        #tooltip_templates { display: none; }
        a.mention-user-ids, a.mention-record-link {
            background: #eeeeee;
            text-decoration: none;
        }
        img.bv_internal_notes_avatar{
            height: auto;
        }
        #avatar_parent .bv_internal_notes_avatar{
            height: auto;
            width: 100%;
            max-width: 100% !important;
            margin: 0 auto;
            display: flex;
        }
        .image-upload {
            display: inline-block;
            position: relative;
            cursor: pointer;
            cursor: hand; 
        }
        .inline-button {
            display: inline-block;
        }
        .image-file {
            width: 26px;
            height: 26px;
            opacity: 0;
            cursor: pointer;
            cursor: hand; 
            filter: alpha(opacity=0); /* IE 5-7 */
        }
        .image-upload .button {
            cursor: pointer;
        }
        .image-upload label {
            cursor: pointer;
        }
        .note-block{
            padding: 10px;
            margin-bottom: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .detail table{
            border: 0px;
        }
        .btn-action{
            border: 0;
            padding: 5px 10px;
            margin-right: 10px;
            font-size: 12px;
            background-color: #f08377;
            border-radius: 4px;
            color: #fff !important;
        }
        .text-note span, .text-note strong{
            background-color: transparent !important;
        }

        @media only screen and (max-width: 767px){
            .user-block{
                float: none !important;
            }
            .note-section-block td {
                display: block !important;
            }
            .note-section-block tr{
                border: 0px;
            }
            #mail_username{
                width: 100% !important;
                margin: 10px 0;
            }
            .new-notes-section .note-block .action-block{
                position: relative;
                top: 0;
                right: 0;
                margin-bottom: 15px;
            }
            .new-notes-section .note-block .action-block .btn-action{
                margin-left: 0;
                margin-right: 10px;
            }
        }

        @media only screen and (max-device-width: 980px) and (min-device-width: 768px){
            .detail.note-section-block tbody {
                display: contents;
            }
            .note-section-block tr{
                border: 0px;
            }
            .detail.note-section-block tr {
                display: table-row;
            }
        }

        
        .note-section-block td {
            display: table-cell;
        }

    </style>
{/literal}

<div id="BV-NotesView" class="detail view detail508 expanded">
 
     <table width="100%" cellpadding="0" cellspacing="0" border="0" id="BV-table-NotesView" class="panelContainer">
        <tbody id="InternalNotesViewContent">
            {foreach from=$NOTES item=NOTE}
                <tr id="internal_note_{$NOTE.id}">
                    <td scope="col" style="width: 10%;padding: 0 15px 0 0;vertical-align: top;">
                        <div class="user-block" style="width: 100px;border: 1px solid #ddd;height:85px;">
                            <div class="sugar_field" id="avatar_parent" style="margin-bottom: 5px;height: 55px;">
                                <img  class="bv_internal_notes_avatar" src="cid:{if !empty($NOTE.user_photo)}{$NOTE.user_id}_photo{else}image_2020_05_11T12_22_53_631Z{/if}" style="max-width: 45px; height: 45px;" height="45">
                            </div>
                            <strong style="text-transform: capitalize;margin: 5px auto;white-space: nowrap;text-align: center;text-overflow: ellipsis;padding: 0 3px;overflow: hidden;width: 90px;">
                                {if $NOTE.name}
                                    {$NOTE.name}
                                {else}
                                    {$NOTE.user_name}
                                {/if}
                                :
                            </strong>
                        </div>
                    </td>
                    <td>
                        <div class="note-block" style="min-height: 70px;padding: 10px;margin-bottom: 20px;background-color:#f9f9f9;border: 1px solid #ddd;border-radius: 4px;">
                            <div class="text-note" style="padding-bottom: 10px;" id="note-text-{$NOTE.id}">{$NOTE.description}</div>

                            <div class="internal_note_reply">
                            
                                <div id="internal_note_reply_{$NOTE.id}" {if !empty($NOTE.children)} style="border-top: 1px solid #ddd;padding-top: 10px;" {else} style="border-top: 0px;padding-top: 0px;" {/if}>
                                    {foreach from=$NOTE.children item=replay}
                                        <div id="internal_note_child_{$replay.id}" style="padding-top: 2px;margin-bottom: 7px;border: 1px solid #ddd;background-color: #fff;padding: 15px;border-radius: 4px;">
                                            <div class="sub-note-block">
                                                <div style="float: left;width: auto;margin-right: 10px;height: 30px;display: flex;">
                                                    <span class="sugar_field" id="avatar" style="width: 100%;border: 1px solid #ddd;">
                                                        <img  class="bv_internal_notes_avatar" src="cid:{if !empty($replay.user_photo)}{$replay.user_id}_photo{else}image_2020_05_11T12_22_53_631Z{/if}" style="max-width: 50px; max-height: 30px;" height="50">
                                                    </span>
                                                    <strong style="font-size: 12px;text-transform: capitalize;margin: auto 0 auto 10px;">{$replay.user_name}:</strong> 
                                                </div>
                                                <div style="padding: 0;float: right;"><span style="font-size: 90%; font-style: normal; color: #666666">{$replay.date_entered_display}</span></div>
                                            </div>
                                            <div style="clear: both;margin-top: 40px;">
                                                <p style="word-break: break-all;margin: 0px;">{$replay.description}</p>
                                            </div>    
                                        </div>
                                    {/foreach}
                                </div>
                                
                            </div>
                        </div>
                    </td>
                </tr>
            {/foreach}
        </tbody>
        
    </table>
</div>
<br><br>
<a href="{$SITE_URL}/index.php?module={$MODULE}&action=DetailView&record={$RECORD_ID}" >Click here</a> to view detail