<templates>
  <div t-name="App" class="main">
      <div class="left-thing">
        <div class="title">Actions</div>
        <div class="panel">
          <button t-on-click="addMessages(100)">Add 100 messages</button>
          <button t-on-click="addMessages(1000)">Add 1k messages</button>
          <button t-on-click="addMessages(10000)">Add 10k messages</button>
          <button t-on-click="addMessages(30000)">Add 30k messages</button>
          <button t-on-click="updateSomeMessages">Update every 10th messages</button>
          <button t-on-click="clear">Clear</button>
        </div>
        <div class="flags">
            <div>
                <input type="checkbox" id="multipleflag" t-on-change="toggleMultiple" t-att-checked="state.multipleFlag"/>
                <label for="multipleflag">Do it 20x</label>
            </div>
            <div>
                <input type="checkbox" id="clearFlag" t-on-change="toggleClear"  t-att-checked="state.clearAfterFlag"/>
                <label for="clearFlag">Clear after</label>
            </div>
        </div>
        <div class="info">Number of messages: <t t-esc="state.messages.length"/></div>
        <hr/>
        <div class="title">Log <span class="clear-log" t-on-click="clearLog">(clear)</span></div>
        <div class="log">
            <div class="log-content" t-ref="'log'"/>
        </div>
      </div>
      <div class="right-thing">
          <div class="content" t-on-remove-message="removeMessage">
              <t t-foreach="state.messages" t-as="message">
                  <t t-widget="Message" t-key="message.id" t-props="message" t-on-remove_message="removeMessage"/>
              </t>
          </div>
      </div>
  </div>

  <div t-name="Message" class="message">
    <span class="author"><t t-esc="props.author"/></span>
    <span class="msg"><t t-esc="props.msg"/></span>
    <button class="remove" t-on-click="removeMessage">Remove</button>
    <t t-widget="Counter"/>
  </div>

  <div t-name="Counter">
    <button t-on-click="increment">Value: <t t-esc="state.counter"/></button>
  </div>

</templates>