<div class="firstcont">
  <button class="btn btn-outline-primary back_btn"> back </button>

  <a class="mt-1"><span class="arw-btn"><i class="fa fa-arrow-left" size="28" aria-hidden="true"></i></span></a>

  <h3><b>Course Creator Wizard</b></h3>



  <p class="head-line">Let's get started with few of what your course is about</p>


  <hr>

  <div class="container">
    <div class="d-flex row">
      <div class="col-xl-2 col-4-lg col-md-4">
        <div class="nav flex-column nav-tabs nav_style" id="v-tabs-tab" role="tablist" aria-orientation="vertical">

          <a class="nav-link base active" id="v-tabs-general-tab" data-toggle="tab" href="#v-tabs-general" role="tab"
            aria-controls="v-tabs-general" aria-selected="true"><span>1</span>General Details</a>


          <a class="nav-link base" id="v-tabs-format-tab" data-toggle="tab" href="#v-tabs-format" role="tab"
            aria-controls="v-tabs-format" aria-selected="false"><span>2</span>Format</a>


          <a class="nav-link base" id="v-tabs-group-tab" data-toggle="tab" href="#v-tabs-group" role="tab"
            aria-controls="v-tabs-group" aria-selected="false"><span>3</span>Group and Role</a>


          <a class="nav-link base" id="v-tabs-agreement-tab" data-toggle="tab" href="#v-tabs-agreement" role="tab"
            aria-controls="v-tabs-agreement" aria-selected="false"><span>4</span>Agreement</a>
        </div>
      </div>

      <div class="col-xl-10 col-8-lg col-md-8 ">
        <div class="tab-content" id="v-tabs-tabContent">
          <div class="tab-pane fade show active" id="v-tabs-general" role="tabpanel"
            aria-labelledby="v-tabs-general-tab">
            <h3>Instructor/ Guide</h3>
            <form>
              <div class="form-group base_form">
                <select class=" form-control form-control-lg custom_selector" id="custom_id">
                  <option selected>Assign a Instructor/Guide</option>
                  <option>Instructor/ Guide Name</option>
                  <option>Instructor/ Guide Name</option>
                  <option>Instructor/ Guide Name</option>
                  <option>Instructor/ Guide Name</option>
                </select>
                <label class="label_style">Format Lab</label>
              </div>

              <h3>General</h3>
              <div class="form-group base_form">
                <input type="text" id="text" name="general_text" placeholder="Enter Texts" class="custom_selector">
                <label class="label_style">Course Full Name</label>
              </div>
              <div class="form-group base_form">
                <input type="text" id="text" name="general_text" placeholder="Enter Texts" class="custom_selector">
                <label class="label_style">Course Short Name</label>
              </div>

              <div class="form-group base_form">
                <select class=" form-control form-control-lg custom_selector" id="custom_id">
                  <option selected>Select Category</option>
                  <option>tags</option>
                  <option>element</option>
                  <option>class</option>
                  <option>things</option>
                </select>
                <label class="label_style">Course Category</label>
              </div>

              <div class="form-group base_form">
                <select class=" form-control form-control-lg custom_selector" id="custom_id">
                  <option selected>Select Sub Category</option>
                  <option>tags</option>
                  <option>element</option>
                  <option>class</option>
                  <option>things</option>
                </select>
                <label class="label_style">Course Sub Category</label>
              </div>

              <div class="form-group base_form">
                <select class=" form-control form-control-lg custom_selector" id="custom_id">
                  <option selected>Course Visibility</option>
                  <option>tags</option>
                  <option>element</option>
                  <option>class</option>
                  <option>things</option>
                </select>
                <label class="label_style">Course Visibility</label>
              </div>

              <div class="row form-group base_form">
                <div class="col-md-6">
                  <input type="date" id="text" name="general_text" placeholder="Start Date" class="custom_selector">
                  <label class="label_style">Course Start Date</label>
                </div>
                <div class="col-md-6">
                  <input type="date" id="text" name="general_text" placeholder="End Date" class="custom_selector">
                  <label class="label_style">Course Start Date</label>
                </div>
              </div>

              <div class="form-group base_form">
                <input type="text" id="text" name="general_text" placeholder="Enter Number" class="custom_selector">
                <label class="label_style">Course ID Number</label>
              </div>

              <div>
                <h3>Description</h3>
                <div class="form-group base_form">
                  <textarea id="bio" name="user_bio" rows="4" class="col-sm-12"></textarea>
                  <label class="label_style">Course Summary</label>
                </div>
              </div>

              <div>
                <h3>Course Image</h3>
                <div class="form-group base_form">
                  <div>Upload Image here</div>
                </div>
              </div>

              <hr>


              <button class="btn btn-outline-primary save_btn" type="submit">Save and Proceed <a class="mt-1"><span
                    class="angl-btn"><i class="fa fa-angle-right" size="28" aria-hidden="true"></i></span></a></button>

              <button class="btn btn-outline-primary save_btn" type="submit">Sava as draft</button>
            </form>
          </div>


          <div class="tab-pane fade" id="v-tabs-format" role="tabpanel" aria-labelledby="v-tabs-format-tab">
            <h3>Format</h3>
            <form class="cust_form">
              {{! select Category }}
              <div class="form-group base_form">
                <select class=" form-control form-control-lg custom_selector" id="custom_id">
                  <option selected>Select Category</option>
                  <option>tags</option>
                  <option>element</option>
                  <option>class</option>
                  <option>things</option>
                </select>
                <label class="label_style">Format Lab</label>
              </div>

              {{! select visibility }}
              <div class="form-group base_form">
                <select class=" form-control form-control-lg custom_selector" id="custom_id">
                  <option selected>Select Visibility</option>
                  <option>tags</option>
                  <option>element</option>
                  <option>class</option>
                  <option>things</option>
                </select>
                <label class="label_style">Hidden Selections</label>
              </div>
              {{! select layout }}
              <div class="form-group base_form">
                <select class=" form-control form-control-lg custom_selector" id="custom_id">
                  <option selected>Course layout</option>
                  <option>tags</option>
                  <option>element</option>
                  <option>class</option>
                  <option>things</option>
                </select>
                <label class="label_style">Select layout</label>
              </div>
              <h3 class="cust_tag">Appearance</h3>
              {{! select Category }}
              <div class="form-group base_form">
                <select class=" form-control form-control-lg custom_selector" id="custom_id">
                  <option selected>Select Category</option>
                  <option>tags</option>
                  <option>element</option>
                  <option>class</option>
                  <option>things</option>
                </select>
                <label class="label_style">Force language</label>
              </div>

              {{! select number }}
              <div class="form-group base_form">
                <select class=" form-control form-control-lg custom_selector" id="custom_id">
                  <option selected>Select Number</option>
                  <option>tags</option>
                  <option>element</option>
                  <option>class</option>
                  <option>things</option>
                </select>
                <label class="label_style">Number of announcements</label>
              </div>
              {{! select option }}
              <div class="form-group base_form">
                <select class=" form-control form-control-lg custom_selector" id="custom_id">
                  <option selected>Select option</option>
                  <option>tags</option>
                  <option>element</option>
                  <option>class</option>
                  <option>things</option>
                </select>
                <label class="label_style">Show grid book to students</label>
              </div>


              {{! select option }}
              <div class="form-group base_form">
                <select class=" form-control form-control-lg custom_selector" id="custom_id">
                  <option selected>Select option</option>
                  <option>tags</option>
                  <option>element</option>
                  <option>class</option>
                  <option>things</option>
                </select>
                <label class="label_style">Show activity reports</label>
              </div>
              <h3 class="cust_tag">Files & uploads</h3>

              {{! select size limit }}
              <div class="form-group base_form">
                <select class=" form-control form-control-lg custom_selector" id="custom_id">
                  <option selected>Select size limit</option>
                  <option>tags</option>
                  <option>element</option>
                  <option>class</option>
                  <option>things</option>
                </select>
                <label class="label_style">Maximum upload size</label>
              </div>

              <h3 class="cust_tag">Files & uploads</h3>

              {{! Completion tracking }}
              <div class="form-group base_form">
                <select class=" form-control form-control-lg custom_selector" id="custom_id">
                  <option selected>Select option</option>
                  <option>tags</option>
                  <option>element</option>
                  <option>class</option>
                  <option>things</option>
                </select>
                <label class="label_style">Enable complete tracking</label>
              </div>
              <hr>

            
              <button class="btn btn-outline-primary save_btn" type="submit">Save and Proceed
             <span
                    class="angl-btn"><i class="fa fa-angle-right" size="28" aria-hidden="true"></i></span></a></button>

              <button class="btn btn-outline-primary save_btn" type="submit">Sava as draft</button>
            </form>
          </div>


          <div class="tab-pane fade" id="v-tabs-group" role="tabpanel" aria-labelledby="v-tabs-group-tab">
            <h3>Groups</h3>
            <form>
              <div class="form-group base_form">
                <select class=" form-control form-control-lg custom_selector" id="custom_id">
                  <option selected>Select Mode</option>
                  <option>Select Mode</option>
                  <option>Select Mode</option>
                  <option>Select Mode</option>
                  <option>Select Mode</option>
                </select>
                <label class="label_style">Group Mode</label>
              </div>

              <div class="form-group base_form">
                <select class=" form-control form-control-lg custom_selector" id="custom_id">
                  <option selected>Select Mode</option>
                  <option>Select Mode</option>
                  <option>Select Mode</option>
                  <option>Select Mode</option>
                  <option>Select Mode</option>
                </select>
                <label class="label_style">Force Group Mode</label>
              </div>

              <div class="form-group base_form">
                <select class=" form-control form-control-lg custom_selector" id="custom_id">
                  <option selected>Select Mode</option>
                  <option>Select Mode</option>
                  <option>Select Mode</option>
                  <option>Select Mode</option>
                  <option>Select Mode</option>
                </select>
                <label class="label_style">Default Grouping</label>
              </div>

              <h3>Role Renaming</h3>
              <div class="form-group base_form">
                <input type="text" id="text" name="general_text" placeholder="Enter Texts" class="custom_selector">
                <label class="label_style">Your word for Manager</label>
              </div>
              <div class="form-group base_form">
                <input type="text" id="text" name="general_text" placeholder="Enter Texts" class="custom_selector">
                <label class="label_style">Your word for Course Creator</label>
              </div>
              
              <div class="form-group base_form">
                <input type="text" id="text" name="general_text" placeholder="Enter Number" class="custom_selector">
                <label class="label_style">Your word for Teacher</label>
              </div>
              <div class="form-group base_form">
                <input type="text" id="text" name="general_text" placeholder="Enter Number" class="custom_selector">
                <label class="label_style">Your word for Non editing Teacher</label>
              </div>
              <div class="form-group base_form">
                <input type="text" id="text" name="general_text" placeholder="Enter Number" class="custom_selector">
                <label class="label_style">Your word for Student</label>
              </div>
              <div class="form-group base_form">
                <input type="text" id="text" name="general_text" placeholder="Enter Number" class="custom_selector">
                <label class="label_style">Your word for Guest</label>
              </div>
              <div class="form-group base_form">
                <input type="text" id="text" name="general_text" placeholder="Enter Number" class="custom_selector">
                <label class="label_style">Your word for Institute</label>
              </div>
              <div class="form-group base_form">
                <input type="text" id="text" name="general_text" placeholder="Enter Number" class="custom_selector">
                <label class="label_style">Your word for Mentor</label>
              </div>
              <hr>


              <button class="btn btn-outline-primary save_btn" type="submit">Save and Proceed <a class="mt-1"><span
                    class="angl-btn"><i class="fa fa-angle-right" size="28" aria-hidden="true"></i></span></a></button>

              <button class="btn btn-outline-primary save_btn" type="submit">Sava as draft</button>
            </form>
          </div>


          <div class="tab-pane fade" id="v-tabs-agreement" role="tabpanel" aria-labelledby="v-tabs-agreement-tab">
      <div class="img_body">
        <img src="" >
      </div>
            <div class="form-group form-check">
              <input type="checkbox" class="form-check-input inp-check" id="exampleCheck1">
              <label class="form-check-label label-check" for="exampleCheck1">
                i hereby agree, that i have read the <a href="#"><u>Terms & Conditions</u></a> and also that creators
                are eligible for compensation as defined in the <a href="#"><u>guidelines</u></a>. A Course Creator must
                hold an active academic appointment(recalled emeriti faculty included; refer APM 110-4 for the
                definition of Academic Appointee) with the San Diego campus of the University of California.
              </label>
            </div>
            <div class="d-flex btn_styles_1">
              <button class="btn btn-outline-primary btn_agr" type="submit">Sava as draft</button>
              <button class="btn btn-outline-primary btn_agr" type="submit">Agree and Publish <span
                    class="angl-btn"><i class="fa fa-angle-right" size="28" aria-hidden="true"></i></span></a></button>


            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
 

  <style>
  

    .btn_styles_1 {
      display: flex;
      flex-direction: row;
      margin: 20px;
      justify-content: center;
      gap: 20px;

    }

    .btn_agr {
      width: 150px;
      cursor: pointer;
      border: 1px solid #00b85b;
      color: #00b85b;
      font-weight: 800;
      border-radius: 20px;
      padding: 10px;
    }

    .btn_agr:hover {
      background: #00b85b;
      color: #fff;
    }
  </style>