Use a named variable for _.template

This removes the need for `switch (obj)` in the template which is not
allowed in strict mode.

Additionally using a named variable speeds up rendering.

spec/chatroom.js

@@ -808,7 +808,7 @@
                     expect($sent_stanza.find('field[var="muc#roomconfig_allowpm"] value').text()).toBe('moderators');
                     expect($sent_stanza.find('field[var="muc#roomconfig_presencebroadcast"] value').text()).toBe('moderator');
                     done();
-                });
+                }).catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
             }));
 
             it("shows users currently present in the room",

src/config.js

@@ -114,7 +114,13 @@ require.config({
         templateSettings: {
             "escape": /\{\{\{([\s\S]+?)\}\}\}/g,
             "evaluate": /\{\[([\s\S]+?)\]\}/g,
-            "interpolate": /\{\{([\s\S]+?)\}\}/g
+            "interpolate": /\{\{([\s\S]+?)\}\}/g,
+            // By default, template places the values from your data in the
+            // local scope via the with statement. However, you can specify
+            // a single variable name with the variable setting. This can
+            // significantly improve the speed at which a template is able
+            // to render.
+            "variable": 'o'
         }
     },
 

src/converse-muc.js

@@ -78,15 +78,15 @@
 
     const ROOM_FEATURES = [
         'passwordprotected', 'unsecured', 'hidden',
-        'public', 'membersonly', 'open', 'persistent',
+        'publicroom', 'membersonly', 'open', 'persistent',
         'temporary', 'nonanonymous', 'semianonymous',
         'moderated', 'unmoderated', 'mam_enabled'
     ];
     const ROOM_FEATURES_MAP = {
         'passwordprotected': 'unsecured',
         'unsecured': 'passwordprotected',
-        'hidden': 'public',
-        'public': 'hidden',
+        'hidden': 'publicroom',
+        'publicroom': 'hidden',
         'membersonly': 'open',
         'open': 'membersonly',
         'persistent': 'temporary',
@@ -1526,8 +1526,9 @@
                      *      the settings.
                      */
                     this.showSpinner();
-                    this.fetchRoomConfiguration().then(
-                        this.renderConfigurationForm.bind(this));
+                    this.fetchRoomConfiguration()
+                        .then(this.renderConfigurationForm.bind(this))
+                        .catch(_.partial(_converse.log, _, Strophe.LogLevel.ERROR));
                 },
 
                 submitNickname (ev) {
@@ -2147,7 +2148,7 @@
                     this.chatroomview.model.on('change:open', this.onFeatureChanged, this);
                     this.chatroomview.model.on('change:passwordprotected', this.onFeatureChanged, this);
                     this.chatroomview.model.on('change:persistent', this.onFeatureChanged, this);
-                    this.chatroomview.model.on('change:public', this.onFeatureChanged, this);
+                    this.chatroomview.model.on('change:publicroom', this.onFeatureChanged, this);
                     this.chatroomview.model.on('change:semianonymous', this.onFeatureChanged, this);
                     this.chatroomview.model.on('change:temporary', this.onFeatureChanged, this);
                     this.chatroomview.model.on('change:unmoderated', this.onFeatureChanged, this);

src/templates/action.html

-<div class="chat-message {{{extra_classes}}}" data-isodate="{{{isodate}}}">
-    <span class="chat-msg-author chat-msg-{{{sender}}}">{{{time}}} **{{{username}}}&nbsp;</span>
+<div class="chat-message {{{o.extra_classes}}}" data-isodate="{{{o.isodate}}}">
+    <span class="chat-msg-author chat-msg-{{{o.sender}}}">{{{o.time}}} **{{{o.username}}}&nbsp;</span>
     <span class="chat-msg-content chat-action"><!-- message gets added here via renderMessage --></span>
 </div>

src/templates/add_contact_dropdown.html

 <dl class="add-converse-contact dropdown">
     <dt id="xmpp-contact-search" class="fancy-dropdown">
-        <a class="toggle-xmpp-contact-form icon-plus" href="#" title="{{{label_click_to_chat}}}"> {{{label_add_contact}}}</a>
+        <a class="toggle-xmpp-contact-form icon-plus" href="#" title="{{{o.label_click_to_chat}}}"> {{{o.label_add_contact}}}</a>
     </dt>
     <dd class="search-xmpp">
         <div class="contact-form-container collapsed"></div>

src/templates/add_contact_form.html

 <form class="pure-form add-xmpp-contact">
-    {[ if (error_message) { ]}
-        <span class="pure-form-message error">{{{error_message}}}</span>
+    {[ if (o.error_message) { ]}
+        <span class="pure-form-message error">{{{o.error_message}}}</span>
     {[ } ]}
     <input type="text"
         name="identifier"
-        value="{{{value}}}"
-        class="username {[ if (error_message) { ]} error {[ } ]}"
-        placeholder="{{{label_contact_username}}}"/>
-    <button class="pure-button button-primary" type="submit">{{{label_add}}}</button>
+        value="{{{o.value}}}"
+        class="username {[ if (o.error_message) { ]} error {[ } ]}"
+        placeholder="{{{o.label_contact_username}}}"/>
+    <button class="pure-button button-primary" type="submit">{{{o.label_add}}}</button>
 </form>

src/templates/avatar.html

-<canvas height="{{height}}px" width="{{width}}px" class="avatar"></canvas>
+<canvas height="{{o.height}}px" width="{{o.width}}px" class="avatar"></canvas>

src/templates/bookmark.html

-<dd class="available-chatroom" data-room-jid="{{{jid}}}">
-<a class="open-room" data-room-jid="{{{jid}}}" title="{{{open_title}}}" href="#">{{{name}}}</a>
-<a class="right remove-bookmark icon-pushpin {[ if (bookmarked) { ]} button-on {[ } ]}"
-   data-room-jid="{{{jid}}}" data-bookmark-name="{{{name}}}"
-   title="{{{info_remove_bookmark}}}" href="#">&nbsp;</a>
-<a class="right room-info icon-room-info" data-room-jid="{{{jid}}}"
-   title="{{{info_title}}}" href="#">&nbsp;</a>
+<dd class="available-chatroom" data-room-jid="{{{o.jid}}}">
+<a class="open-room" data-room-jid="{{{o.jid}}}" title="{{{o.open_title}}}" href="#">{{{o.name}}}</a>
+<a class="right remove-bookmark icon-pushpin {[ if (o.bookmarked) { ]} button-on {[ } ]}"
+   data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"
+   title="{{{o.jinfo_remove_bookmark}}}" href="#">&nbsp;</a>
+<a class="right room-info icon-room-info" data-room-jid="{{{o.jid}}}"
+   title="{{{o.info_title}}}" href="#">&nbsp;</a>
 </dd>

src/templates/bookmarks_list.html

-<a href="#" class="rooms-toggle bookmarks-toggle icon-{{{toggle_state}}}" title="{{{desc_bookmarks}}}">{{{label_bookmarks}}}</a>
+<a href="#" class="rooms-toggle bookmarks-toggle icon-{{{o.toggle_state}}}" title="{{{o.desc_bookmarks}}}">{{{o.label_bookmarks}}}</a>
 <dl class="bookmarks rooms-list"></dl>

src/templates/change_status_message.html

 <fieldset>
     <span class="input-button-group">
-        <input type="text" class="custom-xmpp-status" value="{{{status_message}}}" placeholder="{{{label_custom_status}}}"/>
-        <input type="submit" class="pure-button button-primary" value="{{{label_save}}}"/>
+        <input type="text" class="custom-xmpp-status" value="{{{o.status_message}}}" placeholder="{{{o.label_custom_status}}}"/>
+        <input type="submit" class="pure-button button-primary" value="{{{o.label_save}}}"/>
     </span>
 </fieldset>

src/templates/chat_status.html

 <div class="xmpp-status">
-    <a class="choose-xmpp-status {{{chat_status}}} icon-{{{chat_status}}}" data-value="{{{status_message}}}" href="#" title="{{{desc_change_status}}}">
-        {{{status_message}}}
+    <a class="choose-xmpp-status {{{o.chat_status}}} icon-{{{o.chat_status}}}" data-value="{{{o.status_message}}}" href="#" title="{{{o.desc_change_status}}}">
+        {{{o.status_message}}}
     </a>
-    <a class="change-xmpp-status-message icon-pencil" href="#" title="{{{desc_custom_status}}}"></a>
+    <a class="change-xmpp-status-message icon-pencil" href="#" title="{{{o.desc_custom_status}}}"></a>
 </div>

src/templates/chatarea.html

 <div class="chat-area">
-    <div class="chat-content {[ if (show_send_button) { ]}chat-content-sendbutton{[ } ]}"></div>
-    <div class="new-msgs-indicator hidden">▼ {{{ unread_msgs }}} ▼</div>
+    <div class="chat-content {[ if (o.show_send_button) { ]}chat-content-sendbutton{[ } ]}"></div>
+    <div class="new-msgs-indicator hidden">▼ {{{ o.unread_msgs }}} ▼</div>
     <form class="sendXMPPMessage">
-        {[ if (show_toolbar) { ]}
+        {[ if (o.show_toolbar) { ]}
             <ul class="chat-toolbar no-text-select"></ul>
         {[ } ]}
-        <textarea type="text" class="chat-textarea {[ if (show_send_button) { ]}chat-textarea-send-button{[ } ]}"
-            placeholder="{{{label_message}}}"/>
-    {[ if (show_send_button) { ]}
-        <button type="submit" class="pure-button send-button">{{{ label_send }}}</button>
+        <textarea type="text" class="chat-textarea {[ if (o.show_send_button) { ]}chat-textarea-send-button{[ } ]}"
+            placeholder="{{{o.label_message}}}"/>
+    {[ if (o.show_send_button) { ]}
+        <button type="submit" class="pure-button send-button">{{{ o.label_send }}}</button>
     {[ } ]}
     </form>
 </div>

src/templates/chatbox.html

 <div class="flyout box-flyout">
     <div class="chat-head chat-head-chatbox">
-        <a class="chatbox-btn close-chatbox-button icon-close" title="{{{info_close}}}"></a>
+        <a class="chatbox-btn close-chatbox-button icon-close" title="{{{o.info_close}}}"></a>
         <div class="chat-title">
-            {[ if (url) { ]}
-                <a href="{{{url}}}" target="_blank" rel="noopener" class="user">
+            {[ if (o.url) { ]}
+                <a href="{{{o.url}}}" target="_blank" rel="noopener" class="user">
             {[ } ]}
-                    {{{ title }}}
-            {[ if (url) { ]}
+                    {{{ o.title }}}
+            {[ if (o.url) { ]}
                 </a>
             {[ } ]}
             <p class="user-custom-message"><p/>
         </div>
     </div>
     <div class="chat-body">
-        <div class="chat-content {[ if (show_send_button) { ]}chat-content-sendbutton{[ } ]}"></div>
-        <div class="new-msgs-indicator hidden">▼ {{{ unread_msgs }}} ▼</div>
-        {[ if (show_textarea) { ]}
+        <div class="chat-content {[ if (o.show_send_button) { ]}chat-content-sendbutton{[ } ]}"></div>
+        <div class="new-msgs-indicator hidden">▼ {{{ o.unread_msgs }}} ▼</div>
+        {[ if (o.show_textarea) { ]}
         <form class="sendXMPPMessage">
-            {[ if (show_toolbar) { ]}
+            {[ if (o.show_toolbar) { ]}
                 <ul class="chat-toolbar no-text-select"></ul>
             {[ } ]}
         <textarea
             type="text"
-            class="chat-textarea {[ if (show_send_button) { ]}chat-textarea-send-button{[ } ]}"
-            placeholder="{{{label_personal_message}}}"/>
+            class="chat-textarea {[ if (o.show_send_button) { ]}chat-textarea-send-button{[ } ]}"
+            placeholder="{{{o.label_personal_message}}}"/>
 
-        {[ if (show_send_button) { ]}
-            <button type="submit" class="pure-button send-button">{{{ label_send }}}</button>
+        {[ if (o.show_send_button) { ]}
+            <button type="submit" class="pure-button send-button">{{{ o.label_send }}}</button>
         {[ } ]}
         </form>
         {[ } ]}

src/templates/chatbox_minimize.html

-<a class="chatbox-btn toggle-chatbox-button icon-minus" title="{{{info_minimize}}}"></a>
+<a class="chatbox-btn toggle-chatbox-button icon-minus" title="{{{o.info_minimize}}}"></a>

src/templates/chatroom_bookmark_form.html

 <div class="chatroom-form-container">
     <form class="pure-form converse-form chatroom-form">
         <fieldset>
-            <legend>{{{heading}}}</legend>
-            <label>{{{label_name}}}</label>
+            <legend>{{{o.heading}}}</legend>
+            <label>{{{o.label_name}}}</label>
             <input type="text" name="name" required="required"/>
-            <label>{{{label_autojoin}}}</label>
+            <label>{{{o.label_autojoin}}}</label>
             <input type="checkbox" name="autojoin"/>
-            <label>{{{label_nick}}}</label>
-            <input type="text" name="nick" value="{{{default_nick}}}"/>
+            <label>{{{o.label_nick}}}</label>
+            <input type="text" name="nick" value="{{{o.default_nick}}}"/>
         </fieldset>
         <fieldset>
-            <input class="pure-button button-primary" type="submit" value="{{{label_submit}}}"/>
-            <input class="pure-button button-cancel" type="button" value="{{{label_cancel}}}"/>
+            <input class="pure-button button-primary" type="submit" value="{{{o.label_submit}}}"/>
+            <input class="pure-button button-cancel" type="button" value="{{{o.label_cancel}}}"/>
         </fieldset>
     </form>
 </div>

src/templates/chatroom_bookmark_toggle.html

 <a class="chatbox-btn toggle-bookmark icon-pushpin
-   {[ if (bookmarked) {]}
+   {[ if (o.bookmarked) {]}
     button-on
-   {[ } ]}" title="{{{info_toggle_bookmark}}}"></a>
+   {[ } ]}" title="{{{o.info_toggle_bookmark}}}"></a>

src/templates/chatroom_disconnect.html

-<p class="disconnect-msg">{{{disconnect_message}}}</p>
+<p class="disconnect-msg">{{{o.disconnect_message}}}</p>

src/templates/chatroom_features.html

-{[ if (has_features) { ]}
-<p class="occupants-heading">{{{label_features}}}</p>
+{[ if (o.has_features) { ]}
+<p class="occupants-heading">{{{o.label_features}}}</p>
 {[ } ]}
 <ul class="features-list">
-{[ if (passwordprotected) { ]}
-<li class="feature" title="{{{ tt_passwordprotected }}}"><span class="icon-lock-2"></span>{{{ label_passwordprotected }}}</li>
+{[ if (o.passwordprotected) { ]}
+<li class="feature" title="{{{ o.tt_passwordprotected }}}"><span class="icon-lock-2"></span>{{{ o.label_passwordprotected }}}</li>
 {[ } ]}
-{[ if (unsecured) { ]}
-<li class="feature" title="{{{ tt_unsecured }}}"><span class="icon-unlocked"></span>{{{ label_unsecured }}}</li>
+{[ if (o.unsecured) { ]}
+<li class="feature" title="{{{ o.tt_unsecured }}}"><span class="icon-unlocked"></span>{{{ o.label_unsecured }}}</li>
 {[ } ]}
-{[ if (hidden) { ]}
-<li class="feature" title="{{{ tt_hidden }}}"><span class="icon-eye-blocked"></span>{{{ label_hidden }}}</li>
+{[ if (o.hidden) { ]}
+<li class="feature" title="{{{ o.tt_hidden }}}"><span class="icon-eye-blocked"></span>{{{ o.label_hidden }}}</li>
 {[ } ]}
-{[ if (public) { ]}
-<li class="feature" title="{{{ tt_public }}}"><span class="icon-eye"></span>{{{ label_public }}}</li>
+{[ if (o.public_room) { ]}
+<li class="feature" title="{{{ o.tt_public }}}"><span class="icon-eye"></span>{{{ o.label_public }}}</li>
 {[ } ]}
-{[ if (membersonly) { ]}
-<li class="feature" title="{{{ tt_membersonly }}}"><span class="icon-address-book"></span>{{{ label_membersonly }}}</li>
+{[ if (o.membersonly) { ]}
+<li class="feature" title="{{{ o.tt_membersonly }}}"><span class="icon-address-book"></span>{{{ o.label_membersonly }}}</li>
 {[ } ]}
-{[ if (open) { ]}
-<li class="feature" title="{{{ tt_open }}}"><span class="icon-globe"></span>{{{ label_open }}}</li>
+{[ if (o.open) { ]}
+<li class="feature" title="{{{ o.tt_open }}}"><span class="icon-globe"></span>{{{ o.label_open }}}</li>
 {[ } ]}
-{[ if (persistent) { ]}
-<li class="feature" title="{{{ tt_persistent }}}"><span class="icon-save"></span>{{{ label_persistent }}}</li>
+{[ if (o.persistent) { ]}
+<li class="feature" title="{{{ o.tt_persistent }}}"><span class="icon-save"></span>{{{ o.label_persistent }}}</li>
 {[ } ]}
-{[ if (temporary) { ]}
-<li class="feature" title="{{{ tt_temporary }}}"><span class="icon-snowflake"></span>{{{ label_temporary }}}</li>
+{[ if (o.temporary) { ]}
+<li class="feature" title="{{{ o.tt_temporary }}}"><span class="icon-snowflake"></span>{{{ o.label_temporary }}}</li>
 {[ } ]}
-{[ if (nonanonymous) { ]}
-<li class="feature" title="{{{ tt_nonanonymous }}}"><span class="icon-idcard-dark"></span>{{{ label_nonanonymous }}}</li>
+{[ if (o.nonanonymous) { ]}
+<li class="feature" title="{{{ o.tt_nonanonymous }}}"><span class="icon-idcard-dark"></span>{{{ o.label_nonanonymous }}}</li>
 {[ } ]}
-{[ if (semianonymous) { ]}
-<li class="feature" title="{{{ tt_semianonymous }}}"><span class="icon-info"></span>{{{ label_semianonymous }}}</li>
+{[ if (o.semianonymous) { ]}
+<li class="feature" title="{{{ o.tt_semianonymous }}}"><span class="icon-info"></span>{{{ o.label_semianonymous }}}</li>
 {[ } ]}
-{[ if (moderated) { ]}
-<li class="feature" title="{{{ tt_moderated }}}"><span class="icon-legal"></span>{{{ label_moderated }}}</li>
+{[ if (o.moderated) { ]}
+<li class="feature" title="{{{ o.tt_moderated }}}"><span class="icon-legal"></span>{{{ o.label_moderated }}}</li>
 {[ } ]}
-{[ if (unmoderated) { ]}
-<li class="feature" title="{{{ tt_unmoderated }}}"><span class="icon-info"></span>{{{ label_unmoderated }}}</li>
+{[ if (o.unmoderated) { ]}
+<li class="feature" title="{{{ o.tt_unmoderated }}}"><span class="icon-info"></span>{{{ o.label_unmoderated }}}</li>
 {[ } ]}
-{[ if (mam_enabled) { ]}
-<li class="feature" title="{{{ tt_mam_enabled }}}"><span class="icon-database"></span>{{{ label_mam_enabled }}}</li>
+{[ if (o.mam_enabled) { ]}
+<li class="feature" title="{{{ o.tt_mam_enabled }}}"><span class="icon-database"></span>{{{ o.label_mam_enabled }}}</li>
 {[ } ]}
 </ul>

src/templates/chatroom_head.html

-<a class="chatbox-btn close-chatbox-button icon-close" title="{{{info_close}}}"></a>
-{[ if (affiliation == 'owner') { ]}
-    <a class="chatbox-btn configure-chatroom-button icon-wrench" title="{{{info_configure}}} "></a>
+<a class="chatbox-btn close-chatbox-button icon-close" title="{{{o.info_close}}}"></a>
+{[ if (o.affiliation == 'owner') { ]}
+    <a class="chatbox-btn configure-chatroom-button icon-wrench" title="{{{o.info_configure}}} "></a>
 {[ } ]}
-<div class="chat-title" title="{{{jid}}}">
-    {[ if (name && name !== Strophe.getNodeFromJid(jid)) { ]}
-        <span class="chatroom-name">{{{ name }}}</span>
+<div class="chat-title" title="{{{o.jid}}}">
+    {[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
+        <span class="chatroom-name">{{{ o.name }}}</span>
     {[ } else { ]}
-        <span class="chatroom-name">{{{ Strophe.getNodeFromJid(jid) }}}</span>@{{{ Strophe.getDomainFromJid(jid) }}}
+        <span class="chatroom-name">{{{ o.Strophe.getNodeFromJid(o.jid) }}}</span>@{{{ o.Strophe.getDomainFromJid(o.jid) }}}
     {[ } ]}
-    <p class="chatroom-description">{{{ description }}}<p/>
+    <p class="chatroom-description">{{{ o.description }}}<p/>
 </div>

src/templates/chatroom_invite.html

 <form class="pure-form room-invite">
-    {[ if (error_message) { ]}
-        <span class="pure-form-message error">{{{error_message}}}</span>
+    {[ if (o.error_message) { ]}
+        <span class="pure-form-message error">{{{o.error_message}}}</span>
     {[ } ]}
-    <input class="invited-contact" placeholder="{{{label_invitation}}}" type="text"/>
+    <input class="invited-contact" placeholder="{{{o.label_invitation}}}" type="text"/>
 </form>

src/templates/chatroom_nickname_form.html

 <div class="chatroom-form-container">
     <form class="pure-form converse-form chatroom-form converse-centered-form">
         <fieldset>
-            <label>{{{heading}}}</label>
-            <p class="validation-message">{{{validation_message}}}</p>
-            <input type="text" required="required" name="nick" class="new-chatroom-nick" placeholder="{{{label_nickname}}}"/>
+            <label>{{{o.heading}}}</label>
+            <p class="validation-message">{{{o.validation_message}}}</p>
+            <input type="text" required="required" name="nick" class="new-chatroom-nick" placeholder="{{{o.label_nickname}}}"/>
         </fieldset>
         <fieldset>
-            <input type="submit" class="pure-button button-primary" name="join" value="{{{label_join}}}"/>
+            <input type="submit" class="pure-button button-primary" name="join" value="{{{o.label_join}}}"/>
         </fieldset>
     </form>
 </div>

src/templates/chatroom_password_form.html

 <div class="chatroom-form-container">
     <form class="pure-form converse-form chatroom-form">
         <fieldset>
-            <legend>{{{heading}}}</legend>
-            <label>{{{label_password}}}</label>
+            <legend>{{{o.heading}}}</legend>
+            <label>{{{o.label_password}}}</label>
             <input type="password" name="password"/>
         </fieldset>
         <fieldset>
-            <input class="pure-button button-primary" type="submit" value="{{{label_submit}}}"/>
+            <input class="pure-button button-primary" type="submit" value="{{{o.label_submit}}}"/>
         </fieldset>
     </form>
 </div>

src/templates/chatroom_sidebar.html

 <!-- <div class="occupants"> -->
-<p class="occupants-heading">{{{label_occupants}}}</p>
+<p class="occupants-heading">{{{o.label_occupants}}}</p>
 <ul class="occupant-list"></ul>
 <div class="chatroom-features"></div>
 <!-- </div> -->

src/templates/chatroom_toolbar.html

-{[ if (use_emoji)  { ]}
-    <li class="toggle-smiley icon-happy" title="{{{label_insert_smiley}}}">
+{[ if (o.use_emoji)  { ]}
+    <li class="toggle-smiley icon-happy" title="{{{o.label_insert_smiley}}}">
         <ul class="emoji-picker"></ul>
     </li>
 {[ } ]}
-{[ if (show_call_button)  { ]}
-<li class="toggle-call"><a class="icon-phone" title="{{{label_start_call}}}"></a></li>
+{[ if (o.show_call_button)  { ]}
+<li class="toggle-call"><a class="icon-phone" title="{{{o.label_start_call}}}"></a></li>
 {[ } ]}
-{[ if (show_occupants_toggle)  { ]}
-<li class="toggle-occupants"><a class="icon-hide-users" title="{{{label_hide_occupants}}}"></a></li>
+{[ if (o.show_occupants_toggle)  { ]}
+<li class="toggle-occupants"><a class="icon-hide-users" title="{{{o.label_hide_occupants}}}"></a></li>
 {[ } ]}
-{[ if (show_clear_button)  { ]}
-<li class="toggle-clear"><a class="icon-trash" title="{{{label_clear}}}"></a></li>
+{[ if (o.show_clear_button)  { ]}
+<li class="toggle-clear"><a class="icon-trash" title="{{{o.label_clear}}}"></a></li>
 {[ } ]}
 

src/templates/chatrooms_tab.html

 <a class="s rooms-tab
-   {[ if (is_current) { ]} current {[ } ]}
-   {[ if (num_unread) { ]} unread-msgs {[ } ]}"
+   {[ if (o.is_current) { ]} current {[ } ]}
+   {[ if (o.num_unread) { ]} unread-msgs {[ } ]}"
        data-id="chatrooms" href="#chatrooms">
-    {{label_rooms}}
-    {[ if (num_unread) { ]}
-        <span class="msgs-indicator">{{{ num_unread }}}</span>
+    {{{o.label_rooms}}}
+    {[ if (o.num_unread) { ]}
+        <span class="msgs-indicator">{{{o. num_unread }}}</span>
     {[ } ]}
 </a>

src/templates/contacts_panel.html

 <form class="pure-form set-xmpp-status" id="set-xmpp-status" action="" method="post">
     <select id="select-xmpp-status">
-        <option value="online">{{{label_online}}}</option>
-        <option value="dnd">{{{label_busy}}}</option>
-        <option value="away">{{{label_away}}}</option>
-        {[ if (include_offline_state)  { ]}
-        <option value="offline">{{{label_offline}}}</option>
+        <option value="online">{{{o.label_online}}}</option>
+        <option value="dnd">{{{o.label_busy}}}</option>
+        <option value="away">{{{o.label_away}}}</option>
+        {[ if (o.include_offline_state)  { ]}
+        <option value="offline">{{{o.label_offline}}}</option>
         {[ } ]}
-        {[ if (allow_logout)  { ]}
-        <option value="logout">{{{label_logout}}}</option>
+        {[ if (o.allow_logout)  { ]}
+        <option value="logout">{{{o.label_logout}}}</option>
         {[ } ]}
     </select>
 </form>

src/templates/contacts_tab.html

 <a class="s contacts-tab
-   {[ if (is_current) { ]} current {[ } ]}
-   {[ if (num_unread) { ]} unread-msgs {[ } ]}"
+   {[ if (o.is_current) { ]} current {[ } ]}
+   {[ if (o.num_unread) { ]} unread-msgs {[ } ]}"
        data-id="users" href="#users">
-    {{{label_contacts}}}
-    {[ if (num_unread) { ]}
-        <span class="msgs-indicator">{{{ num_unread }}}</span>
+    {{{o.label_contacts}}}
+    {[ if (o.num_unread) { ]}
+        <span class="msgs-indicator">{{{ o.num_unread }}}</span>
     {[ } ]}
 </a>

src/templates/controlbox.html

 <div class="flyout box-flyout">
     <div class="chat-head controlbox-head">
         <ul id="controlbox-tabs"></ul>
-        {[ if (!sticky_controlbox) { ]}
+        {[ if (!o.sticky_controlbox) { ]}
             <a class="chatbox-btn close-chatbox-button icon-close"></a>
         {[ } ]}
     </div>

src/templates/controlbox_toggle.html

-<span class="toggle-feedback">{{{label_toggle}}}</span>
+<span class="toggle-feedback">{{{o.label_toggle}}}</span>

src/templates/emojis.html

-{[ _.forEach(emojis_by_category, function (obj, category) { ]}
-    <ul class="emoji-picker emoji-picker-{{{category}}} {[ if (current_category !== category) { ]} hidden {[ } ]}">
-        {[ _.forEach(emojis_by_category[category], function (emoji) { ]}
-        <li class="emoji insert-emoji {[ if (shouldBeHidden(emoji._shortname, current_skintone, toned_emojis)) { ]} hidden {[ }; ]}"
+{[ _.forEach(o.emojis_by_category, function (obj, category) { ]}
+    <ul class="emoji-picker emoji-picker-{{{category}}} {[ if (o.current_category !== category) { ]} hidden {[ } ]}">
+        {[ _.forEach(o.emojis_by_category[category], function (emoji) { ]}
+        <li class="emoji insert-emoji {[ if (o.shouldBeHidden(emoji._shortname, o.current_skintone, o.toned_emojis)) { ]} hidden {[ }; ]}"
             data-emoji="{{{emoji._shortname}}}">
-                <a href="#" data-emoji="{{{emoji._shortname}}}"> {{ transform(emoji._shortname) }}  </a>
+                <a href="#" data-emoji="{{{emoji._shortname}}}"> {{ o.transform(emoji._shortname) }}  </a>
         </li>
         {[ }); ]}
     </ul>
@@ -11,18 +11,18 @@
 <ul class="emoji-toolbar">
     <li class="emoji-category-picker">
         <ul>
-            {[ _.forEach(emojis_by_category, function (obj, category) { ]}
-                <li data-category="{{{category}}}" class="emoji-category {[ if (current_category === category) { ]} picked {[ } ]}">
-                    <a class="pick-category" href="#" data-category="{{{category}}}"> {{ transform(emojis_by_category[category][0]._shortname) }} </a>
+            {[ _.forEach(o.emojis_by_category, function (obj, category) { ]}
+                <li data-category="{{{category}}}" class="emoji-category {[ if (o.current_category === category) { ]} picked {[ } ]}">
+                    <a class="pick-category" href="#" data-category="{{{category}}}"> {{ o.transform(o.emojis_by_category[category][0]._shortname) }} </a>
                 </li>
             {[ }); ]}
         </ul>
     </li>
     <li class="emoji-skintone-picker">
         <ul>
-            {[ _.forEach(skintones, function (skintone) { ]}
-                <li data-skintone="{{{skintone}}}" class="emoji-skintone {[ if (current_skintone === skintone) { ]} picked {[ } ]}">
-                    <a class="pick-skintone" href="#" data-skintone="{{{skintone}}}"> {{ transform(':'+skintone+':') }} </a>
+            {[ _.forEach(o.skintones, function (skintone) { ]}
+                <li data-skintone="{{{skintone}}}" class="emoji-skintone {[ if (o.current_skintone === skintone) { ]} picked {[ } ]}">
+                    <a class="pick-skintone" href="#" data-skintone="{{{skintone}}}"> {{ o.transform(':'+skintone+':') }} </a>
                 </li>
             {[ }); ]}
         </ul>

src/templates/field.html

-<field var="{{{name}}}">
-{[ if (_.isArray(value)) { ]}
-    {[ _.each(value,function(arrayValue) { ]}<value>{{{arrayValue}}}</value>{[ }); ]}
+<field var="{{{o.name}}}">
+{[ if (_.isArray(o.value)) { ]}
+    {[ _.each(o.value,function(arrayValue) { ]}<value>{{{arrayValue}}}</value>{[ }); ]}
 {[ } else { ]}
-    <value>{{{value}}}</value>
+    <value>{{{o.value}}}</value>
 {[ } ]}</field>

src/templates/form_captcha.html

-{[ if (label) { ]}
+{[ if (o.label) { ]}
 <label>
-    {{{label}}}
+    {{{o.label}}}
 </label>
 {[ } ]}
-<img src="data:{{{type}}};base64,{{{data}}}">
-<input name="{{{name}}}" type="text" {[ if (required) { ]} class="required" {[ } ]} >
+<img src="data:{{{o.type}}};base64,{{{o.data}}}">
+<input name="{{{o.name}}}" type="text" {[ if (o.required) { ]} class="required" {[ } ]} >
 
 

src/templates/form_checkbox.html

-<label class="checkbox" for="{{{name}}}">{{{label}}}<input name="{{{name}}}" type="{{{type}}}" {{{checked}}}></label>
+<label class="checkbox" for="{{{o.name}}}">{{{o.label}}}<input name="{{{o.name}}}" type="{{{o.type}}}" {{{o.checked}}}></label>
 

src/templates/form_input.html

 <label>
-    {{{label}}}
-    <input name="{{{name}}}" type="{{{type}}}" 
-        {[ if (placeholder) { ]} placeholder="{{{placeholder}}}" {[ } ]}
-        {[ if (value) { ]} value="{{{value}}}" {[ } ]}
-        {[ if (required) { ]} class="required" {[ } ]} >
+    {{{o.label}}}
+    <input name="{{{o.name}}}" type="{{{o.type}}}" 
+        {[ if (o.placeholder) { ]} placeholder="{{{o.placeholder}}}" {[ } ]}
+        {[ if (o.value) { ]} value="{{{o.value}}}" {[ } ]}
+        {[ if (o.required) { ]} class="required" {[ } ]} >
 </label>

src/templates/form_select.html

 <label>
-    {{{label}}}
-    <select name="{{{name}}}"  {[ if (multiple) { ]} multiple="multiple" {[ } ]}>{{options}}</select>
+    {{{o.label}}}
+    <select name="{{{o.name}}}"  {[ if (o.multiple) { ]} multiple="multiple" {[ } ]}>{{o.options}}</select>
 </label>

src/templates/form_textarea.html

-<label class="label-ta">{{{label}}}</label>
-<textarea name="{{{name}}}">{{{value}}}</textarea>
+<label class="label-ta">{{{o.label}}}</label>
+<textarea name="{{{o.name}}}">{{{o.value}}}</textarea>

src/templates/form_url.html

 <label>
-    {{{label}}}
-    <a class="form-url" target="_blank" rel="noopener" href="{{{value}}}">{{{value}}}</a>
+    {{{o.label}}}
+    <a class="form-url" target="_blank" rel="noopener" href="{{{o.value}}}">{{{o.value}}}</a>
 </label>

src/templates/form_username.html

-{[ if (label) { ]}
+{[ if (o.label) { ]}
 <label>
-    {{{label}}}
+    {{{o.label}}}
 </label>
 {[ } ]}
 <div class="input-group">
-    <input name="{{{name}}}" type="{{{type}}}"
-        {[ if (value) { ]} value="{{{value}}}" {[ } ]}
-        {[ if (required) { ]} class="required" {[ } ]} />
-    <span title="{{{domain}}}">{{{domain}}}</span>
+    <input name="{{{o.name}}}" type="{{{o.type}}}"
+        {[ if (o.value) { ]} value="{{{o.value}}}" {[ } ]}
+        {[ if (o.required) { ]} class="required" {[ } ]} />
+    <span title="{{{o.domain}}}">{{{o.domain}}}</span>
 </div>

src/templates/group_header.html

-<a href="#" class="group-toggle icon-{{{toggle_state}}}" title="{{{desc_group_toggle}}}">{{{label_group}}}</a>
+<a href="#" class="group-toggle icon-{{{o.toggle_state}}}" title="{{{o.desc_group_toggle}}}">{{{o.label_group}}}</a>

src/templates/help_message.html

-<div class="chat-{{{type}}}">{{{message}}}</div>
+<div class="chat-{{{o.type}}}">{{{o.message}}}</div>

src/templates/info.html

-<div class="chat-info">{{{message}}}</div>
+<div class="chat-info">{{{o.message}}}</div>

src/templates/login_panel.html

 <form class="pure-form pure-form-stacked converse-form" id="converse-login" method="post">
-    <legend>{{{__("Login")}}}</legend>
-    <div class="conn-feedback fade-in {[ if (!conn_feedback_subject) { ]} hidden {[ } ]} {{{conn_feedback_class}}}">
-        <p class="feedback-subject">{{{ conn_feedback_subject }}}</p>
-        <p class="feedback-message {[ if (!conn_feedback_message) { ]} hidden {[ } ]}">{{{conn_feedback_message}}}</p>
+    <legend>{{{o.__("Login")}}}</legend>
+    <div class="conn-feedback fade-in {[ if (!o.conn_feedback_subject) { ]} hidden {[ } ]} {{{o.conn_feedback_class}}}">
+        <p class="feedback-subject">{{{ o.conn_feedback_subject }}}</p>
+        <p class="feedback-message {[ if (!o.conn_feedback_message) { ]} hidden {[ } ]}">{{{o.conn_feedback_message}}}</p>
     </div>
-    {[ if (auto_login || _converse.CONNECTION_STATUS[connection_status] === 'CONNECTING') { ]}
+    {[ if (o.auto_login || o._converse.CONNECTION_STATUS[o.connection_status] === 'CONNECTING') { ]}
         <span class="spinner centered"/>
     {[ } else { ]}
-        {[ if (authentication == LOGIN || authentication == EXTERNAL) { ]}
-            <label>{{{__("Jabber ID:")}}}</label>
+        {[ if (o.authentication == o.LOGIN || o.authentication == o.EXTERNAL) { ]}
+            <label>{{{o.__("Jabber ID:")}}}</label>
             <input autofocus required
                    type="text"
                    name="jid"
-                   placeholder="{{{placeholder_username}}}">
-            {[ if (authentication !== EXTERNAL) { ]}
-                <label>{{{__("Password:")}}}</label>
+                   placeholder="{{{o.placeholder_username}}}">
+            {[ if (o.authentication !== o.EXTERNAL) { ]}
+                <label>{{{o.__("Password:")}}}</label>
                 <input required
                        type="password" name="password"
-                       placeholder="{{{__('password')}}}">
+                       placeholder="{{{o.__('password')}}}">
             {[ } ]}
-            <input class="pure-button button-primary" type="submit" value="{{{__('Submit')}}}">
+            <input class="pure-button button-primary" type="submit" value="{{{o.__('Submit')}}}">
         {[ } ]}
-        {[ if (authentication == ANONYMOUS) { ]}
-            <input class="pure-button button-primary login-anon" type="submit" value="{{{__('Click here to log in anonymously')}}}"/>
+        {[ if (o.authentication == o.ANONYMOUS) { ]}
+            <input class="pure-button button-primary login-anon" type="submit" value="{{{o.__('Click here to log in anonymously')}}}"/>
         {[ } ]}
-        {[ if (authentication == PREBIND) { ]}
+        {[ if (o.authentication == o.PREBIND) { ]}
             <p>Disconnected.</p>
         {[ } ]}
     {[ } ]}

src/templates/message.html

-<div class="chat-message {{{extra_classes}}}" data-isodate="{{{isodate}}}" data-msgid="{{{msgid}}}">
-    <span class="chat-msg-author chat-msg-{{{sender}}}">{{{time}}} {{{username}}}:&nbsp;</span>
+<div class="chat-message {{{o.extra_classes}}}" data-isodate="{{{o.isodate}}}" data-msgid="{{{o.msgid}}}">
+    <span class="chat-msg-author chat-msg-{{{o.sender}}}">{{{o.time}}} {{{o.username}}}:&nbsp;</span>
     <span class="chat-msg-content"><!-- message gets added here via renderMessage --></span>
 </div>

src/templates/new_day.html

-<time class="chat-info chat-date" data-isodate="{{{isodate}}}">{{{datestring}}}</time>
+<time class="chat-info chat-date" data-isodate="{{{o.isodate}}}">{{{o.datestring}}}</time>

src/templates/occupant.html

-<li class="{{{ role }}} occupant" id="{{{ id }}}"
-    {[ if (role === "moderator") { ]}
-       title="{{{ jid }}} {{{ desc_moderator }}} {{{ hint_occupant }}}"
+<li class="{{{ o.role }}} occupant" id="{{{ o.id }}}"
+    {[ if (o.role === "moderator") { ]}
+       title="{{{ o.jid }}} {{{ o.desc_moderator }}} {{{ o.hint_occupant }}}"
     {[ } ]}
-    {[ if (role === "occupant") { ]}
-       title="{{{ jid }}} {{{ desc_occupant }}} {{{ hint_occupant }}}"
+    {[ if (o.role === "occupant") { ]}
+       title="{{{ o.jid }}} {{{ o.desc_occupant }}} {{{ o.hint_occupant }}}"
     {[ } ]}
-    {[ if (role === "visitor") { ]}
-       title="{{{ jid }}} {{{ desc_visitor }}} {{{ hint_occupant }}}"
+    {[ if (o.role === "visitor") { ]}
+       title="{{{ o.jid }}} {{{ o.desc_visitor }}} {{{ o.hint_occupant }}}"
     {[ } ]}
-    {[ if (!_.includes(["visitor", "occupant", "moderator"], role)) { ]}
-       title="{{{ jid }}} {{{ hint_occupant }}}"
-       {[ } ]}><div class="occupant-status occupant-{{{show}}} circle" title="{{{hint_show}}}"></div>{{{nick}}}</li>
+    {[ if (!_.includes(["visitor", "occupant", "moderator"], o.role)) { ]}
+       title="{{{ o.jid }}} {{{ o.hint_occupant }}}"
+       {[ } ]}><div class="occupant-status occupant-{{{o.show}}} circle" title="{{{o.hint_show}}}"></div>{{{o.nick}}}</li>

src/templates/pending_contact.html

-{[ if (allow_chat_pending_contacts)  { ]}
+{[ if (o.allow_chat_pending_contacts)  { ]}
 <a class="open-chat"href="#">
 {[ } ]}
-<span class="pending-contact-name" title="Name: {{{fullname}}}
-JID: {{{jid}}}">{{{fullname}}}</span> 
-{[ if (allow_chat_pending_contacts)  { ]}
+<span class="pending-contact-name" title="Name: {{{o.fullname}}}
+JID: {{{o.jid}}}">{{{o.fullname}}}</span> 
+{[ if (o.allow_chat_pending_contacts)  { ]}
 </a>
 {[ } ]}
-<a class="remove-xmpp-contact icon-remove" title="{{{desc_remove}}}" href="#"></a>
+<a class="remove-xmpp-contact icon-remove" title="{{{o.desc_remove}}}" href="#"></a>

src/templates/register_link.html

 <div class="switch-form">
-    <p>{{{ __("Don't have a chat account?") }}}</p>
-    <p><a class="register-account toggle-register-login" href="#converse/register">{{{__("Create an account")}}}</a></p>
+    <p>{{{ o.__("Don't have a chat account?") }}}</p>
+    <p><a class="register-account toggle-register-login" href="#converse/register">{{{o.__("Create an account")}}}</a></p>
 </div>

src/templates/register_panel.html

 <form id="converse-register" class="pure-form converse-form">
-    <legend>{{{__("Create your account")}}}</legend>
+    <legend>{{{o.__("Create your account")}}}</legend>
 
-    <label>{{{__("Please enter the XMPP provider to register with:")}}}</label>
-    <p class="form-help">{{{help_providers}}} <a href="{{{href_providers}}}" class="url" target="_blank" rel="noopener">{{{help_providers_link}}}</a>.</p>
+    <label>{{{o.__("Please enter the XMPP provider to register with:")}}}</label>
+    <p class="form-help">{{{o.help_providers}}} <a href="{{{o.href_providers}}}" class="url" target="_blank" rel="noopener">{{{o.help_providers_link}}}</a>.</p>
     <div class="form-errors hidden"></div>
 
-    {[ if (default_domain) { ]}
-        {{{default_domain}}}
+    {[ if (o.default_domain) { ]}
+        {{{o.default_domain}}}
     {[ } ]}
-    {[ if (!default_domain) { ]}
-        <input autofocus required type="text" name="domain" placeholder="{{{domain_placeholder}}}">
-        <input class="pure-button button-primary" type="submit" value="{{{label_register}}}">
+    {[ if (!o.default_domain) { ]}
+        <input autofocus required type="text" name="domain" placeholder="{{{o.domain_placeholder}}}">
+        <input class="pure-button button-primary" type="submit" value="{{{o.label_register}}}">
     {[ } ]}
 </form>
 
 <div class="switch-form">
-    <p>{{{ __("Already have a chat account?") }}}</p>
+    <p>{{{ o.__("Already have a chat account?") }}}</p>
     <p>
-        <a class="login-here toggle-register-login" href="#converse/login">{{{__("Log in here")}}}</a>
+        <a class="login-here toggle-register-login" href="#converse/login">{{{o.__("Log in here")}}}</a>
     </p>
 </div>

src/templates/registration_form.html

-<legend>{{{__("Account Registration:")}}} {{{domain}}}</legend>
-<p class="title">{{{title}}}</p>
-<p class="instructions">{{{instructions}}}</p>
+<legend>{{{o.__("Account Registration:")}}} {{{o.domain}}}</legend>
+<p class="title">{{{o.title}}}</p>
+<p class="instructions">{{{o.instructions}}}</p>
 <div class="form-errors hidden"></div>
 
 <fieldset class="buttons">
-    <input type="submit" class="pure-button button-primary" value="{{{__('Register')}}}"/>
-    {[ if (!registration_domain) { ]}
-        <input type="button" class="pure-button button-cancel" value="{{{__('Choose a different provider')}}}"/>
+    <input type="submit" class="pure-button button-primary" value="{{{o.__('Register')}}}"/>
+    {[ if (!o.registration_domain) { ]}
+        <input type="button" class="pure-button button-cancel" value="{{{o.__('Choose a different provider')}}}"/>
     {[ } ]}
 </fieldset>

src/templates/registration_request.html

 <span class="spinner login-submit"></span>
-<p class="info">{{{__("Hold tight, we're fetching the registration form…")}}}</p>
-{[ if (cancel) { ]}
-	<button class="pure-button button-cancel hor_centered">{{{__('Cancel')}}}</button>
+<p class="info">{{{o.__("Hold tight, we're fetching the registration form…")}}}</p>
+{[ if (o.cancel) { ]}
+	<button class="pure-button button-cancel hor_centered">{{{o.__('Cancel')}}}</button>
 {[ } ]}

src/templates/requesting_contact.html

-{[ if (allow_chat_pending_contacts)  { ]}
+{[ if (o.allow_chat_pending_contacts)  { ]}
 <a class="open-chat"href="#">
 {[ } ]}
-<span class="req-contact-name" title="Name: {{{fullname}}}
-JID: {{{jid}}}">{{{fullname}}}</span>
-{[ if (allow_chat_pending_contacts)  { ]}
+<span class="req-contact-name" title="Name: {{{o.fullname}}}
+JID: {{{o.jid}}}">{{{o.fullname}}}</span>
+{[ if (o.allow_chat_pending_contacts)  { ]}
 </a>
 {[ } ]}
 <span class="request-actions">
-    <a class="accept-xmpp-request icon-checkmark" aria-label="{{{desc_accept}}}" title="{{{desc_accept}}}" href="#"></a>
-    <a class="decline-xmpp-request icon-close" aria-label="{{{desc_decline}}}" title="{{{desc_decline}}}" href="#"></a>
+    <a class="accept-xmpp-request icon-checkmark" aria-label="{{{o.desc_accept}}}" title="{{{o.desc_accept}}}" href="#"></a>
+    <a class="decline-xmpp-request icon-close" aria-label="{{{o.desc_decline}}}" title="{{{o.desc_decline}}}" href="#"></a>
 </span>

src/templates/room_description.html

 <!-- FIXME: check markup in mockup -->
 <div class="room-info">
-<p class="room-info"><strong>{{{label_jid}}}</strong> {{{jid}}}</p>
-<p class="room-info"><strong>{{{label_desc}}}</strong> {{{desc}}}</p>
-<p class="room-info"><strong>{{{label_occ}}}</strong> {{{occ}}}</p>
-<p class="room-info"><strong>{{{label_features}}}</strong>
+<p class="room-info"><strong>{{{o.label_jid}}}</strong> {{{o.jid}}}</p>
+<p class="room-info"><strong>{{{o.label_desc}}}</strong> {{{o.desc}}}</p>
+<p class="room-info"><strong>{{{o.label_occ}}}</strong> {{{o.occ}}}</p>
+<p class="room-info"><strong>{{{o.label_features}}}</strong>
     <ul>
-        {[ if (passwordprotected) { ]}
-        <li class="room-info locked">{{{label_requires_auth}}}</li>
+        {[ if (o.passwordprotected) { ]}
+        <li class="room-info locked">{{{o.label_requires_auth}}}</li>
         {[ } ]}
-        {[ if (hidden) { ]}
-        <li class="room-info">{{{label_hidden}}}</li>
+        {[ if (o.hidden) { ]}
+        <li class="room-info">{{{o.label_hidden}}}</li>
         {[ } ]}
-        {[ if (membersonly) { ]}
-        <li class="room-info">{{{label_requires_invite}}}</li>
+        {[ if (o.membersonly) { ]}
+        <li class="room-info">{{{o.label_requires_invite}}}</li>
         {[ } ]}
-        {[ if (moderated) { ]}
-        <li class="room-info">{{{label_moderated}}}</li>
+        {[ if (o.moderated) { ]}
+        <li class="room-info">{{{o.label_moderated}}}</li>
         {[ } ]}
-        {[ if (nonanonymous) { ]}
-        <li class="room-info">{{{label_non_anon}}}</li>
+        {[ if (o.nonanonymous) { ]}
+        <li class="room-info">{{{o.label_non_anon}}}</li>
         {[ } ]}
-        {[ if (open) { ]}
-        <li class="room-info">{{{label_open_room}}}</li>
+        {[ if (o.open) { ]}
+        <li class="room-info">{{{o.label_open_room}}}</li>
         {[ } ]}
-        {[ if (persistent) { ]}
-        <li class="room-info">{{{label_permanent_room}}}</li>
+        {[ if (o.persistent) { ]}
+        <li class="room-info">{{{o.label_permanent_room}}}</li>
         {[ } ]}
-        {[ if (publicroom) { ]}
-        <li class="room-info">{{{label_public}}}</li>
+        {[ if (o.publicroom) { ]}
+        <li class="room-info">{{{o.label_public}}}</li>
         {[ } ]}
-        {[ if (semianonymous) { ]}
-        <li class="room-info">{{{label_semi_anon}}}</li>
+        {[ if (o.semianonymous) { ]}
+        <li class="room-info">{{{o.label_semi_anon}}}</li>
         {[ } ]}
-        {[ if (temporary) { ]}
-        <li class="room-info">{{{label_temp_room}}}</li>
+        {[ if (o.temporary) { ]}
+        <li class="room-info">{{{o.label_temp_room}}}</li>
         {[ } ]}
-        {[ if (unmoderated) { ]}
-        <li class="room-info">{{{label_unmoderated}}}</li>
+        {[ if (o.unmoderated) { ]}
+        <li class="room-info">{{{o.label_unmoderated}}}</li>
         {[ } ]}
     </ul>
 </p>

src/templates/room_item.html

 <dd class="available-chatroom">
 <a class="open-room available-room"
-   data-room-jid="{{{jid}}}"
-   title="{{{open_title}}}"
-   href="#">{{{name}}}</a>
+   data-room-jid="{{{o.jid}}}"
+   title="{{{o.open_title}}}"
+   href="#">{{{o.name}}}</a>
 <a class="right room-info icon-room-info"
-   data-room-jid="{{{jid}}}"
-   title="{{{info_title}}}" href="#">&nbsp;</a>
+   data-room-jid="{{{o.jid}}}"
+   title="{{{o.info_title}}}" href="#">&nbsp;</a>
 </dd>

src/templates/room_panel.html

 <form class="pure-form pure-form-stacked converse-form add-chatroom" action="" method="post">
     <fieldset>
-        <label>{{label_room_name}}</label>
-        <input type="text" name="chatroom" class="new-chatroom-name" placeholder="{{label_room_name}}"/>
-        {[ if (server_input_type != 'hidden') { ]}
-            <label{{server_label_global_attr}}>{{label_server}}</label>
+        <label>{{{o.label_room_name}}}</label>
+        <input type="text" name="chatroom" class="new-chatroom-name" placeholder="{{{o.label_room_name}}}"/>
+        {[ if (o.server_input_type != 'hidden') { ]}
+        <label{{{o.server_label_global_attr}}}>{{{o.label_server}}}</label>
         {[ } ]}
-        <input type="{{server_input_type}}" name="server" class="new-chatroom-server" placeholder="{{label_server}}"/>
-        <input type="submit" class="pure-button button-primary" name="join" value="{{label_join}}"/>
-        <input type="button" class="pure-button button-secondary" name="show" id="show-rooms" value="{{label_show_rooms}}"/>
+        <input type="{{{o.server_input_type}}}" name="server" class="new-chatroom-server" placeholder="{{{o.label_server}}}"/>
+        <input type="submit" class="pure-button button-primary" name="join" value="{{{o.label_join}}}"/>
+        <input type="button" class="pure-button button-secondary" name="show" id="show-rooms" value="{{{o.label_show_rooms}}}"/>
     </fieldset>
 </form>
 <div class="rooms-list-container">

src/templates/rooms_list.html

-<a href="#" class="rooms-toggle open-rooms-toggle icon-{{{toggle_state}}}" title="{{{desc_rooms}}}">{{{label_rooms}}}</a>
+<a href="#" class="rooms-toggle open-rooms-toggle icon-{{{o.toggle_state}}}" title="{{{o.desc_rooms}}}">{{{o.label_rooms}}}</a>
 <dl class="rooms-list open-rooms-list"></dl>

src/templates/rooms_list_item.html

-<dd class="available-chatroom {[ if (num_unread_general) { ]} unread-msgs {[ } ]}" data-room-jid="{{{jid}}}">
-{[ if (num_unread) { ]}
-    <span class="msgs-indicator">{{{ num_unread }}}</span>
+<dd class="available-chatroom {[ if (o.num_unread_general) { ]} unread-msgs {[ } ]}" data-room-jid="{{{o.jid}}}">
+{[ if (o.num_unread) { ]}
+    <span class="msgs-indicator">{{{ o.num_unread }}}</span>
 {[ } ]}
 <a class="open-room"
-    data-room-jid="{{{jid}}}"
-    title="{{{open_title}}}" href="#">{{{name}}}</a>
+    data-room-jid="{{{o.jid}}}"
+    title="{{{o.open_title}}}" href="#">{{{o.name}}}</a>
 <a class="right close-room icon-leave"
-   data-room-jid="{{{jid}}}"
-   data-room-name="{{{name}}}"
-   title="{{{info_leave_room}}}" href="#">&nbsp;</a>
+   data-room-jid="{{{o.jid}}}"
+   data-room-name="{{{o.name}}}"
+   title="{{{o.info_leave_room}}}" href="#">&nbsp;</a>
 
-{[ if (allow_bookmarks) { ]}
-<a class="right icon-pushpin {[ if (bookmarked) { ]} remove-bookmark button-on {[ } else { ]} add-bookmark {[ } ]}"
-   data-room-jid="{{{jid}}}" data-bookmark-name="{{{name}}}"
-   title="{[ if (bookmarked) { ]} {{{info_remove_bookmark}}} {[ } else { ]} {{{info_add_bookmark}}} {[ } ]}"
+{[ if (o.allow_bookmarks) { ]}
+<a class="right icon-pushpin {[ if (o.bookmarked) { ]} remove-bookmark button-on {[ } else { ]} add-bookmark {[ } ]}"
+   data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"
+   title="{[ if (o.bookmarked) { ]} {{{o.info_remove_bookmark}}} {[ } else { ]} {{{o.info_add_bookmark}}} {[ } ]}"
    href="#">&nbsp;</a>
 {[ } ]}
-<a class="right room-info icon-room-info" data-room-jid="{{{jid}}}"
-   title="{{{info_title}}}" href="#">&nbsp;</a>
+<a class="right room-info icon-room-info" data-room-jid="{{{o.jid}}}"
+   title="{{{o.info_title}}}" href="#">&nbsp;</a>
 </dd>

src/templates/roster_filter.html

 <form class="pure-form roster-filter-form input-button-group">
-    <input value="{{filter_text}}" class="roster-filter roster-filter-{{filter_type}}"
-           placeholder="{{placeholder}}">
-    <select class="state-type state-type-{{filter_type}}">
-        <option value="">{{label_any}}</option>
-        <option {[ if (chat_state === 'unread_messages') { ]} selected="selected" {[ } ]}
-            value="unread_messages">{{label_unread_messages}}</option>
-        <option {[ if (chat_state === 'online') { ]} selected="selected" {[ } ]}
-            value="online">{{label_online}}</option>
-        <option {[ if (chat_state === 'chat') { ]} selected="selected" {[ } ]}
-            value="chat">{{label_chatty}}</option>
-        <option {[ if (chat_state === 'dnd') { ]} selected="selected" {[ } ]}
-            value="dnd">{{label_busy}}</option>
-        <option {[ if (chat_state === 'away') { ]} selected="selected" {[ } ]}
-            value="away">{{label_away}}</option>
-        <option {[ if (chat_state === 'xa') { ]} selected="selected" {[ } ]}
-            value="xa">{{label_xa}}</option>
-        <option {[ if (chat_state === 'offline') { ]} selected="selected" {[ } ]}
-            value="offline">{{label_offline}}</option>
+    <input value="{{{o.filter_text}}}"
+           class="roster-filter roster-filter-{{{o.filter_type}}}"
+           placeholder="{{{o.placeholder}}}">
+    <select class="state-type state-type-{{{o.filter_type}}}">
+        <option value="">{{{o.label_any}}}</option>
+        <option {[ if (o.chat_state === 'unread_messages') { ]} selected="selected" {[ } ]}
+            value="unread_messages">{{{o.label_unread_messages}}}</option>
+        <option {[ if (o.chat_state === 'online') { ]} selected="selected" {[ } ]}
+            value="online">{{{o.label_online}}}</option>
+        <option {[ if (o.chat_state === 'chat') { ]} selected="selected" {[ } ]}
+            value="chat">{{{o.label_chatty}}}</option>
+        <option {[ if (o.chat_state === 'dnd') { ]} selected="selected" {[ } ]}
+            value="dnd">{{{o.label_busy}}}</option>
+        <option {[ if (o.chat_state === 'away') { ]} selected="selected" {[ } ]}
+            value="away">{{{o.label_away}}}</option>
+        <option {[ if (o.chat_state === 'xa') { ]} selected="selected" {[ } ]}
+            value="xa">{{{o.label_xa}}}</option>
+        <option {[ if (o.chat_state === 'offline') { ]} selected="selected" {[ } ]}
+            value="offline">{{{o.label_offline}}}</option>
     </select>
     <select class="filter-type">
-        <option {[ if (filter_type === 'contacts') { ]} selected="selected" {[ } ]}
-                value="contacts">{{label_contacts}}</option>
-        <option {[ if (filter_type === 'groups') { ]} selected="selected" {[ } ]}
-                value="groups">{{label_groups}}</option>
-        <option {[ if (filter_type === 'state') { ]} selected="selected" {[ } ]}
-                value="state">{{label_state}}</option>
+        <option {[ if (o.filter_type === 'contacts') { ]} selected="selected" {[ } ]}
+                value="contacts">{{{o.label_contacts}}}</option>
+        <option {[ if (o.filter_type === 'groups') { ]} selected="selected" {[ } ]}
+                value="groups">{{{o.label_groups}}}</option>
+        <option {[ if (o.filter_type === 'state') { ]} selected="selected" {[ } ]}
+                value="state">{{{o.label_state}}}</option>
     </select>
 </form>

src/templates/roster_item.html

-<a class="open-chat {[ if (num_unread) { ]} unread-msgs {[ } ]}"
-   title="{{{title_fullname}}}: {{{fullname}}} JID: {{{jid}}} {{{desc_chat}}}"
+<a class="open-chat {[ if (o.num_unread) { ]} unread-msgs {[ } ]}"
+   title="{{{o.title_fullname}}}: {{{o.fullname}}} JID: {{{o.jid}}} {{{o.desc_chat}}}"
    href="#">
-    <div class="avatar avatar-{{{chat_status}}}">
-        <span class="status-icon icon-{{{chat_status}}}" title="{{{desc_status}}}"></span>
+    <div class="avatar avatar-{{{o.chat_status}}}">
+        <span class="status-icon icon-{{{o.chat_status}}}" title="{{{o.desc_status}}}"></span>
     </div>
-    {[ if (num_unread) { ]}
-    <span class="msgs-indicator">{{{ num_unread }}}</span>
+    {[ if (o.num_unread) { ]}
+    <span class="msgs-indicator">{{{ o.num_unread }}}</span>
     {[ } ]}
-    <span class="contact-name {[ if (num_unread) { ]} unread-msgs {[ } ]}">{{{fullname}}}</span>
+    <span class="contact-name {[ if (o.num_unread) { ]} unread-msgs {[ } ]}">{{{o.fullname}}}</span>
 </a>
-{[ if (allow_contact_removal) { ]}
-<a class="remove-xmpp-contact icon-remove" title="{{{desc_remove}}}" href="#"></a>
+{[ if (o.allow_contact_removal) { ]}
+<a class="remove-xmpp-contact icon-remove" title="{{{o.desc_remove}}}" href="#"></a>
 {[ } ]}
 
 

src/templates/search_contact.html

@@ -3,7 +3,7 @@
         <input type="text"
             name="identifier"
             class="username"
-            placeholder="{{{label_contact_name}}}"/>
-        <button type="submit">{{{label_search}}}</button>
+            placeholder="{{{o.label_contact_name}}}"/>
+        <button type="submit">{{{o.label_search}}}</button>
     </form>
 </li>

src/templates/select_option.html

-<option value="{{{value}}}" {[ if (selected) { ]} selected="selected" {[ } ]} >{{{label}}}</option>
+<option value="{{{o.value}}}" {[ if (o.selected) { ]} selected="selected" {[ } ]} >{{{o.label}}}</option>

src/templates/status_option.html

 <li>
-    <a href="#" class="{{{ value }}}" data-value="{{{ value }}}">
-        <span class="icon-{{{ value }}}"></span>
-        {{{ text }}}
+    <a href="#" class="{{{ o.value }}}" data-value="{{{ o.value }}}">
+        <span class="icon-{{{ o.value }}}"></span>
+        {{{ o.text }}}
     </a>
 </li>

src/templates/toggle_chats.html

-{{{Minimized}}} <span id="minimized-count">({{{num_minimized}}})</span>
+{{{o.Minimized}}} <span id="minimized-count">({{{o.num_minimized}}})</span>
 <span class="unread-message-count
-    {[ if (!num_unread) { ]} unread-message-count-hidden {[ } ]}
-    href="#">{{{num_unread}}}</span>
+    {[ if (!o.num_unread) { ]} unread-message-count-hidden {[ } ]}
+    href="#">{{{o.num_unread}}}</span>

src/templates/toolbar.html

-{[ if (use_emoji)  { ]}
-    <li class="toggle-toolbar-menu toggle-smiley icon-happy" title="{{{label_insert_smiley}}}">
+{[ if (o.use_emoji)  { ]}
+    <li class="toggle-toolbar-menu toggle-smiley icon-happy" title="{{{o.label_insert_smiley}}}">
         <ul class="emoji-picker"></ul>
     </li>
 {[ } ]}
-{[ if (show_call_button)  { ]}
-<li class="toggle-call"><a class="icon-phone" title="{{{label_start_call}}}"></a></li>
+{[ if (o.show_call_button)  { ]}
+<li class="toggle-call"><a class="icon-phone" title="{{{o.label_start_call}}}"></a></li>
 {[ } ]}
-{[ if (show_clear_button)  { ]}
-<li class="toggle-clear"><a class="icon-trash" title="{{{label_clear}}}"></a></li>
+{[ if (o.show_clear_button)  { ]}
+<li class="toggle-clear"><a class="icon-trash" title="{{{o.label_clear}}}"></a></li>
 {[ } ]}

src/templates/toolbar_otr.html

-{[ if (allow_otr)  { ]}
-    <li class="toggle-toolbar-menu toggle-otr {{{otr_status_class}}}" title="{{{otr_tooltip}}}">
-        <span class="chat-toolbar-text">{{{otr_translated_status}}}</span>
-        {[ if (otr_status == UNENCRYPTED) { ]}
+{[ if (o.allow_otr)  { ]}
+    <li class="toggle-toolbar-menu toggle-otr {{{o.otr_status_class}}}" title="{{{o.otr_tooltip}}}">
+        <span class="chat-toolbar-text">{{{o.otr_translated_status}}}</span>
+        {[ if (o.otr_status == o.UNENCRYPTED) { ]}
             <span class="icon-unlocked"></span>
         {[ } ]}
-        {[ if (otr_status == UNVERIFIED) { ]}
+        {[ if (o.otr_status == o.UNVERIFIED) { ]}
             <span class="icon-lock"></span>
         {[ } ]}
-        {[ if (otr_status == VERIFIED) { ]}
+        {[ if (o.otr_status == o.VERIFIED) { ]}
             <span class="icon-lock"></span>
-        {[ } ]}
-        {[ if (otr_status == FINISHED) { ]}
+        {[ } ]} {[ if (o.otr_status == o.FINISHED) { ]}
             <span class="icon-unlocked"></span>
         {[ } ]}
         <ul class="toolbar-menu collapsed">
-            {[ if (otr_status == UNENCRYPTED) { ]}
-               <li><a class="start-otr" href="#">{{{label_start_encrypted_conversation}}}</a></li>
+            {[ if (o.otr_status == o.UNENCRYPTED) { ]}
+               <li><a class="start-otr" href="#">{{{o.label_start_encrypted_conversation}}}</a></li>
             {[ } ]}
-            {[ if (otr_status != UNENCRYPTED) { ]}
-               <li><a class="start-otr" href="#">{{{label_refresh_encrypted_conversation}}}</a></li>
-               <li><a class="end-otr" href="#">{{{label_end_encrypted_conversation}}}</a></li>
-               <li><a class="auth-otr" data-scheme="smp" href="#">{{{label_verify_with_smp}}}</a></li>
+            {[ if (o.otr_status != o.UNENCRYPTED) { ]}
+               <li><a class="start-otr" href="#">{{{o.label_refresh_encrypted_conversation}}}</a></li>
+               <li><a class="end-otr" href="#">{{{o.label_end_encrypted_conversation}}}</a></li>
+               <li><a class="auth-otr" data-scheme="smp" href="#">{{{o.label_verify_with_smp}}}</a></li>
             {[ } ]}
-            {[ if (otr_status == UNVERIFIED) { ]}
-               <li><a class="auth-otr" data-scheme="fingerprint" href="#">{{{label_verify_with_fingerprints}}}</a></li>
+            {[ if (o.otr_status == o.UNVERIFIED) { ]}
+               <li><a class="auth-otr" data-scheme="fingerprint" href="#">{{{o.label_verify_with_fingerprints}}}</a></li>
             {[ } ]}
-            <li><a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">{{{label_whats_this}}}</a></li>
+            <li><a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">{{{o.label_whats_this}}}</a></li>
         </ul>
     </li>
 {[ } ]}

src/templates/trimmed_chat.html

 <a class="chatbox-btn close-chatbox-button icon-close"></a>
 <a class="chat-head-message-count
-    {[ if (!num_unread) { ]} chat-head-message-count-hidden {[ } ]}"
-    href="#">{{{num_unread}}}</a>
-<a href="#" class="restore-chat" title="{{{tooltip}}}">
-    {{{ title }}}
+    {[ if (!o.num_unread) { ]} chat-head-message-count-hidden {[ } ]}"
+    href="#">{{{o.num_unread}}}</a>
+<a href="#" class="restore-chat" title="{{{o.tooltip}}}">
+    {{{o. title }}}
 </a>