<h4><a href="#/home"><i class="fas fa-chevron-left"></i></a>&nbsp;<%= _lc( 'MESSAGE_LIST' ) %></h4>
<div class="row">
    <div class="col-sm-12">
        <div class="card">
            <div class="card-body no-padding">
                <div class="table-responsive">
                    <table class="table table-messages">
                        <thead>
                        <tr>
                            <th class="text-center">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox"
                                           id="checkbox-all-toggle"
                                           data-type="checkbox-all-toggle"
                                           class="custom-control-input">
                                    <label class="custom-control-label"
                                           for="checkbox-all-toggle"
                                           style="vertical-align: top;"></label>
                                </div>
                            </th>
                            <th>
                                <%= _lc( 'FROM' ) %>
                            </th>
                            <th>
                                <%= _lc( 'SUBJECT' ) %>
                            </th>
                            <th class="text-right">
                                <%= _lc( 'DATE' ) %>
                            </th>
                            <th>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                            <% if ( messages.length )   {   %>

                                <% for ( var m = 0; m < messages.length; m++ ) {   %>

                                    <tr class="clickable"
                                        data-message-id="<%= messages[ m ].getId() %>"
                                    >
                                        <td class="text-center"
                                            data-type="checkbox-container">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox"
                                                       id="checkbox-message-deletion-<%= messages[ m ].getId() %>"
                                                       data-type="checkbox-message-deletion"
                                                       data-message-id="<%= messages[ m ].getId() %>"
                                                       class="custom-control-input">
                                                <label class="custom-control-label"
                                                       for="checkbox-message-deletion-<%= messages[ m ].getId() %>"
                                                       style="vertical-align: top;"></label>
                                            </div>
                                        </td>
                                        <td data-type="message-click-link">
                                            <%= messages[ m ].getCreatorName() %>
                                        </td>
                                        <td data-type="message-click-link">
                                            <%= messages[ m ].getSubject() %>
                                        </td>
                                        <td data-type="message-click-link">
                                            <%= messages[ m ].getMomentCreated().fromNow() %>
                                        </td>
                                        <td data-type="message-click-link"
                                            class="text-right">
                                            <i class="fas fa-chevron-right"></i>
                                        </td>
                                    </tr>

                                <% }    %>

                            <% } else { %>

                                <tr>
                                    <td></td>
                                    <td colspan="3">
                                        <%= _lc( 'NO_MAILS' ) %>
                                    </td>
                                </tr>

                            <% }    %>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer">
                <button data-id="btn-delete-selected-messages"
                        class="float-right btn btn-sm btn-danger">
                    <%= _lc( 'DELETE_SELECTED' ) %>
                </button>
            </div>
        </div>
    </div>
</div>