<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasActivity" aria-labelledby="offcanvasActivityLabel">
  <div class="offcanvas-header d-flex align-items-center justify-content-between">
    <h5 class="offcanvas-title" id="offcanvasActivityLabel">Activity</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <ul class="list-group list-group-flush">

      {{#each activity.entries }}
        <li class="list-group-item pt-0 pb-5 list-group-activity d-flex align-items-start">
          <div class="avatar avatar-xs me-3 flex-shrink-0">
            <picture>
              <img class="f-w-10 rounded-circle" src="{{ img }}" alt="{{ config.defaultImgAlt }}">
            </picture>
            <span class="avatar-dot bg-success"></span>
          </div>
          <div class="d-flex flex-column flex-grow-1">
            <div class="d-flex justify-content-between align-items-center mb-1">
              <p class="fw-semibold mb-0 me-3">{{ name }}</p>
              <span class="small d-block text-muted fw-bolder">{{ time }}</span>
            </div>
            <span class="small d-block text-muted">{{ activity }}</span>
            {{#if products}}
              <div class="bg-light border rounded-md p-2 mt-2 d-flex justify-content-start align-items-start">
                <picture class="me-2">
                  <img class="f-w-12 rounded" src="{{webRoot}}/assets/images/1.png"
                    alt="{{ config.defaultImgAlt }}">
                </picture>
                <picture>
                  <img class="f-w-12 rounded" src="{{webRoot}}/assets/images/3.png"
                    alt="{{ config.defaultImgAlt }}">
                </picture>
              </div>
            {{/if}}
            {{#if files}}
              <div class="bg-light border rounded-md p-2 mt-2 d-flex justify-content-start align-items-start">
                <div class="d-flex align-items-start me-3">
                  <i class="ri-file-word-line ri-2x lh-1 me-2 text-primary"></i>
                  <div>
                    <span class="d-block fw-bolder small">Year End Report</span>
                    <span class="text-muted d-block fs-xs">24KB</span>
                  </div>
                </div>
              </div>
            {{/if}}            
          </div>
        </li>
      {{/each}}

    </ul>
    <a href="#" class="btn btn-outline-secondary btn-sm text-body d-flex align-items-center justify-content-center py-3 mb-4">
      <span class="f-w-4 text-muted d-block me-2">
        <svg class="w-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
    </span>
      View All Activity
    </a>
  </div>
</div>