<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:i18n="http://xml.zope.org/namespaces/i18n"
      xmlns:metal="http://xml.zope.org/namespaces/metal"
      xmlns:tal="http://xml.zope.org/namespaces/tal"
      metal:use-macro="context/main_template/macros/master"
      i18n:domain="ploneintranet"
>
  <head>
    <title>Messages</title>
  </head>
  <body class="stand-alone sidebar-normal gh-collapsed messages application- application-messages">
    <div id="main">

      <metal:content fill-slot="content">
        <div class="state-on"
             id="content"
             tal:define="
               ploneview nocall:context/@@plone;
             "
        >
          <div class="application-body application-messages focus-listing application- sidebar-left-open sidebar-right-closed"
               id="application-body"
          >
            <div class="document-body"
                 id="document-body"
                 tal:define="
                   userid_normalized python:ploneview.normalizeString(view.userid);
                 "
            >

              <div class="document-content"
                   id="document-content"
                   tal:condition="not:view/userid|nothing"
              >
                <div class="application-welcome-info">
                  <div class="long-read pat-rich"
                       id="content-area"
                  >
                    <p id="content-area-summary">
                      <strong i18n:translate="">Thank you for using Messages!</strong>
                      <span tal:omit-tag=""
                            i18n:translate=""
                      >Messages makes it easy to stay in touch with your co-workers and anyone else who's using the intranet.</span>
                    </p>
                  </div>
                </div>
                <article class="call-to-action-area">
                  <p class="buttons">
                    <a class="default button cta pat-button new-chat pat-modal icon-edit"
                       href="${view/app_base_url}/@@app-messaging-new-chat#document-content"
                       title="Start a new conversation"
                       data-pat-modal="class: panel small"
                       i18n:attributes="title"
                       i18n:translate=""
                    >New conversation</a>
                  </p>
                </article>
              </div>

              <div class="chat document-content"
                   id="document-content-messages"
                   tal:condition="view/userid|nothing"
              >

                <ul class="chat pat-push"
                    id="chat"
                    data-pat-push="push-id: incoming_message; url: ${here/portal_url}/apps/messages/@@message-list/${view/userid}"
                >
                  <tal:comment condition="nothing">
                    Unluckily the current pat-push implementation requires to reload
                    the whole chat.
                    A much straightforward implementation would be possible if we could
                    merge https://github.com/Patternslib/Patterns/pull/877.

                    With that we could have
                    - url: ${here/portal_url}/apps/messages/@@message-list/${view/userid}?only_new=1
                    - mode: append

                  </tal:comment>
                  <a class="pat-inject"
                     href="${here/portal_url}/apps/messages/@@message-list/${view/userid}#chat"
                     data-pat-inject="trigger:autoload; source: li.item::element; target: #chat"
                  ></a>
                </ul>

                <ul>
                  <!-- remove injected new-message in favor of loading in sequence on refresh -->
                  <li id="temporary-message"></li>
                </ul>

              </div><!-- /document-content -->

              <form class="pat-form pat-inject discrete-injection"
                    id="chat-bar"
                    action="${view/app_base_url}/@@app-messaging-new-message"
                    method="post"
                    data-pat-inject="source: #chat; target: #end-of-conversation::element &amp;&amp; source: #chat-bar; target: #chat-bar &amp;&amp; source: #new-content; target: #selector-item-${userid_normalized} .byline"
                    tal:condition="view/userid|nothing"
              >
                <input name="recipient"
                       type="hidden"
                       value="${view/userid}"
                />
                <input autofocus
                       name="message"
                       placeholder="Write a message"
                       type="text"
                       i18n:attributes="placeholder"
                />
                <button style="display: none;"
                        type="submit"
                ></button>
              </form>

            </div><!-- /document-body -->
            <button class="pat-switch button-navigation-back icon-left-open"
                    id="back-to-sidebar"
                    data-pat-switch="#application-body focus-* focus-sidebar"
                    i18n:translate=""
            >Back</button>

            <aside class="sidebar left"
                   id="sidebar"
            >
              <div id="sidebar-content">
                <div class="item-selector mode-follow titles-truncated"
                     id="selector"
                >

                  <div class="pat-toolbar"
                       id="selector-functions"
                  >
                    <div class="toolbar-functions-area">
                      <div class="toolbar-section view-options">
                        <form class="pat-form search-box pat-inject pat-autosubmit"
                              action="${view/url}#selector-items"
                        >
                          <label>
                            <input name="search"
                                   placeholder="Search"
                                   type="search"
                                   tal:attributes="
                                     disabled view/search_disabled|nothing;
                                   "
                                   i18n:attributes="placeholder"
                            />
                            <button type="submit"
                                    i18n:translate=""
                            >Search</button>
                          </label>
                        </form>
                      </div>
                      <div class="toolbar-section quick-functions">
                        <a class="new-chat pat-modal icon icon-edit"
                           href="${view/app_base_url}/@@app-messaging-new-chat#document-content"
                           title="Start a new conversation"
                           data-pat-modal="class: panel small"
                           i18n:attributes="title"
                           i18n:translate=""
                        >New conversation</a>
                      </div>
                    </div>
                  </div><!-- /button-bar -->

                  <div class="pat-push documents-area pat-navigation"
                       id="documents-area-messages"
                  >
                    <form class="pat-form search-result chats pat-inject"
                          id="selector-items"
                          action="/feedback/batch-delete-conversations.html#content"
                          data-pat-inject="target: body::after"
                    >
                      <fieldset class="checklist pat-checklist chats">

                        <tal:conversation tal:repeat="conversation view/conversations">
                          <label class="item chat has-description state-${conversation/status}"
                                 id="selector-item-${userid_normalized}"
                                 tal:define="
                                   userid_normalized python:ploneview.normalizeString(conversation['userid']);
                                 "
                          >
                            <input name="userid"
                                   type="radio"
                                   value="${conversation/userid}"
                            />
                            <a class="follow pat-switch pat-inject ${python: 'current' if conversation.get('userid', '_marker') == view.userid else ''}"
                               href="${conversation/chat_url}"
                               data-pat-inject="source: #document-body::element; target: #document-body::element &amp;&amp; source: #messages-link; target: #messages-link; history: record"
                               data-pat-switch="selector: #application-body; remove: focus-*; add: focus-document &amp;&amp; selector: body; remove: sidebar-large; add: sidebar-normal &amp;&amp; selector: #selector-item-${userid_normalized}; remove: state-unread; add: state-"
                            >
                              <span class="avatar pat-avatar"
                                    data-initials
                              >
                                <img alt="${conversation/fullname}"
                                     src="${conversation/avatar_url}"
                                />
                              </span>
                              <strong class="title">${conversation/fullname}</strong>
                              <br />
                              <dfn class="byline">${conversation/byline}</dfn>
                            </a>
                          </label>
                        </tal:conversation>

                      </fieldset>
                    </form>
                  </div><!-- /#documents-area-messages -->

                </div><!-- /#selector -->

              </div><!-- /sidebar-content -->
            </aside><!-- /sidebar -->
            <tal:sidebar-toggle-button replace="structure here/@@sidebar-toggle-button|nothing" />
          </div><!-- /application-body -->
        </div><!-- /app-space -->

      </metal:content>

    </div><!-- /main -->
  </body>
</html>
