<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<h1>User Messages</h1>
<table width="100%"> <tr><td>
            <table id="table_id">
                <thead>
                <tr>
                    <th>Sender</th>
                    <th>Receiver</th>
                    <th>Date</th>
                    <th>Email</th>
                    <th>Message</th>
                </tr>
                </thead>
                <tbody>
                {foreach $Dialog item=message key=i}
                    {if $message[5] == 0}
                        <tr style="background: #9bbacc">
                    {else}
                        <tr>
                    {/if}
                        <td>{$message[0]}</td>
                        <td>{$message[1]}</td>
                        <td>{$message[2]|date_format:"%D %H:%M"}</td>
                        <td>{$message[3]}</td>
                        <td>{$message[4]}</td>

                        </tr>
                {/foreach}
                </tbody>
            </table>
        </td></tr></table>

<h2>Send Answer</h2>
<div style="margin: 10px auto;">
<form method="POST" action=""  id="feedback-form">
    Логин:
    <input type="text" name="send_login" value="{$Account}" readonly="readonly" style="font-weight: bold; font-size: 12px;">
    <br>
    Ваше сообщение:
    <textarea name="send_text" required rows="5">{$OldMessage.text}</textarea>
    <br>
    <input name="send_to" class="" type="submit" value="Send">
</form>
</div>
<script>
    $(document).ready(function(){
        $('#table_id').DataTable();
    });
</script>