owl/tools/playground/templates.xml

<templates>
  <div t-name="TabbedEditor" class="tabbed-editor">
    <div class="tabBar" t-att-class="{resizeable: props.resizeable}" t-on-mousedown="onMouseDown">
        <t t-foreach="['js', 'xml', 'css']" t-as="tab">
            <a t-ref="{{tab}}" t-if="props[tab] !== false" t-key="tab" class="tab flash" t-att-class="{active: state.currentTab===tab}" t-on-click="setTab(tab)">
                <t t-esc="tab"/>
            </a>
        </t>
    </div>
    <div class="code-editor" t-ref="editor"></div>
  </div>

  <div t-name="App" class="playground">
      <div class="left-bar" t-att-class="{split: state.splitLayout}"
           t-att-style="leftPaneStyle"
           t-on-updateCode="updateCode">
        <div class="menubar">
          <a class="btn run-code flash" t-on-click="runCode" title="Execute this Code">▶ Run</a>
          <select t-on-change="setSample">
            <option t-foreach="SAMPLES" t-as="sample" t-key="sample_index">
              <t t-esc="sample.description"/>
            </option>
          </select>
          <a class="btn flash" t-on-click="downloadCode" title="Download a Zip with this Code"><i class="fas fa-download"></i></a>
          <a class="layout-selector flash" t-on-click="toggleLayout" title="Toggle Layout"><i class="fas"  t-att-class="state.splitLayout ?  'fa-toggle-on' : 'fa-toggle-off'"></i></a>
        </div>
        <TabbedEditor
            js="state.js"
            css="!state.splitLayout and state.css"
            xml="!state.splitLayout and state.xml"
            t-att-style="topEditorStyle"/>
        <t t-if="state.splitLayout">
          <div class="separator horizontal"/>
          <TabbedEditor
             js="false"
             css="state.css"
             xml="state.xml"
             resizeable="true"
             t-on-updatePanelHeight="updatePanelHeight"/>
        </t>
      </div>
      <div class="separator vertical" t-on-mousedown="onMouseDown"/>
      <div class="right-pane"  t-att-style="rightPaneStyle">
        <div class="welcome" t-if="state.displayWelcome">
          <div>🦉 Odoo Web Library 🦉</div>
          <div>v<t t-esc="version"/></div>
          <div class="url"><a href="https://github.com/odoo/owl">https://github.com/odoo/owl</a></div>
          <div class="note">
            <p>Note: these examples are using recent features of Javascript, and require a recent browser to work without a transpilation step!
              For example, it makes use of class fields and class static fields. These examples should work in a recent Chrome version.
            </p>
          </div>
        </div>
        <div class="content" t-ref="content"/>
      </div>
  </div>
</templates>