%%[begin:notes_header]%%
<div class="container-fluid">
    <h2 class="mb-4">Case Notes for %%[number]%%</h2>
%%[end:notes_header]%%

%%[begin:notes_order]%%
    <div class="d-flex align-items-center mb-3">
        <i class="fas fa-sort me-2"></i>
        <a href="%%[base_url]%%/case.php?case_id=%%[case_id]%%&screen=act&order=%%[next_order]%%" class="text-decoration-none">
            Reverse Order of Case Notes
        </a>
    </div>
%%[end:notes_order]%%

%%[begin:flex_row]%%
    <div class="card mb-4">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <strong class="text-primary">%%[type_desc]%%</strong>
                <span>%%[user_id text source=act_user_id]%%%%[pba_id text source=act_pba_id]%%</span>
            </div>
            <div class="small text-muted mt-1">
                <span>%%[act_timestamp]%%</span>
                <span class="mx-2">|</span>
                <span>%%[hours]%% hours</span>
                <span class="mx-2">|</span>
                <a href="%%[base_url]%%/activity.php?act_id=%%[act_id]%%&screen=edit&case_id=%%[case_id]%%&act_url=%%[case_act_url]%%" 
                   class="text-decoration-none">
                    <i class="fas fa-edit me-1"></i>Edit this record
                </a>
            </div>
        </div>
        <div class="card-body">
            <div class="note-content">
                %%[summary]%%%%[notes]%%
            </div>
        </div>
    </div>
%%[end:flex_row]%%

%%[begin:notes_footer]%%
    <div class="alert alert-info mt-4">
        <p class="mb-0">
            Total of <strong>%%[hours_worked]%%</strong> %%[hours_label]%% completed on this case.
        </p>
    </div>
</div>
%%[end:notes_footer]%%