{include_template_file file="blocks/account_left.html"}

{if $smarty.get.mid}
<script>
    $(document).ready(function(){
        //Scroll to message
        $('#message-{$smarty.get.mid}').scrollTo();
    }
</script>
{/if}

<div class="account-right">
    {if $mode =='inbox'}
    <h2 class="page-header">{lang code='private_messages'} &raquo; {lang code='inbox'}</h2>

    <div id="pm_container">
        <div class="pm_left_column">
            {if $threads}
            {foreach $threads as $_thread}
            {$thread=$_thread.thread}
            <div class="thread_container gradient 
                 {if $smarty.get.thread_id==$thread.thread_id}thread_active{/if}
                 "
                 onclick="window.location='{$query_string}thread_id={$thread.thread_id}'"
                 >
                <div class="thread_author_image">
                    <img src="{$userquery->avatar($thread,'small')}" />
                </div>
                <div class="thread_author_name">
                    {list_thread_recipients($_thread)}
                </div>
                <div class="thread_subject">
                    {$thread.message|truncate:35}
                </div>
                <span class="thread_time">
                    {$thread.time_added|date_format:'%H:%M:%S'}
                </span>
            </div> 
            {/foreach}
            {/if}
        </div>
        <div class="pm_right_column">
            {if !$messages}
            <p class="alert alert-large">{lang code='No conversation selected'}</p>
            {else}

            <div class="msgs_container cbv3-scroller">
                {foreach $messages as $message}
                <div class="msg_container" id="message-{$message.message_id}">
                    <div class="msg_author_thumb">
                        <img src="{$userquery->avatar($message,small)}" />
                    </div>
                    <div class="msg_author_name">
                        {name($message)}
                    </div>
                    <div class="msg_content">
                        {$message.message|nl2br}
                    </div>
                    <span class="msg_time">{what_time($message.time_added)}</span>
                </div>
                <div class="clearfix"></div>
                {/foreach}
            </div>

            <div class="new_msg_container">
                <form method="post">
                    <div class="new_msg_subj">
                        <input type="text" class="msg_subject" name="subject" placeholder="RE:{$thread.subject}" />
                    </div>
                    <div class="new_msg_textfield_container">
                        <textarea name="message"></textarea>
                        <i class="icon-eye-open msg_smiley"></i>
                        <input type="hidden" name="thread_id" value="{$thread.thread_id}">
                        <input type="hidden" name="add_message" value="yes"/>
                    </div>
                    <div class="new_msg_actions">
                        <button class="btn btn-primary">Send</button>
                    </div>
                </form>
            </div>
            {/if}
        </div>

        <div class="clearfix"></div>
    </div>
    {/if} <!-- Ending Inbox -->


    <!-- Starting Compose message -->
    {if $mode=='new_msg'}
    <h2>{lang code='Compose new message'}</h2>
    <hr />

    <script>
        $(document).ready(function(){
            getFeedParams('friend');
            $("#pm_recipients").autoSuggest(baseurl+'/ajax/items.php', { 
                selectedItemProp: "name", 
                asHtmlID : 'pm_recipients',
                searchObjProps: "name",
         
                limitText : false,
                selectionAdded : function(){
               
                },
                selectionRemoved : function(elem){
                
                },
                formatList: function(data, elem){
                    var my_image = data.image;
                    var new_elem = elem.html("<img src='"+data.image+"' width='20' height='20'/> "+data.name);
                    return new_elem;
                }
            });
        })
        
    </script>
    <div class="compose_new_form">
        <form method="post">
            <div class="control-group">
                <label class="control-label" for="inputEmail">To</label>
                <div class="controls">
                    <input type="text" class="pm_recipients" id="pm_recipients"/>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="subject">Subject</label>
                <div class="controls">
                    <input type="text" name="subject" id="subject" placeholder="Message subject.." class="pm_subject">
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="message">Message</label>
                <div class="controls">
                    <textarea placeholder="Enter your message" id="message" name="message" class="pm_message  auto-height"></textarea>
                </div>
            </div>

            <div class="form-actions" align="right">
                <input type="submit" class="btn btn-primary" name="send_message" value="Send message">
            </div>
        </form>
    </div>

    {/if}


</div>



<!--Clearing things up -->
<div class="clearfix"></div>