{
  "templates": {
    "app": [
      { "t": "header", "class": "topbar", "c": [
        { "use": "iconBtn", "with": { "icon": "menu", "label": "Main menu", "action": "toggleNav" } },
        { "t": "a", "class": "brand", "attrs": { "href": "#" }, "on": { "click": "home" },
          "c": [{ "icon": "mailbox", "class": "logo-icon" }, { "t": "span", "text": "{brand}" }] },
        { "t": "form", "class": "search", "ref": "searchForm", "attrs": { "role": "search" }, "on": { "submit": "search" }, "c": [
          { "t": "button", "class": "icon-btn", "attrs": { "type": "submit", "title": "Search", "aria-label": "Search" }, "c": [{ "icon": "search" }] },
          { "t": "input", "class": "search-input", "ref": "search", "on": { "keydown": "searchKey" },
            "attrs": { "type": "search", "name": "q", "placeholder": "Search mail", "aria-label": "Search mail", "autocomplete": "off", "spellcheck": "false" } },
          { "use": "iconBtn", "with": { "icon": "close", "label": "Clear search", "action": "clearSearch", "cls": "small search-clear" } }
        ] },
        { "t": "span", "class": "spacer" },
        { "use": "iconBtn", "with": { "icon": "settings", "label": "Settings", "action": "settings" } },
        { "t": "button", "class": "avatar avatar-btn", "style": { "background": "{color}" }, "on": { "click": "account" },
          "attrs": { "title": "{email}", "aria-label": "Account: {email}" }, "text": "{initial}" }
      ] },
      { "t": "nav", "class": "sidebar", "ref": "nav" },
      { "t": "main", "class": "content", "c": [{ "class": "panel", "ref": "panel" }] },
      { "class": "nav-scrim", "on": { "click": "closeNav" } },
      { "t": "button", "class": "fab", "on": { "click": "compose" }, "c": [{ "icon": "pencil" }, "Compose"] }
    ],

    "sidebar": [
      { "t": "button", "class": "compose-btn", "on": { "click": "compose" }, "c": [{ "icon": "pencil" }, { "t": "span", "text": "Compose" }] },
      { "class": "nav-list", "attrs": { "role": "navigation", "aria-label": "Folders" }, "c": [
        { "each": "items", "as": "f", "use": "navItem" },
        { "class": "nav-section", "c": [
          { "t": "span", "text": "Folders" },
          { "use": "iconBtn", "with": { "icon": "plus", "label": "New folder", "action": "newFolder", "cls": "small" } }
        ] },
        { "each": "custom", "as": "f", "use": "navItem" }
      ] }
    ],

    "navItem": {
      "t": "a", "class": "nav-item", "classIf": { "active": "f.active", "bold": "f.bold", "disabled": "f.disabled" },
      "attrs": { "href": "#", "aria-current": "{f.current}" }, "style": { "paddingLeft": "{f.pad}" },
      "on": { "click": "navClick", "contextmenu": "navContext", "dragover": "navDragOver", "dragleave": "navDragLeave", "drop": "navDrop" },
      "c": [
        { "icon": "{f.icon}" },
        { "t": "span", "class": "nav-label", "text": "{f.label}" },
        { "if": "f.count", "t": "span", "class": "nav-count", "text": "{f.countText}" },
        { "if": "f.custom", "use": "iconBtn", "with": { "icon": "more", "label": "Folder options", "action": "folderMore", "cls": "small nav-more" } }
      ]
    },

    "list.view": {
      "class": "list-view", "c": [
        { "class": "loading-bar", "ref": "bar" },
        { "class": "toolbar", "ref": "toolbar" },
        { "if": "header", "class": "search-header", "c": [
          { "t": "span", "c": ["{header.pre}", { "if": "header.q", "t": "b", "text": "“{header.q}”" }, "{header.post}"] },
          { "if": "header.clear", "t": "button", "class": "btn text small", "on": { "click": "clearSearch" }, "text": "Clear search" }
        ] },
        { "class": "rows", "ref": "rows", "attrs": { "role": "list", "aria-label": "Messages" } }
      ]
    },

    "list.skeleton": { "each": "rows", "class": "row skeleton", "c": [{ "t": "span" }, { "t": "span" }, { "t": "span" }] },

    "list.empty": { "class": "empty", "c": [{ "icon": "{icon}", "class": "empty-icon" }, { "t": "p", "text": "{message}" }] },

    "list.error": { "class": "empty", "c": [{ "t": "p", "text": "{message}" }, { "t": "button", "class": "btn", "on": { "click": "retry" }, "text": "Try again" }] },

    "list.row": {
      "class": "row {m.state}", "classIf": { "selected": "sel", "focused": "focused" },
      "attrs": { "role": "listitem", "tabindex": "-1", "draggable": "true", "data-uid": "{m.uid}" },
      "on": { "click": "rowClick", "dragstart": "rowDrag" },
      "c": [
        { "t": "label", "class": "cell-check", "attrs": { "title": "Select" }, "c": [
          { "t": "input", "attrs": { "type": "checkbox", "aria-label": "Select message" }, "props": { "checked": "sel" }, "on": { "click": "rowCheck" } }
        ] },
        { "t": "button", "class": "star-btn", "classIf": { "on": "m.flags.flagged" }, "on": { "click": "rowStar" },
          "attrs": { "title": "{starTitle}", "aria-label": "{starLabel}", "aria-pressed": "{starPressed}" }, "c": [{ "icon": "star" }] },
        { "class": "cell-from", "c": [
          { "if": "draft", "t": "span", "class": "draft-tag", "text": "Draft" },
          { "t": "span", "class": "from-text", "text": "{who}" }
        ] },
        { "class": "cell-main", "c": [
          { "t": "span", "class": "subject", "text": "{subject}" },
          { "if": "m.preview", "t": "span", "class": "preview", "text": " – {m.preview}" }
        ] },
        { "t": "span", "class": "cell-att", "c": [{ "if": "m.attachments", "icon": "clip" }] },
        { "t": "time", "class": "cell-date", "attrs": { "title": "{m.date|longDate}" }, "text": "{m.date|shortDate}" },
        { "class": "row-actions", "c": [
          { "if": "a.archive", "use": "iconBtn", "with": { "icon": "archive", "label": "Archive", "action": "rowArchive" } },
          { "use": "iconBtn", "with": { "icon": "trash", "label": "{delLabel}", "action": "rowDelete" } },
          { "use": "iconBtn", "with": { "icon": "{readIcon}", "label": "{readLabel}", "action": "rowRead" } }
        ] }
      ]
    },

    "list.toolbar": [
      { "class": "tb-left", "c": [
        { "class": "select-box", "c": [
          { "t": "label", "class": "cell-check", "attrs": { "title": "Select" }, "c": [
            { "t": "input", "attrs": { "type": "checkbox", "aria-label": "Select all" },
              "props": { "checked": "allChecked", "indeterminate": "someChecked" }, "on": { "click": "selectAllToggle" } }
          ] },
          { "use": "iconBtn", "with": { "icon": "down", "label": "Select…", "action": "selectMenu", "cls": "narrow" } }
        ] },
        { "t": "#", "if": "!n", "c": [
          { "use": "iconBtn", "with": { "icon": "refresh", "label": "Refresh", "action": "refresh" } },
          { "use": "iconBtn", "with": { "icon": "more", "label": "More", "action": "listMore" } }
        ] },
        { "t": "#", "if": "n", "c": [
          { "if": "a.archive", "use": "iconBtn", "with": { "icon": "archive", "label": "Archive", "action": "bulkArchive" } },
          { "if": "a.spam", "use": "iconBtn", "with": { "icon": "spam", "label": "Report spam", "action": "bulkSpam" } },
          { "if": "a.trash", "use": "iconBtn", "with": { "icon": "trash", "label": "Delete", "action": "bulkTrash" } },
          { "if": "a.notSpam", "t": "button", "class": "btn text small", "on": { "click": "bulkInbox" }, "text": "Not spam" },
          { "if": "a.restore", "t": "button", "class": "btn text small", "on": { "click": "bulkInbox" }, "text": "Move to Inbox" },
          { "if": "a.forever", "t": "button", "class": "btn text small danger-text", "on": { "click": "bulkForever" }, "text": "Delete forever" },
          { "t": "span", "class": "tb-sep" },
          { "use": "iconBtn", "with": { "icon": "{readIcon}", "label": "{readLabel}", "action": "bulkRead" } },
          { "use": "iconBtn", "with": { "icon": "folder", "label": "Move to", "action": "bulkMove" } },
          { "use": "iconBtn", "with": { "icon": "more", "label": "More", "action": "bulkMore" } },
          { "t": "span", "class": "sel-count", "text": "{n} selected" }
        ] }
      ] },
      { "class": "tb-right", "c": [
        { "if": "hasList", "t": "span", "class": "range", "text": "{range}" },
        { "use": "iconBtn", "with": { "icon": "left", "label": "Newer", "action": "newer", "disabled": "{noNewer}" } },
        { "use": "iconBtn", "with": { "icon": "right", "label": "Older", "action": "older", "disabled": "{noOlder}" } }
      ] }
    ],

    "reader.view": {
      "class": "reader-view", "c": [
        { "class": "loading-bar on", "ref": "bar" },
        { "class": "toolbar", "ref": "toolbar" },
        { "class": "reader-scroll", "c": [
          { "t": "article", "class": "reader", "ref": "body", "attrs": { "aria-busy": "true" }, "c": [
            { "class": "reader-skeleton", "c": [{ "t": "span" }, { "t": "span" }, { "t": "span" }] }
          ] }
        ] }
      ]
    },

    "reader.toolbar": [
      { "class": "tb-left", "c": [
        { "use": "iconBtn", "with": { "icon": "back", "label": "Back to list", "action": "back" } },
        { "if": "a.archive", "use": "iconBtn", "with": { "icon": "archive", "label": "Archive", "action": "archive" } },
        { "if": "a.spam", "use": "iconBtn", "with": { "icon": "spam", "label": "Report spam", "action": "spam" } },
        { "if": "a.trash", "use": "iconBtn", "with": { "icon": "trash", "label": "Delete", "action": "trash" } },
        { "if": "a.notSpam", "t": "button", "class": "btn text small", "on": { "click": "toInbox" }, "text": "Not spam" },
        { "if": "a.restore", "t": "button", "class": "btn text small", "on": { "click": "toInbox" }, "text": "Move to Inbox" },
        { "if": "a.forever", "t": "button", "class": "btn text small danger-text", "on": { "click": "forever" }, "text": "Delete forever" },
        { "t": "span", "class": "tb-sep" },
        { "use": "iconBtn", "with": { "icon": "unread", "label": "Mark as unread", "action": "unread" } },
        { "use": "iconBtn", "with": { "icon": "folder", "label": "Move to", "action": "move" } },
        { "if": "hasMessage", "use": "iconBtn", "with": { "icon": "more", "label": "More", "action": "more" } }
      ] },
      { "class": "tb-right", "c": [{ "t": "#", "if": "nav", "c": [
        { "t": "span", "class": "range", "text": "{nav.pos}" },
        { "use": "iconBtn", "with": { "icon": "left", "label": "Newer", "action": "newer", "disabled": "{nav.noNewer}" } },
        { "use": "iconBtn", "with": { "icon": "right", "label": "Older", "action": "older", "disabled": "{nav.noOlder}" } }
      ] }] }
    ],

    "reader.error": { "class": "empty", "c": [{ "t": "p", "text": "{message}" }, { "t": "button", "class": "btn", "on": { "click": "back" }, "text": "Back to list" }] },

    "reader.message": [
      { "t": "header", "class": "reader-head", "c": [
        { "t": "h1", "class": "reader-subject", "text": "{subject}" },
        { "if": "chip", "t": "span", "class": "chip", "text": "{chip}" }
      ] },
      { "class": "msg", "c": [
        { "class": "msg-head", "c": [
          { "class": "avatar", "style": { "background": "{color}" }, "text": "{initial}" },
          { "class": "who", "c": [
            { "class": "who-line", "c": [{ "t": "b", "text": "{fromName}" }, { "if": "fromAddr", "t": "span", "class": "addr", "text": "<{fromAddr}>" }] },
            { "t": "button", "class": "to-line", "attrs": { "aria-expanded": "false" }, "on": { "click": "toggleDetails" },
              "c": ["{toLine}", { "icon": "down", "class": "tiny" }] }
          ] },
          { "class": "when", "attrs": { "title": "{dateLong}" }, "text": "{when}" },
          { "class": "msg-actions", "c": [
            { "t": "button", "class": "star-btn", "ref": "star", "classIf": { "on": "starred" }, "on": { "click": "toggleStar" },
              "attrs": { "title": "{starTitle}", "aria-label": "Star" }, "c": [{ "icon": "star" }] },
            { "use": "iconBtn", "with": { "icon": "reply", "label": "Reply", "action": "reply" } },
            { "use": "iconBtn", "with": { "icon": "more", "label": "More", "action": "msgMore" } }
          ] }
        ] },
        { "t": "table", "class": "msg-details", "ref": "details", "props": { "hidden": "hidden" }, "c": [
          { "each": "details", "as": "d", "t": "tr", "c": [
            { "t": "th", "text": "{d.k}" },
            { "t": "td", "c": [{ "if": "d.link", "t": "a", "attrs": { "href": "{d.link}", "target": "_blank", "rel": "noopener noreferrer" }, "text": "{d.v}", "else": "{d.v}" }] }
          ] }
        ] },
        { "if": "banner", "class": "images-banner", "ref": "banner", "c": [
          { "icon": "image" },
          { "t": "span", "text": "Images in this message are hidden to protect your privacy." },
          { "t": "button", "class": "btn text small", "on": { "click": "showImages" }, "text": "Display images" }
        ] },
        { "t": "iframe", "class": "msg-body", "ref": "frame",
          "attrs": { "title": "Message body", "sandbox": "allow-same-origin allow-popups allow-popups-to-escape-sandbox", "referrerpolicy": "no-referrer", "src": "{bodySrc}" } },
        { "if": "atts", "class": "attachments", "c": [
          { "class": "att-title", "text": "{attTitle}" },
          { "class": "att-list", "c": [{ "each": "atts", "as": "a", "use": "reader.att" }] }
        ] }
      ] },
      { "class": "reply-actions", "c": [
        { "t": "button", "class": "btn outline", "on": { "click": "reply" }, "c": [{ "icon": "reply" }, "Reply"] },
        { "if": "replyAll", "t": "button", "class": "btn outline", "on": { "click": "replyAll" }, "c": [{ "icon": "replyAll" }, "Reply all"] },
        { "t": "button", "class": "btn outline", "on": { "click": "forward" }, "c": [{ "icon": "forward" }, "Forward"] }
      ] }
    ],

    "reader.att": {
      "class": "att", "c": [
        { "t": "a", "class": "att-preview", "attrs": { "href": "{a.href}", "target": "{a.target}", "rel": "noopener", "download": "{a.download}", "title": "{a.name}" }, "c": [
          { "if": "a.img", "t": "img", "attrs": { "src": "{a.view}", "alt": "", "loading": "lazy" },
            "else": { "class": "att-icon", "c": [{ "icon": "file" }, { "t": "span", "text": "{a.ext}" }] } }
        ] },
        { "class": "att-meta", "c": [
          { "t": "span", "class": "att-name", "attrs": { "title": "{a.name}" }, "text": "{a.name}" },
          { "t": "span", "class": "att-size", "text": "{a.size|size}" },
          { "t": "a", "class": "icon-btn small", "attrs": { "href": "{a.dl}", "download": "{a.name}", "title": "Download {a.name}", "aria-label": "Download {a.name}" }, "c": [{ "icon": "download" }] }
        ] }
      ]
    },

    "compose.window": {
      "t": "section", "class": "compose", "attrs": { "role": "dialog", "aria-label": "Compose message" }, "c": [
        { "t": "header", "class": "c-head", "on": { "click": "headClick" }, "c": [
          { "t": "span", "class": "c-title", "ref": "title" },
          { "t": "span", "class": "c-status", "ref": "status", "attrs": { "aria-live": "polite" } },
          { "class": "c-head-btns", "c": [
            { "use": "iconBtn", "with": { "icon": "minimize", "label": "Minimize", "action": "minimize", "cls": "small" } },
            { "use": "iconBtn", "with": { "icon": "maximize", "label": "Full screen", "action": "maximize", "cls": "small" } },
            { "use": "iconBtn", "with": { "icon": "close", "label": "Save & close", "action": "close", "cls": "small" } }
          ] }
        ] },
        { "class": "c-body", "c": [
          { "slot": "to" }, { "slot": "cc" }, { "slot": "bcc" },
          { "class": "cf-row", "c": [{ "t": "input", "class": "cf-subject", "ref": "subject", "on": { "input": "subjectInput" },
            "attrs": { "type": "text", "placeholder": "Subject", "aria-label": "Subject", "maxlength": "900", "value": "{subject}" } }] },
          { "class": "editor-wrap", "c": [{ "class": "editor", "ref": "editor", "on": { "input": "edited", "paste": "paste" },
            "attrs": { "contenteditable": "true", "role": "textbox", "aria-multiline": "true", "aria-label": "Message body", "spellcheck": "true" } }] },
          { "class": "c-atts", "ref": "atts" }
        ] },
        { "class": "fmt-bar", "ref": "fmt", "props": { "hidden": "fmtHidden" }, "attrs": { "role": "toolbar", "aria-label": "Formatting" }, "c": [
          { "t": "button", "class": "fmt b", "attrs": { "type": "button", "title": "Bold (⌘B)" }, "on": { "click": "bold" }, "text": "B" },
          { "t": "button", "class": "fmt i", "attrs": { "type": "button", "title": "Italic (⌘I)" }, "on": { "click": "italic" }, "text": "I" },
          { "t": "button", "class": "fmt u", "attrs": { "type": "button", "title": "Underline (⌘U)" }, "on": { "click": "underline" }, "text": "U" },
          { "t": "span", "class": "tb-sep" },
          { "use": "iconBtn", "with": { "icon": "list", "label": "Bulleted list", "action": "ul" } },
          { "use": "iconBtn", "with": { "icon": "olist", "label": "Numbered list", "action": "ol" } },
          { "use": "iconBtn", "with": { "icon": "quote", "label": "Quote", "action": "quote" } },
          { "use": "iconBtn", "with": { "icon": "link", "label": "Insert link", "action": "link" } },
          { "use": "iconBtn", "with": { "icon": "clearFormat", "label": "Remove formatting", "action": "clearFormat" } }
        ] },
        { "t": "footer", "class": "c-foot", "c": [
          { "t": "button", "class": "btn primary send-btn", "attrs": { "type": "button" }, "on": { "click": "send" }, "text": "Send" },
          { "use": "iconBtn", "with": { "icon": "format", "label": "Formatting options", "action": "toggleFmt" } },
          { "use": "iconBtn", "with": { "icon": "clip", "label": "Attach files", "action": "attach" } },
          { "t": "input", "ref": "file", "attrs": { "type": "file", "multiple": true, "hidden": true }, "on": { "change": "filesPicked" } },
          { "t": "span", "class": "spacer" },
          { "use": "iconBtn", "with": { "icon": "trash", "label": "Discard draft", "action": "discard" } }
        ] }
      ]
    },

    "compose.rcpt": {
      "class": "cf-row rcpt", "c": [
        { "t": "span", "class": "cf-label", "text": "{label}" },
        { "class": "rcpt-wrap", "c": [
          { "class": "rcpt-box", "ref": "box", "on": { "click": "focus" }, "c": [
            { "t": "input", "class": "rcpt-input", "ref": "input", "on": { "input": "input", "keydown": "keydown", "blur": "blur", "paste": "paste" },
              "attrs": { "type": "text", "aria-label": "{label}", "autocomplete": "off", "spellcheck": "false" } }
          ] },
          { "class": "suggest", "ref": "sug", "attrs": { "role": "listbox" }, "props": { "hidden": "hidden" } }
        ] },
        { "if": "toggles", "t": "span", "class": "cf-toggles", "c": [
          { "t": "button", "class": "link-btn", "ref": "ccBtn", "attrs": { "type": "button", "tabindex": "-1" }, "props": { "hidden": "ccShown" }, "on": { "click": "showCc" }, "text": "Cc" },
          { "t": "button", "class": "link-btn", "ref": "bccBtn", "attrs": { "type": "button", "tabindex": "-1" }, "props": { "hidden": "bccShown" }, "on": { "click": "showBcc" }, "text": "Bcc" }
        ] }
      ]
    },

    "compose.dock": { "class": "compose-dock" },

    "compose.chip": {
      "t": "span", "class": "chip-rcpt", "classIf": { "invalid": "invalid" }, "attrs": { "title": "{title}" }, "c": [
        "{text}",
        { "t": "button", "class": "chip-x", "attrs": { "type": "button", "tabindex": "-1", "aria-label": "Remove {email}" }, "on": { "click": "remove" }, "c": [{ "icon": "close" }] }
      ]
    },

    "compose.suggest": {
      "each": "items", "as": "s", "class": "suggest-item", "classIf": { "active": "s.active" }, "attrs": { "role": "option" }, "on": { "mousedown": "pick" },
      "c": [{ "t": "b", "text": "{s.title}" }, { "if": "s.sub", "t": "span", "text": "{s.sub}" }]
    },

    "compose.att": {
      "class": "c-att", "c": [
        { "icon": "clip" },
        { "t": "span", "class": "att-name", "attrs": { "title": "{name}" }, "text": "{name}" },
        { "t": "span", "class": "att-size", "text": "({size|size})" },
        { "use": "iconBtn", "with": { "icon": "close", "label": "Remove {name}", "action": "remove", "cls": "small" } }
      ]
    },

    "dialog.settings": {
      "class": "settings", "c": [
        { "t": "label", "class": "field-label", "c": ["Your name (shown to recipients)",
          { "t": "input", "class": "input", "ref": "name", "attrs": { "type": "text", "value": "{s.name}", "maxlength": "100", "placeholder": "e.g. Jane Doe" } }] },
        { "t": "label", "class": "field-label", "c": ["Signature",
          { "t": "textarea", "class": "input", "ref": "sig", "props": { "value": "s.signature" }, "attrs": { "rows": "4", "maxlength": "2000", "placeholder": "Added to new messages" } }] },
        { "class": "row-2", "c": [
          { "t": "label", "class": "field-label", "c": ["Theme", { "t": "select", "class": "input", "ref": "theme", "c": [
            { "each": "themes", "as": "o", "t": "option", "attrs": { "value": "{o.v}" }, "props": { "selected": "o.sel" }, "text": "{o.l}" }] }] },
          { "t": "label", "class": "field-label", "c": ["Density", { "t": "select", "class": "input", "ref": "density", "c": [
            { "each": "densities", "as": "o", "t": "option", "attrs": { "value": "{o.v}" }, "props": { "selected": "o.sel" }, "text": "{o.l}" }] }] }
        ] },
        { "t": "label", "class": "check-row", "c": [
          { "t": "input", "ref": "images", "attrs": { "type": "checkbox" }, "props": { "checked": "s.showImages" } },
          { "t": "span", "c": ["Always display external images", { "t": "small", "text": "Remote images can tell senders when you open a message." }] }
        ] },
        { "t": "p", "class": "muted small", "text": "Signed in as {email}. Settings are stored in this browser." }
      ]
    },

    "dialog.shortcuts": { "t": "table", "class": "shortcuts", "c": [
      { "each": "rows", "as": "r", "t": "tr", "c": [{ "t": "td", "c": [{ "t": "kbd", "text": "{r.k}" }] }, { "t": "td", "text": "{r.v}" }] }] }
  }
}