---
title: Instructor Course Edit
slug: instructor-course-edit
---
{% extends "layouts/instructor-fluid.html" %}

{% block page %}
<ol class="breadcrumb m-b-0">
	<li><a href="index.html">Home</a></li>
	<li class="active">Courses</li>
</ol>
<div class="media">
	<div class="media-body">
		<h1 class="page-heading h2">
			Edit Course
		</h1>
	</div>
	<div class="media-right media-middle">
		<a href="#" class="btn btn-success btn-rounded">SAVE</a>
	</div>
</div>
<div class="row">
	<div class="col-md-8">
		<div class="card">
			<div class="card-header">
				<h4 class="card-title">Basic Information</h4>
			</div>
			<div class="card-block">
					
				<div class="form-group">
					<label for="title">Title</label>
					<input type="text" class="form-control" placeholder="Write a title" value="Basics of Vue.js">
				</div>
				
				<div class="form-group">
					<label for="details">Description</label>
					<div id="summernote">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque necessitatibus distinctio adipisci eius, unde dignissimos maxime doloribus quisquam non harum?</div>	
				</div>
				
				<div class="form-group">
					<label for="details">Completion Badge</label>
					<div>
						<div data-toggle="buttons">
						<label class="btn btn-white btn-circle active">
							<input type="radio" name="options" id="option1" autocomplete="off" checked> 
							<i class="material-icons  md-36">person</i>
						</label>
						<label class="btn btn-white btn-circle">
							<input type="radio" name="options" id="option2" autocomplete="off">
							<i class="material-icons md-36">star</i>
						</label>
						<label class="btn btn-white btn-circle">
							<input type="radio" name="options" id="option3" autocomplete="off">
							<i class="material-icons md-36">shop</i>
						</label>
						<label class="btn btn-white btn-circle">
							<input type="radio" name="options" id="option3" autocomplete="off">
							<i class="material-icons md-36">monetization_on</i>
						</label>
							<label class="btn btn-white btn-circle">
							<input type="radio" name="options" id="option3" autocomplete="off">
							<i class="material-icons md-36">enhanced_encryption</i>
						</label>
					</div>
					</div>
				</div>
			</div>
		</div>
		<div class="card">
			<div class="card-header">
				<h4 class="card-title">Lessons</h4>
			</div>
			<div class="card-block">
				<p><a href="instructor-lesson-add.html" class="btn btn-primary btn-rounded">Add Lesson <i class="material-icons">add</i></a></p>
				<div class="nestable" id="nestable-handles-primary">
				  <ul class="nestable-list">
					<li class="nestable-item nestable-item-handle" data-id="2">
					  <div class="nestable-handle"><i class="material-icons">menu</i></div>
					  <div class="nestable-content">
						<div class="media">
						  <div class="media-left media-middle">
							<img src="assets/images/vuejs.png" alt="" width="100" class="img-rounded">
						  </div>
						  <div class="media-body media-middle">
							<h5 class="card-title h6 m-b-0">
							  <a href="instructor-lesson-add.html">Awesome Vue.js with SASS Processing</a>
							</h5>
							<small class="text-muted">updated 1 month ago</small>
						  </div>
						  <div class="media-right media-middle">
								<a href="instructor-lesson-add.html" class="btn btn-white btn-sm"><i class="material-icons">edit</i></a>
						  </div>
						</div>
					  </div>
					</li>
					<li class="nestable-item nestable-item-handle" data-id="1">
					  <div class="nestable-handle"><i class="material-icons">menu</i></div>
					  <div class="nestable-content">
						<div class="media">
							<div class="media-left media-middle">
								<img src="assets/images/nodejs.png" alt="" width="100" class="img-rounded">  
							</div>
							<div class="media-body media-middle">
								<h4 class="card-title h6 m-b-0">
									<a href="instructor-lesson-add.html">Github Webhooks for Beginners</a>
								</h4>
								<small class="text-muted">updated 1 month ago</small>
							</div>
							<div class="media-right media-middle">
							   <a href="instructor-lesson-add.html" class="btn btn-white btn-sm"><i class="material-icons">edit</i></a>
						  </div>
						</div>
					  </div>
					</li><li class="nestable-item nestable-item-handle" data-id="2">
					  <div class="nestable-handle"><i class="material-icons">menu</i></div>
					  <div class="nestable-content">
						<div class="media">
						  <div class="media-left">
							<img src="assets/images/gulp.png" alt="" width="100" class="img-rounded">
						  </div>
						  <div class="media-body">
							<h4 class="card-title h6 m-b-0">
							  <a href="instructor-lesson-add.html">Browserify: Writing Modular JavaScript</a>
							</h4>
							<small class="text-muted">updated 1 month ago</small>
						  </div>
							<div class="media-right media-middle">
							<a href="instructor-lesson-add.html" class="btn btn-white btn-sm"><i class="material-icons">edit</i></a>
						  </div>
						</div>
					  </div>
					</li>
				  </ul>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-4">
		<div class="card">
			<!-- 4:3 aspect ratio -->
			<div style="overflow:hidden; height:150px">
				<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/97243285?title=0&amp;byline=0&amp;portrait=0"  frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" width="100%" height="150"></iframe>
			</div>
			<div class="card-block">
				<textarea name="video" class="form-control" rows="6" style="font-size:12px">&lt;iframe class=&quot;embed-responsive-item&quot; src=&quot;https://player.vimeo.com/video/97243285?title=0&amp;byline=0&amp;portrait=0&quot;  frameborder=&quot;0&quot; webkitallowfullscreen mozallowfullscreen allowfullscreen width=&quot;100%&quot;&gt;&lt;/iframe&gt;</textarea>
			</div>
		</div>
		<div class="card">
			<div class="card-header">
				<h4 class="card-title">Meta</h4>
				<p class="card-subtitle">Extra Options </p>
			</div>
			
			<form class="form-horizontal p-a-1">
				<div class="form-group row">
					<label for="select" class="col-sm-6  form-control-label">Category</label>
					<div class="col-sm-6">
						<select class="c-select form-control">
						<option value="#">HTML</option>
						<option value="#">Angular JS</option>
						<option value="#" selected>Vue.js</option>
						<option value="#">CSS / LESS</option>
						<option value="#">Design / Concept</option>
						</select>
					</div>
				</div>
				<div class="form-group row">
					<label for="duration" class="col-sm-6 form-control-label">Duration</label>
					<div class="col-sm-6">
						<input type="text" class="form-control" placeholder="No. of Days" value="10">
					</div>
				</div>
				<div class="form-group row">
					<label for="start" class="col-sm-6  form-control-label">Start Date</label>
					<div class="col-sm-6">
						<input class="datepicker form-control" type="text" value="01/28/2016"/>
					</div>
				</div>
				<div class="form-group row">
					<label for="end" class="col-sm-6  form-control-label">End Date</label>
						<div class="col-sm-6">
					<input class="datepicker form-control" type="text" value="01/28/2016"/>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

<div class="modal fade" id="editLesson">
	<div class="modal-dialog">
		<div class="modal-content">
			// Edit Lesson
		</div>
	</div>
</div>
{% endblock %}



{% block vendor_styling %}
	<!-- Required by summernote -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.5.0/css/font-awesome.min.css">
	<!-- Bootstrap Datepicker -->
	<link rel="stylesheet" href="examples/css/bootstrap-datepicker.min.css">
	<!-- Summernote WYSIWYG -->
	<link rel="stylesheet" href="examples/css/summernote.min.css">
	<!-- Nestable -->
	<link rel="stylesheet" href="examples/css/nestable.min.css">
{% endblock %}

{% block vendor_scripts %}
	<!-- Vendor JS -->
	<script src="assets/vendor/summernote.min.js"></script>
	<script src="assets/vendor/bootstrap-datepicker.min.js"></script>
	<script src="assets/vendor/jquery.nestable.js"></script>
{% endblock%}

{% block example_scripts %}
	<!-- Init -->
	<script src="examples/js/summernote.js"></script>
	<script src="examples/js/date-time.js"></script>
	<script src="examples/js/nestable.js"></script>
{% endblock %}