<div class="edge-top"></div>
<div class="edge"></div>
<div id="{{this.id}}" class="calc">
  <div class="calc-display">
    <div class="inner-calc-display">
      <foam f="history">
        <div class="history">
          {{this.data.op}} {{{this.data.a2}}}
          <% if ( this.data.op.toString() ) { %><hr><% } %>
        </div>
      </foam>
      $$row1{mode: 'read-only', escapeHTML: false}
    </div>
  </div>
  <div class="buttons button-row">
    <div class="button-column" style="flex-basis: 300%;-webkit-flex-basis: 300%">
      <div class="button-row"> $$ac $$sign $$div </div>
      <div class="button-row"> $$7 $$8 $$9 </div>
      <div class="button-row"> $$4 $$5 $$6 </div>
      <div class="button-row"> $$1 $$2 $$3 </div>
      <div class="button-row"> $$0 $$point </div>
    </div>
    <div class="button-column"> $$mult $$minus $$plus $$equals</div>
  </div>
</div>
