<div class="modal fade" id="internalUserModal" tabindex="-1" role="dialog" aria-labelledby="internalUserModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <div class="close modal-close float-right mt-n4" data-dismiss="modal" aria-label="Close"> <i class="fas fa-times icon-sm"></i> </div> <h4 class="modal-title" id="ccModalLabel">Choose Recipients</h4> </div> <div class="modal-body"> <p style="text-align: left;">Select one or more users</p> <table class="table data-table" data-buttons="false" data-dom="foo" data-order='[[ 1, "asc" ]]'> <thead> <tr> <th></th> <th>Email</th> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> {% for user in internalUsers %} <tr> <td> <button style="height: 1.5rem; padding-left: 0; padding-right: 0;" class="btn btn-sm add-internal-email" data-email={{ user.email }}>Add</button> </td> <td> <label for="internal_user_{{ user.id }}">{{ user.email }}</label> </td> <td> <label for="internal_user_{{ user.id }}">{{ user.firstName }}</label> </td> <td> <label for="internal_user_{{ user.id }}">{{ user.lastName }}</label> </td> </tr> {% endfor %} </tbody> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div></div>