<div class="modal fade" id="modal{{bytes['_id']}}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modalfor{{bytes['_id']}}" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="{{bytes['_id'][-5:]}}label">{{bytes['className']}}</h5>
                <!-- This line under adds the X on the top right which you can click to close modal  -->
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body replaceBytes">
                <!-- This area is what information you want in the modal text area  -->
                <div class="container d-flex justify-content-center">
                    <h2> Your Morning Bytes are ready</h2>
                </div>

                <div class="card mb-3 reviewBytes" hidden=true>
                    <div class="card-header text-center"><strong>{{bytes['className']}} Review and Feedback</strong></div>
                    <div class="card-body">
                    </div>
                </div>


                <br><br><br><br><br><br>
                <div class="container d-flex justify-content-center">
                    <button type="button" class="btn btn-warning loadBytes">Load Morning Bytes</button>
                </div>
            </div>
            <div class="modal-footer" hidden='true'>
                <!-- This line under adds the close button(blue one)  -->
                <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> -->
                <button type="button" class="btn btn-primary submitBytes" byteid="{{bytes['_id']}}">Submit Answer</button>
            </div>
        </div>
    </div>
</div>