<div class="right_col mt-sm-3" role="main">
  <!-- page content starts-->
  <div class="row main_row">
    <div class="x_panel form_panel">
      <div class="x_title">
        <h2 class="title-text">Edit Class</h2>
      </div>
      <div class="x_content">
        <form id="updateProgram" action="/programs/update" method="post" class="form-horizontal form-label-left">
          <input type="hidden" name="program_id" value="<%=program.id %>">
          <div class="row">
            <div class="col-md-6 col-lg-6 col-xl-4">
              <div class="form-group">
                <label class="col-form-label label-align" for="program">Class Name<span class="required">*</span>
                </label>
                <div class="input-group">
                  <span class="input-group-text"><img src="/images/assessment.svg" class="mCS_img_loaded"></span>
                  <input type="text" name="name" class="form-control" id="program_name" placeholder="Class Name"
                    value="<%=program.name %>" maxlength="200">
                </div>
              </div>
            </div>  
          </div>
          <div class="row">
            <div class="col-md-12 mt-4">
              <h2 class="title-text fn-16">Select Content For Class</h2>
            </div>
            <div class="content_form w-100">  
              <div class="col-md-4">
                <div class="form-group">
                  <label class="col-form-label label-align" for="class_select">Grade <span class="required">*</span>
                  </label>
                  <div class="input-group">
                    <span class="input-group-text"><img src="/images/classes.svg" class="mCS_img_loaded"></span>
                    <select class="form-control select2 filter-content" id="sc_grade" tabindex="-1" single>
                      <option value="">Select Grade</option>
                      <% for(grade of grades) { %>
                        <option value="<%=grade.id%>">
                          <%=grade.name%>
                        </option>
                        <% } %>
                    </select>
                  </div>
                </div>
              </div>       
              <div class="col-md-4">
                <div class="form-group">
                  <label class="col-form-label label-align" for="class_select">Topic <span class="required">*</span>
                  </label>
                  <div class="input-group">
                    <span class="input-group-text"><img src="/images/classes.svg" class="mCS_img_loaded"></span>
                    <select class="form-control select2 filter-content" id="sc_topic" tabindex="-1" single>
                      <option value="">Select Topic</option>
                      <% for(topic of topics) { %>
                        <option value="<%=topic.id%>">
                          <%=topic.name%>
                        </option>
                        <% } %>
                    </select>
                  </div>
                </div>
              </div>      
              <div class="col-md-4">
                <div class="form-group">
                  <label class="col-form-label label-align" for="class_select">Sub Topic</label>
                  <div class="input-group">
                    <span class="input-group-text"><img src="/images/classes.svg" class="mCS_img_loaded"></span>
                    <select class="form-control select2 filter-content" id="sc_sub_topic" tabindex="-1" single>
                      <option value="">Select Sub Topic</option>
                    </select>
                  </div>
                </div>
              </div>  
              <div class="col-md-4">
                <div class="form-group">
                  <label class="col-form-label label-align" for="select_learning">Learning Content <span
                      class="required">*</span>
                  </label>
                  <div class="input-group">
                    <span class="input-group-text"><img src="/images/courses.svg" class="mCS_img_loaded"></span>
                    <select class="form-control select2" id="learning_content" tabindex="-1" single>
                      <option value="">Select Learning Content</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label class="col-form-label label-align" for="select_lesson">Lesson <span class="required">*</span>
                  </label>
                  <div class="input-group select2-Hequal">
                    <span class="input-group-text"><img src="/images/courses.svg" class="mCS_img_loaded"></span>
                    <select class="form-control select2" data-placeholder="Select Lessons"
                      id="lessons" tabindex="-1" multiple>
                      <option value="">Select Lessons</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="col-md-4">
                <label class="d-block">&nbsp;</span>
                </label>
                <button type="button" class="content-submit theme-btn" id="add_content">Add Content</button>
              </div>
            </div>
          </div>
          
          <div class="row">
            <div class="col-md-12 mt-4">
              <h2 class="title-text fn-16">Class Content</h2>
            </div>
            <div class="col-sm-12">
              <ul class="selectedcontent program-sortable" id="select-assessment">
                <% if(program.ex_content.length > 0) { 
                    let contentIndex = 0;
                   %>
                  <% for(content of program.ex_content) { %>
                <li class="sort-program" data-content-position="<%=contentIndex%>">
                  <div class="iconleft"><img src="/images/practice1.svg" alt="img"></div><div class="content-detail-block"><ol class="breadcrumb"><li class="breadcrumb-item 5">
                    <%=content.learning_content_id.grade_id.name %>
                  </li>
                <li class="breadcrumb-item 1">
                  <%=content.learning_content_id.topic_id.name %>
                </li>
                <li class="breadcrumb-item 1">
                  <%=content.learning_content_id.title %>
                </li>
                <% if(content.learning_content_id.sub_topic_id !== null) { %>
                <li class="breadcrumb-item 2"><%=content.learning_content_id.sub_topic_id.name %></li>
                <% } %>

                <li class="breadcrumb-item 3 lesson-items" data-id="<%=content.lesson_id._id%>"><%=content.lesson_id.title %></li>
                <% if(content.learning_type === 'slide') { 
                   for(slide of content.lesson_id.slide_ids) { %>
                   <% if(slide.id == content.learning_id) { %> 
                  <li class="breadcrumb-item 4"><%=slide.title%></li>
                  <% } %>
               <% } } %>

               <% if(content.learning_type === 'practice') { 
                for(practice of content.lesson_id.practice_ids) { %>
                <% if(practice.id == content.learning_id) { %> 
               <li class="breadcrumb-item 4"><%=practice.question_title %></li>
             <% } %>
            <% } } %>

              
              </ol>
              </div>
              <div class="action-right">
                <a class="remove_content" href="javascript:void(0);">×</a>
              </div><input type="hidden" name="selected_contents[]" value="<%=content.learning_content_id._id%>--<%=content.lesson_id._id%>"></li>
           
              <% } } %>
            </ul>
            </div>
          </div>

          <div class="ln_solid"></div>
          <div class="text-right">
            <button type="submit" id="updateProgramBtn" class="btn theme-btn">Save</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- page title end -->
</div>

<script  src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

  <%- include('./partials/edit_script'); %>