<li class="field-group">
  <div class="field text field-course-instructor-name">
  	<label for="course-instructor-name-<%- index %>"><%- gettext("Name") %></label>
  	<input type="text" class="long" id="course-instructor-name-<%- index %>" value="<%- data['name'] %>" data-index=<%- index %> data-field="name" placeholder="<%- gettext('Instructor Name') %>"  />
  	<span class="tip tip-stacked"><%- gettext("Please add the instructor's name")%></span>
  </div>

  <div class="field text field-course-instructor-title">
    <label for="course-instructor-title-<%- index %>"><%- gettext("Title") %></label>
    <input type="text" class="long" id="course-instructor-title-<%- index %>" value="<%- data['title'] %>" data-index=<%- index %> data-field="title" placeholder="<%- gettext('Instructor Title') %>" />
    <span class="tip tip-stacked"><%- gettext("Please add the instructor's title")%></span>
  </div>

  <div class="field text field-course-instructor-organization">
    <label for="course-instructor-organization-<%- index %>"><%- gettext("Organization") %></label>
    <input type="text" class="long" id="course-instructor-organization-<%- index %>" value = "<%- data['organization'] %>" data-index=<%- index %> data-field="organization" placeholder="<%- gettext('Organization Name') %>" />
    <span class="tip tip-stacked"><%- gettext("Please add the institute where the instructor is associated")%></span>
  </div>

  <div class="field text field-course-instructor-bio">
    <label for="course-instructor-bio-<%- index %>"><%- gettext("Biography") %></label>
    <textarea class="short text" id="course-instructor-bio-<%- index %>" data-index=<%- index %> data-field="bio" placeholder="<%- gettext('Instructor Biography') %>" ><%- data['bio'] %></textarea>
    <span class="tip tip-stacked"><%- gettext("Please add the instructor's biography")%></span>
  </div>

  <div class="field image field-course-instructor-image current-instructor-image">
  <label for="course-instructor-image-<%- index %>"><%- gettext("Photo") %></label>
    <span class="wrapper-instructor-image">
        <img id="course-instructor-image-preview-<%- index %>" class="instructor-image" src="<%- data['image']%>" alt="<%- gettext('Instructor Photo') %>" />
    </span>
    <div class="wrapper-input">
      <div class="input">
        <input type="text" dir="ltr" class="long new-instructor-image-url" id="course-instructor-image-<%- index %>" value="<%- data['image'] %>" data-index="<%- index %>"" data-field="image" placeholder="<%- gettext('Instructor Photo URL') %>" autocomplete="off" />
        <span class="tip tip-stacked"><%- gettext("Please add a photo of the instructor (Note: only JPEG or PNG format supported)")%></span>
      </div>
      <button type="button" class="action action-upload-instructor-image" data-index=<%- index %>><%- gettext("Upload Photo") %></button>
    </div>
  </div>

  <div class="actions">
  	<button type="button" class="button delete-button standard remove-item remove-instructor-data" data-index=<%- index %>><%- gettext("Delete") %></button>
  </div>
</li>