<section>
    <h4 class="divider">Tutorials</h4>
    <div class="tutorials">
        {{#each categories as |category|}}
        <div class="category" data-id="{{category.id}}">
            <h4>{{category.name}} <a class="category-toggle" data-action="markDisplay" data-tooltip={{#if category.display}}"Hide read tutorials."{{else}}"Display read tutorials."{{/if}}><i class="fa-solid fa-eye{{#unless category.display}}-low-vision{{/unless}} fa-xs"></i></a></h4>
            {{#each category.tutorials as |tutorial|}}
            <div class="tutorial{{#if tutorial.hidden}} hidden{{/if}}" data-uuid="{{tutorial.uuid}}" data-action="openTutorial">
                <span class="name">{{tutorial.name}}</span>
                <a class="hide{{#if tutorial.read}} read{{/if}}" data-action="markRead" data-tooltip={{#if tutorial.read}}"Mark as not read."{{else}}"Mark as read."{{/if}}><i class="fa-solid fa-eye{{#if tutorial.read}}-low-vision{{/if}}"></i></a>
            </div>
            {{/each}}
        </div>
        {{/each}}
    </div>
</section>