<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 i18n:translate="label_new_message">New message</title>
  </head>
  <body class="stand-alone sidebar-normal gh-collapsed generic application- application-">
    <div id="main">

      <metal:content fill-slot="content">
        <div id="content">
          <div class="document-body"
               id="document-body"
               tal:define="
                 ploneview nocall:context/@@plone;
                 userid_normalized python:ploneview.normalizeString(view.userid);
               "
          >
            <div class="document-content chat"
                 id="document-content"
            >
              <ul class="chat"
                  id="chat"
              >
                <li class="item type-text self"
                    id="temporary-message"
                >
                  <a class="user">
                    <h4 class="user-name">
                      ${view/fullname}
                    </h4>
                    <img class="avatar pat-avatar"
                         alt=""
                         src="${view/avatar_url}"
                    />
                  </a>
                  <p class="content"
                     id="new-content"
                  >
                    ${view/text}
                  </p>
                </li>
                <li class="item type-terminal"
                    id="end-of-conversation"
                >
                  <p>
                    <a class="pat-scroll"
                       href="#end-of-conversation"
                       data-pat-scroll="trigger: auto"
                    >End of conversation</a>
                  </p>
                </li>
              </ul>
            </div>

            <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"
            >
              <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>

        </div><!-- /content -->
      </metal:content>

    </div>
  </body>
</html>
