<section class="task-list-view" id="taskListView" hidden>
    <div class="task-list-header">
        <div>
            <div class="viewer-key" id="taskListProjectKey"></div>
            <h1 id="taskListTitle">Tasks</h1>
        </div>
    </div>

    <div class="version-task-table project-task-table" id="projectTaskTable">
        <div class="version-task-row version-task-head">
            <button type="button" data-project-task-sort="id">
                ID
                <i class="fa-solid fa-sort"></i>
            </button>
            <button type="button" data-project-task-sort="title">
                Name
                <i class="fa-solid fa-sort"></i>
            </button>
            <button type="button" data-project-task-sort="type">
                Type
                <i class="fa-solid fa-sort"></i>
            </button>
            <button type="button" data-project-task-sort="priority">
                Priority
                <i class="fa-solid fa-sort"></i>
            </button>
            <button type="button" data-project-task-sort="assignee">
                Assignee
                <i class="fa-solid fa-sort"></i>
            </button>
            <button type="button" data-project-task-sort="status">
                Status
                <i class="fa-solid fa-sort"></i>
            </button>
        </div>

        <div id="taskListContainer"></div>
    </div>
    <div class="version-task-pagination" id="projectTaskPagination"></div>
    <div class="text-secondary" id="taskListEmpty" hidden>
        No tasks found.
    </div>
</section>
