<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright © 2013-2016 The Nxt Core Developers.                            ~
  ~ Copyright © 2016-2020 Jelurida IP B.V.                                    ~
  ~                                                                           ~
  ~ See the LICENSE.txt file at the top-level directory of this distribution  ~
  ~ for licensing information.                                                ~
  ~                                                                           ~
  ~ Unless otherwise agreed in a custom licensing agreement with Jelurida B.V.,
  ~ no part of the Nxt software, including this file, may be copied, modified,~
  ~ propagated, or distributed except according to the terms contained in the ~
  ~ LICENSE.txt file.                                                         ~
  ~                                                                           ~
  ~ Removal or modification of this copyright notice is prohibited.           ~
  ~                                                                           ~
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

<div id="messages_page" class="page">
    <section class="content-header">
        <h1 data-i18n="chat">Chat</h1>
    </section>
    <section class="content content-stretch" style="position:fixed;margin-top:3px;padding:0; width:100%; height:100%; height: calc(100% - 101px); overflow:hidden;">
        <div class="content-spliter">
          <div class="content-splitter-inner">
              <div class="content-splitter-sidebar" id="message_sidebar" style="width:250px;overflow-x:hidden;">
                  <div class="content-splitter-sidebar-inner">
                    <div class="list-group unselectable sidebar_context" id="messages_sidebar">
                        <div style="text-align:center;padding-top:10px;"><span data-i18n="loading_please_wait">Loading, please wait</span><span class="loading_dots"><span>.</span><span>.</span><span>.</span></span></div>
                    </div>
                     </div>
                 </div>
                 <div class="content-splitter-right" id="message_content" style="left:250px">
                    <div class="content-splitter-right-inner">
                        <div id="no_message_selected" style="padding-top: 150px;text-align:center;" data-i18n="select_contact_in_sidebar">Please select a contact in the left sidebar.</div>
                        <div id="no_messages_available" style="padding-top: 150px;text-align:center;display:none;">
                            <span data-i18n="no_messages_available">No messages available</span>, 
                            <a href="#" data-toggle="modal" data-target="#send_message_modal" data-i18n="send_one_message">send one</a>.
                        </div>
                        
                        <div id="message_details">
                        </div>
                        <form role="form" id="inline_message_form" method="post" style="display:none;position:fixed;bottom:0;right:20px;left:485px;" autocomplete="off">
                            <div class="form-group">
                                <textarea class="form-control" name="inline_message_text" id="inline_message_text" rows="3" placeholder="Message" data-i18n="[placeholder]message"></textarea>
                            </div>
                            <div class="row">
                                <div class="col-xs-10 col-sm-10 col-md-10">
                                    <div class="form-group">
                                        <input type="password" class="form-control secret_phrase" id="inline_message_password" name="inline_message_password" placeholder="Passphrase" data-i18n="[placeholder]passphrase" style="display:inline;width:35%">
                                        <label for="inline_message_encrypt" style="font-weight:normal;color:#666"><input type="checkbox" name="encrypt_message" id="inline_message_encrypt" value="1" checked="checked" /> <span data-i18n="encrypt_message">Encrypt Message</span></label>
                                    </div>
                                </div>
                                <div class="col-xs-2-col-sm-2 col-md-2">
                                    <div class="form-group" style="text-align:right">
                                        <input type="hidden" name="inline_message_recipient" id="inline_message_recipient" value="" />
                                        <button type="submit" id="inline_message_submit" class="btn btn-default" data-loading-text="Submitting..." data-i18n="send;[data-loading-text]submitting;">Send</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<div id="my_messages_page" class="paginated page">
    <section class="content-header">
        <h1 data-i18n="my_messages">My Messages</h1>
    </section>
    <section class="content" id="my_messages_section">
        <script type="text/x-handlebars-template">
            <div class="data-container {{when isLoading 'data-loading' isEmpty 'data-empty'}}">
                <table class="table table-striped" id="my_messages_table">
                    <thead>
                    <tr>
                        <th>{{i18n "date"}}</th>
                        <th>{{i18n "from"}}</th>
                        <th>{{i18n "to"}}</th>
                        <th>{{i18n "message"}}</th>
                        <th>{{i18n "action"}}</th>
                    </tr>
                    </thead>
                    <tbody>
                        {{#each messages}}
                            <tr>
                                <td>{{{transactionFormatted}}}</td>
                                <td>{{{fromFormatted}}}</td>
                                <td>{{{toFormatted}}}</td>
                                <td>{{{messageFormatted}}}</td>
                                <td>{{{action_decrypt}}}{{{action_retrieve}}}{{{action_share}}}{{{action_download}}}</td>
                            </tr>
                        {{/each}}
                    </tbody>
                </table>
                <div class="data-loading-container"><img src="img/loading_indicator.gif" alt="Loading..." width="32" height="32" /></div>
                <div class="data-empty-container">
                    <p>
                        <span>{{i18n "no_messages_available"}}</span>
                    </p>
                </div>
                <div class="data-pagination"></div>
            </div>
        </script>
    </section>
</div>