{{#*inline "extra_head"}}
<style>
table {
  grid-template-columns:  repeat({{document.num_columns}}, auto);
}
.details {
  grid-column: 1 / -1;
}
</style>
<script>
function toggleDetails(e) {
   var d = e.querySelector(".details");
   var toggled = d.classList.contains("details-visible");
   if (toggled) {
     d.classList.remove("details-visible");
   } else {
     d.classList.add("details-visible");
   }
}
</script>
{{/inline}}
{{#*inline "page"}}
{{#if user~}}
    <p>Profile for {{ user }}</p>
{{/if~}}
{{#with document ~}}
<table>
    <thead>
        {{#with headings ~}}
        {{#each columns ~}}
            <th>{{ this }}</th>
        {{/each ~}}
        {{/with ~}}
    </thead>
    <tbody>
        {{#each rows ~}}
            <tr onclick="toggleDetails(this)">
            {{#each columns ~}}
                <td>{{ this }}</td>
            {{/each ~}}
            </tr>
        {{/each ~}}
    </tbody>
</table>
{{/with~}}
{{/inline~}}
{{~> (parent)~}}