How to use the lit-html/lib/repeat.js.repeat function in lit-html

${repeat(Object.keys(_cards), kind =>
        html`
        <div class="column">
          <h3>${kind}</h3>
          <div class="list">
            ${repeat(Object.keys(_cards[kind]), entry =&gt; html`
              <div>
                <div title="${_cards[kind][entry].jp}" class="jp ellipsis">${_cards[kind][entry].jp}</div>
                <div title="${_cards[kind][entry].en}" class="en ellipsis">${_cards[kind][entry].en}</div>
              </div>
            `)}
          </div>
        </div>
        `
      )}

export default (value, teams = []) => html`
<div class="select full-width">
    <select role="select-team">
        <option value="-1">Select...</option>
        ${repeat(teams, (team) =&gt; html`<option value="${team}">${team}</option>`)}
    </select>
    <i class="fa fa-angle-down fa-2"></i>
</div>
`

a-card, #settings {
        box-sizing: border-box;
        max-width: 400px;
        width: 100%;
      }
      h4 {
        line-height: 1;
      }
      

      <div id="settings">
        
        

        <h4>Pick from</h4>
        ${repeat(Object.keys(_cards), kind =&gt;
          kind &amp;&amp;
          html`
            
          `

        )}

        <h4>Ask me...</h4>
        
        <br>
        
        <br></div>

export default data => {
  const teams = extractTeams(data)

  const table = html`
  
      ${repeat(data, user => createRow(user, teams))}
    <table>
    <thead>
        <tr>
            <th>Photo</th>
            <th>Name</th>
            <th>Email</th>
            <th>Team</th>
        </tr>
    </thead>
    <tbody></tbody>
  </table>
  `
  return table
}

export default data => {
  const teamData = extractTeamData(data)

  const dashboard = html`
    <div>
      ${repeat(Object.keys(teamData), teamName =&gt; createTeamWidget(teamName, teamData[teamName]))}
    </div>
  `

  return dashboard
}

font-size: 20px;
          font-weight: bold;
        }
        .en {
          font-size: 12px;
          font-weight: normal;
        }
        .ellipsis {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      

      <div class="columns">
      ${repeat(Object.keys(_cards), kind =&gt;
        html`
        <div class="column">
          <h3>${kind}</h3>
          <div class="list">
            ${repeat(Object.keys(_cards[kind]), entry =&gt; html`
              <div>
                <div title="${_cards[kind][entry].jp}" class="jp ellipsis">${_cards[kind][entry].jp}</div>
                <div title="${_cards[kind][entry].en}" class="en ellipsis">${_cards[kind][entry].en}</div>
              </div>
            `)}
          </div>
        </div>
        `
      )}
      </div>
    `;