<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>

<style>
    .highlight {
        padding: 20px;
        background-color: #f8f9fa;
    }
</style>

<table class="table table-responsive">
    {{#list}}
    <tr id="{{id}}">
        <td>{{id}}</td>
        <td>{{key}}</td>
        <td>{{type}}</td>
        <td>{{format}}</td>
        <td>{{created_at}}</td>
    </tr>
    {{/list}}
</table>

<pre>
    <code id="canvas" class="language-json"></code>
</pre>

<script>
    // https://highlightjs.org/download/
    // https://www.tutorialspoint.com/how-to-format-json-string-in-javascript
    $('tr').on('click', function (e) {
        let id = $(this).attr('id');
        fetch("/cache/" + id)
            .then(response => response.json())
            .then(function (data) {
                $('#canvas').html(JSON.stringify(data, null, 4));
                hljs.highlightAll();
            });
    });
</script>