<!-- Modal -->
<div id="helpModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Help</h4>
      </div>
      <div class="modal-body">
        <div class="panel-group" id="accordion">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a role="button" href="#collapseIcons" data-toggle="collapse" data-parent="#accordion">Icon reference</a>
              </h4>
            </div>
            <div id="collapseIcons" class="panel-collapse collapse">
              <div class="panel-body">
                <ul class="list-group">
                <li class="list-group-item"><i class="fa-solid fa-plus fa-lg"></i> Add</li>
                <li class="list-group-item"><i class="fa-solid fa-pencil-alt fa-lg"></i> Change</li>
                <li class="list-group-item"><i class="fa-solid fa-file-o fa-lg"></i> Report. </li>
                <li class="list-group-item"><i class="fa-solid fa-files-o fa-lg"></i> Reports.</li>
                <li class="list-group-item"><i class="fa-solid fa-history fa-lg"></i> Report history.</li>
                <li class="list-group-item"><i class="fa-solid fa-user-circle fa-lg"></i> Subject</li>
                <li class="list-group-item"><i class="fa-solid fa-male fa-lg"></i> Male</li>
                <li class="list-group-item"><i class="fa-solid fa-female fa-lg"></i> Female</li>
                <li class="list-group-item"><i class="fa-solid fa-search fa-lg"></i> Search</li>
                <li class="list-group-item"><i class="fa-solid fa-undo fa-lg"></i> Undo a search</li>
                <li class="list-group-item"><i class="fa-solid fa-filter fa-lg"></i> Filter a list</li>
                <li class="list-group-item"><i class="fa-solid fa-star fa-lg"></i> Complete</li>
                <li class="list-group-item"><i class="fa-solid fa-star-half-o fa-lg"></i> Incomplete</li>
                <li class="list-group-item"><i class="fa-solid fa-star fa-lg"></i> New</li>
                <li class="list-group-item"><i class="fa-solid fa-spinner fa-lg"></i> In progress</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
