```{=html}
<table class="quarto-listing-table table">
    <thead>
        <td class="listing-type" style="max-width: 42px !important; text-align: center;">Type</td>
        <td class="listing-type" style="max-width: 42px !important; text-align: center;">Link</td>
        <td>Resource</td>
    </thead>
    <tbody class="list">
    <% for (const item of items) { %>
        <tr data-index="0" data-categories="null" <%= metadataAttrs(item) %>>     
            <td class="listing-type" style="max-width: 42px !important; text-align: center;">
                <strong><% if (item.type == "youtube") { %> <span class="bi bi-youtube"></span> <% } %> 
                <strong><% if (item.type == "book") { %> <span class="bi bi-book"></span> <% } %> 
                <strong><% if (item.type == "course") { %> <span class="bi bi-journal-bookmark"></span> <% } %> 
                <strong><% if (item.type == "MOC") { %> <span class="bi bi-map"></span> <% } %> 
                <strong><% if (item.type == "other") { %> <span class="bi bi-stars"></span> <% } %> 
                <strong><% if (item.type == "essay") { %> <span class="bi bi-card-text"></span> <% } %> 
                <strong><% if (item.type == "software") { %> <span class="bi bi-code-square"></span> <% } %> 
            </td>
            <td class="listing-link" style="max-width: 42px !important; text-align: center;">
                <% if (item.link) { %>
                    <a href="<%= item.link %>"><span class="bi bi-link-45deg"></span></a>
                <% } %>
            </td>
            <td class="listing-title" style="max-width: 420px !important;">
                <strong><% if (item.slno) { %><%= item.slno %>.<% } %> <%= item.title %></strong><br>
                <p><%= item.summary %></p>
            </td>
        </tr>
    <% } %>
</tbody>
</table>

```
