<style>
    body {
        background: #f0f0f1;
        color: #3c434a;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
        font-size: 13px;
        line-height: 1.4em;
        min-width: 600px;
    }

    h2, h3 {
        color: #1d2327;
        font-size: 1.3em;
        margin: 1em 0;
    }
    h1, h2, h3, h4, h5, h6 {
        display: block;
        font-weight: 600;
    }
        .ielts-lms-binary-selector{ margin-bottom:20px;clear: both; width: 100%;margin: 0;padding: 0;}
        .ielts-lms-binary-selector .left-selector{ width: 47%;float: left;}
        .ielts-lms-binary-selector .center-selector{width: 5%;float: left;text-align: center;margin-top: 8%;}
        .ielts-lms-binary-selector .right-selector{ width: 47%;float: left;}
        .ielts-lms-binary-selector .ielts-lms-binary-search{width: 100%;float: left;}
        .ielts-lms-binary-selector .ielts-lms-binary-selector-select{border: 1px solid #ccc;padding: 5px;width: 100%;max-width: 100%;min-height: 240px;max-height: 240px;}
        .ielts-lms-binary-selector .ielts-lms-binary-selector-select > option.ielts-lms-binary-selector-select-options {padding: 0.15em 0;width: 100%;}
        .ielts-lms-binary-selector .ielts-lms-binary-selector-buttons{ margin-bottom: -12px !important;display: block;}
        .ielts-lms-binary-selector .ielts-lms-binary-selector-table{width: 100%;}
        .ielts-lms-binary-selector option.ielts-lms-binary-selector-item-disabled {text-decoration: line-through;}
        .ielts-lms-binary-selector .right-selector option.ielts-lms-binary-selector-select-options {color: #0b66af;}
        .ielts-lms-binary-selector .right-selector option.ielts-lms-binary-selector-select-options, .ielts-lms-binary-selector .left-selector option.ielts-lms-binary-selector-select-options{cursor: pointer;}
        .ielts-lms-pagination {display: -webkit-flex;display: -ms-flexbox;display: flex;padding-left: 0;list-style: none;border-radius: 0.25rem;align-items: center;justify-content: space-around;margin-top: 14px;}
        .md-styled-btn-primary{background: #0085ba;border-color: #006a95 #00648c #00648c;box-shadow: inset 0 -1px 0 #00648c;color: #fff;text-decoration: none;text-shadow: 0 -1px 1px #005d82, 1px 0 1px #005d82, 0 1px 1px #005d82, -1px 0 1px #005d82;}
        .md-styled-btn{font-size: 13px;padding: 0 10px 1px;line-height: 26px;height: 28px;border-radius: 3px;white-space: nowrap;border-width: 1px;border-style: solid;vertical-align: top;margin: 0 0 0 3px;cursor: pointer;}
        .md-styled-btn-default{color: #555;border-color: #ccc;background: #f7f7f7;box-shadow: inset 0 -1px 0 #ccc;}
        
        .notice { display:none; }

</style>
<div class="wrap proqyz_course-access">

    <div style="display:flex;align-items:center;">
        <h2>Course access</h2>
        <button class="proqyz-sync_courses-btn page-title-action" style="top:0;margin-left:10px;height: 30px;display: flex;flex-direction: row;align-items: center;">
            Sync Courses
        </button>
    </div>

    <p>When you create a Course in ProQyz, you may want to manually add students. This section contains a list of the courses you have already created, allowing you to manage access to each course.</p>

    <table class="wp-list-table widefat fixed striped table-view-list">
        <thead>
            <tr>
                <th class="manage-column column-sr-no" style="width:100px;">
                    Sr. no.
                </th>
                <th scope="col" id="group-title" class="manage-column column-group-title column-primary">
                    Course title
                </th>
            </tr>
        </thead>
        <tbody id="the-groups-list">
        <?php 
            $courses = ST_ProQyz_Admin_Page_Course_Access::get_course_list();
            
            echo "total: ".count($courses);
            
            
            if( count($courses) > 0 ) { 
                foreach( $courses as $ckey => $course ) { ?>
                    <tr id="group-<?php echo $course->ID; ?>" class="comment even thread-even depth-1 approved">
                        <td><?php echo $ckey+1; ?></td>
                        <td class="column-group-title has-row-actions">
                            <?php echo $course->title; ?>
                            <div class="row-actions">
                                <span class="edit">
                                    <a 
                                        data-type="proqyz-course-action"
                                        data-proqyz-course-action-id="<?php echo $course->ID; ?>" 
                                        data-proqyz-course-action-type="course-access"
                                        class="edit_btn" 
                                        href="javascript:;" 
                                        aria-label="Edit course access"
                                    >
                                        Edit Course access
                                    </a>
                                </span>
                                
                            </div>
                        </td>
                    </tr>
                    <?php 
                }
            } else { ?>
                <tr class="no-items">
                    <td class="colspanchange" colspan="2">No courses found.</td>
                </tr>
            <?php }
        ?>
        </tbody>
        
        <tfoot>
            <tr>
                <th class="manage-column column-sr-no" style="width:100px;">
                    Sr. no.
                </th>
                <th scope="col" id="group-title" class="manage-column column-group-title column-primary">
                    Course title
                </th>
                
                
            </tr>
        </tfoot>
    </table>

</div>


<div class="modal fade" tabindex="-1" role="dialog" id="modal-course-access" style="z-index:999999;">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content"></div>
    </div>
</div>