<div class="modal fade professor_modal" id="modal{{class_['_id']}}" data-bs-keyboard="true" tabindex="-1" aria-labelledby="modalfor{{class_['_id']}}" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="{{class_['_id'][-5:]}}label">{{class_['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">
                <!-- This area is what information you want in the modal text area  -->
                <div class="row container d-flex justify-content-center">
                    <h2> Here you can edit this class</h2>
                    <p class="card-text text-center"><strong> Start Date: </strong>{{class_['classStartDate']}}  <strong> End Date: </strong>{{class_['classEndDate']}}</p>
                    <!-- <p class="card-text text-center"><strong>Actuall info I have {{class_}}</strong></p> -->
                </div>
                <br>
                <form name="edit_class">
                    <label class="form-check-label" for="daysOfMorningBytes">Edit Days of Morning Bytes</label>
                    <div class="row d-flex flex-wrap">
                        <div class="btn-group btn-group-sm d-flex flex-wrap" role="group" aria-label="Button test">
                            <input type="checkbox" class="btn-check" id="Mon{{class_['_id']}}" name="0" autocomplete="off" {{class_['MBytesDays'][0]}}>
                            <label class="btn btn-outline-primary" for="Mon{{class_['_id']}}">Mon</label>
                            <input type="checkbox" class="btn-check" id="Tue{{class_['_id']}}" name="1" autocomplete="off" {{class_["MBytesDays"][1]}}>
                            <label class="btn btn-outline-primary" for="Tue{{class_['_id']}}" >Tue</label>
                            <input type="checkbox" class="btn-check" id="Wed{{class_['_id']}}" name="2" autocomplete="off" {{class_['MBytesDays'][2]}}>
                            <label class="btn btn-outline-primary" for="Wed{{class_['_id']}}">Wed</label>
                            <input type="checkbox" class="btn-check" id="Thu{{class_['_id']}}" name="3" autocomplete="off" {{class_['MBytesDays'][3]}}>
                            <label class="btn btn-outline-primary" for="Thu{{class_['_id']}}">Thu</label>
                            <input type="checkbox" class="btn-check" id="Fri{{class_['_id']}}" name="4" autocomplete="off" {{class_['MBytesDays'][4]}}>
                            <label class="btn btn-outline-primary" for="Fri{{class_['_id']}}">Fri</label>
                            <input type="checkbox" class="btn-check" id="Sat{{class_['_id']}}" name="5" autocomplete="off" {{class_['MBytesDays'][5]}}>
                            <label class="btn btn-outline-primary" for="Sat{{class_['_id']}}">Sat</label>
                            <input type="checkbox" class="btn-check" id="Sun{{class_['_id']}}" name="6" autocomplete="off" {{class_['MBytesDays'][6]}}>
                            <label class="btn btn-outline-primary" for="Sun{{class_['_id']}}">Sun</label>
                        </div>
                    </div>
                    <br>
                    <label class="form-check-label" for="qbankName">QuestionBank Name</label>
                    <select class="form-select" name='questionBank' aria-label="questionBank selector">
                        {% if 'selected_qb' not in class_%}
                            <option selected value="-1">None currently selected</option>
                        {%endif%}
                        {% for qb in qbs %}
                            {%if class_['selected_qb'] == qb['_id'] %}
                                <option selected value="{{qb['_id']}}">{{qb['qbankName']}} (Current)</option>    
                            {%else%}
                            <option value="{{qb['_id']}}">{{qb['qbankName']}}</option>
                            {%endif%}
                        {%endfor%}
                    </select>
                    <div class="alert alert-danger mb-3 error error--hidden">Invalid Changes</div>            </div>
            <div class="modal-footer justify-content-between">
                <!-- This line under adds the close button(blue one)  -->

                <button class="btn btn-danger removeClass" class_id="{{class_['_id']}}" >Delete Class</button>
                <button type="submit" class="btn btn-primary updateClass" id="{{class_['_id']}}">Save Changes</button>
            </div>
            </form>
        </div>
    </div>
</div>