<div class="card card-body">
    <form name="createclass_form">
        <div class="mb-3">
            <label class="form-check-label" for="className">Name</label>
            <input type="text" name="className" class="form-control" required />
        </div>
        <div class="mb-3">
            <label class="form-check-label" for="classDescription">Description</label>
            <textarea rows="4" name="classDescription" class="form-control" required></textarea>
        </div>
        <div class="mb-3">
            <label class="form-check-label" for="classStartDate">Start Date</label>
            <input type="date" name="classStartDate" class="form-control" required>
        </div>
        <div class="mb-3">
            <label class="form-check-label" for="classEndDate">End Date</label>
            <input type="date" name="classEndDate" class="form-control" required>
        </div>
        <div class="mb-3">
            <label class="form-check-label" for="daysOfMorningBytes">Days of Morning Bytes</label>
            <div class="alert alert-danger mb-3 error error--hidden">Please select at least one day for the Morning bytes</div>
            <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" name="0" autocomplete="off">
                    <label class="btn btn-outline-primary" for="Mon">Mon</label>
                    <input type="checkbox" class="btn-check" id="Tue" name="1" autocomplete="off">
                    <label class="btn btn-outline-primary" for="Tue" >Tue</label>
                    <input type="checkbox" class="btn-check" id="Wed" name="2" autocomplete="off">
                    <label class="btn btn-outline-primary" for="Wed">Wed</label>
                    <input type="checkbox" class="btn-check" id="Thu" name="3" autocomplete="off">
                    <label class="btn btn-outline-primary" for="Thu">Thu</label>
                    <input type="checkbox" class="btn-check" id="Fri" name="4" autocomplete="off">
                    <label class="btn btn-outline-primary" for="Fri">Fri</label>
                    <input type="checkbox" class="btn-check" id="Sat" name="5" autocomplete="off">
                    <label class="btn btn-outline-primary" for="Sat">Sat</label>
                    <input type="checkbox" class="btn-check" id="Sun" name="6" autocomplete="off">
                    <label class="btn btn-outline-primary" for="Sun">Sun</label>
                </div>
            </div>
        </div>

        <div class="d-grid gap-2">
            <button type="submit" class="btn btn-success text-center btn-block">Create Class</button>
        </div>
    </form>
</div>
