{% set page_title = 'User Messages' %}
{% set header_image = 'assets/images/light/game-journey-1400x460.jpg' %}
{% set header_size = 'small' %}
{% set header_show = 'user' %}

{% extends 'layouts/layout-light.html' %}

{% block content %}
    <div class="container youplay-content">

        <div class="row">

            <div class="col-md-9">

                <div class="row">
                    <div class="col-md-9">
                        <ul class="pagination pagination-sm mt-0">
                            <li class="active">
                                <a href="light-user-messages.html">Inbox</a>
                            </li>
                            <li>
                                <a href="light-user-messages-compose.html">Compose</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-3">

                        <form action="">
                            <label for="messages_search" class="sr-only">Search Messages</label>
                            <div class="youplay-input">
                                <input type="text" name="s" id="messages_search" placeholder="Search Messages...">
                            </div>
                        </form>

                    </div>
                </div>

                <table class="youplay-messages table table-hover">
                    <tbody>
                    <tr class="message-unread">
                        <td class="message-from">
                            <a href="#" class="angled-img">
                                <div class="img">
                                    <img src="assets/images/light/avatar-user-1.png" width="80" height="80" alt="">
                                </div>
                            </a>

                            <a href="#" class="message-from-name" title="Kiki Cuyler">Kiki Cuyler</a>
                            <br>
                            <span class="date">10th Dec 2015 at 6:29 am</span>
                        </td>
                        <td class="message-description">
                            <a href="#" class="message-description-name" title="View Message">Proin tempus porta dui</a>
                            <br>
                            <div class="message-excerpt">Vestibulum vulputate nunc faucibus mauris. Nulla vel tortor...</div>
                        </td>
                        <td class="message-action">
                            <span class="messages-count">+4</span>
                            <a class="message-delete" href="#"><i class="fa fa-times"></i></a>
                        </td>
                    </tr>

                    <tr>
                        <td class="message-from">
                            <a href="#" class="angled-img">
                                <div class="img">
                                    <img src="assets/images/light/avatar-user-2.png" width="80" height="80" alt="">
                                </div>
                            </a>

                            <a href="#" class="message-from-name" title="Kiki Cuyler">Kiki Cuyler</a>
                            <br>
                            <span class="date">9th Dec 2015 at 11:57 pm</span>
                        </td>
                        <td class="message-description">
                            <a href="#" class="message-description-name" title="View Message">Curabitur nec tellus. In semper</a>
                            <br>
                            <div class="message-excerpt">Quisque sagittis neque. Vestibulum laoreet. Nullam cursus, odio...</div>
                        </td>
                        <td class="message-action">
                            <a class="message-delete" href="#"><i class="fa fa-times"></i></a>
                        </td>
                    </tr>

                    <tr>
                        <td class="message-from">
                            <a href="#" class="angled-img">
                                <div class="img">
                                    <img src="assets/images/light/avatar-user-3.png" width="80" height="80" alt="">
                                </div>
                            </a>

                            <a href="#" class="message-from-name" title="Kiki Cuyler">Kiki Cuyler</a>
                            <br>
                            <span class="date">9th Dec 2015 at 11:57 pm</span>
                        </td>
                        <td class="message-description">
                            <a href="#" class="message-description-name" title="View Message">Duis ultricess</a>
                            <br>
                            <div class="message-excerpt">Aliquam et tellus. Nullam sed nisl. Nullam lobortis dui at...</div>
                        </td>
                        <td class="message-action">
                            <a class="message-delete" href="#"><i class="fa fa-times"></i></a>
                        </td>
                    </tr>

                    <tr>
                        <td class="message-from">
                            <a href="#" class="angled-img">
                                <div class="img">
                                    <img src="assets/images/light/avatar.png" width="80" height="80" alt="">
                                </div>
                            </a>

                            <a href="#" class="message-from-name" title="Kiki Cuyler">Kiki Cuyler</a>
                            <br>
                            <span class="date">9th Dec 2015 at 11:57 pm</span>
                        </td>
                        <td class="message-description">
                            <a href="#" class="message-description-name" title="View Message">In semper</a>
                            <br>
                            <div class="message-excerpt">:)</div>
                        </td>
                        <td class="message-action">
                            <a class="message-delete" href="#"><i class="fa fa-times"></i></a>
                        </td>
                    </tr>

                    <tr class="message-unread">
                        <td class="message-from">
                            <a href="#" class="angled-img">
                                <div class="img">
                                    <img src="assets/images/light/avatar-user-4.png" width="80" height="80" alt="">
                                </div>
                            </a>

                            <a href="#" class="message-from-name" title="Kiki Cuyler">Kiki Cuyler</a>
                            <br>
                            <span class="date">9th Dec 2015 at 11:57 pm</span>
                        </td>
                        <td class="message-description">
                            <a href="#" class="message-description-name" title="View Message">Proin tempus porta dui</a>
                            <br>
                            <div class="message-excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras...</div>
                        </td>
                        <td class="message-action">
                            <span class="messages-count">+2</span>
                            <a class="message-delete" href="#"><i class="fa fa-times"></i></a>
                        </td>
                    </tr>

                    </tbody>

                </table>


            </div>

            <!-- Right Side -->
            <div class="col-md-3">
                {% include "shared/light-sidebar-user.html" %}
            </div>
            <!-- Right Side -->

        </div>

    </div>
{% endblock %}