template TopSearches(Person person, var searches) {
  css {
    .metrics-item {
      font-family: arial;
      background-color: lightgray;
      margin-left: 10px;
      border-bottom: 1px solid white;
    }
    .total-hits {
      position: absolute;
      left: 100px;
    }
  }
  <div>
    ${#with person}
      <div>
        <span>${name},&nbsp;</span>
        <span>age&nbsp;=&nbsp;</span>
        <span>${age}</span>
      </div>
      <div>
        ${#each searches search}
          <div>query=${search.query},&nbsp;rank=${search.rank},&nbsp;total=${search.total}</div>
          ${#each search.metrics metric}
            <div class="metrics-item">
              <span>${metric.country}</span>
              <span class="total-hits">${metric.quantity}</span>
            </div>
          ${/each}
        ${/each}
      </div>
    ${/with}
  </div>
}

template NameEntry(String name, int age) {
  css {
    .name-item {
      font-size: 18pt;
      font-weight: bold;
    }
  }
  <div var=topDiv class="name-item" attr="test" attr1=test1 attr2='test2' attr3=test3>
    <span var=spanElem>${name}</span>
    <span> - </span>
    <span>${age}</span>
  </div>
}