<%inherit file="base.html" />
<%! from django.core.urlresolvers import reverse %>
<%block name="bodyclass">settings</%block>
<%block name="title">Settings</%block>

<%namespace name='static' file='static_content.html'/>

<%block name="jsextra">
  <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
  <script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script>
  <script src="${static.url('js/vendor/timepicker/datepair.js')}"></script>
  <script src="${static.url('js/vendor/date.js')}"></script>

  <script type="text/javascript">
    var $body;
    var $gradeBar;
    var $draggingBar;
    var barOrigin;
    var barWidth;
    var gradeThresholds;
    var GRADES = ['A', 'B', 'C', 'D', 'E'];

    $(" :input, textarea").focus(function() {
      $("label[for='" + this.id + "']").addClass("is-focused");
    }).blur(function() {
      $("label").removeClass("is-focused");
    });

    (function() {
      $body = $('body');
      $gradeBar = $('.grade-bar');
      gradeThresholds = [100, 80, 70];
      $('.settings-page-menu a').bind('click', showSettingsTab);
      $('.settings-extra header').bind('click', showSettingsExtras);
      $body.on('mousedown', '.drag-bar', startDragBar);
      $('.new-grade-button').bind('click', addNewGrade);
      $body.on('click', '.remove-button', removeGrade);

      $('.set-date').datepicker({ 'dateFormat': 'm/d/yy' });
    })();

    function addNewGrade(e) {
      e.preventDefault();
      var $newGradeBar = $('<li style="width: 10%;"><span class="letter-grade" contenteditable>' + GRADES[$('.grades li').length] + '</span><span class="range"></span><a href="#" class="drag-bar"></a><a href="#" class="remove-button">remove</a></li>');
      $('.grades').append($newGradeBar);
    }

    function removeGrade(e) {
      e.preventDefault();
      var index = $(this).closest('li').index();
      gradeThresholds.splice(index, 1);
      $(this).closest('li').remove();
    }

    function showSettingsTab(e) {
      e.preventDefault();
      $('.settings-page-section > section').hide();
      $('.settings-' + $(this).attr('data-section')).show();
      $('.settings-page-menu .is-shown').removeClass('is-shown');
      $(e.target).addClass('is-shown');
    }

    function showSettingsExtras(e) {
      e.preventDefault();
      $(this).toggleClass('active');
      $(this).siblings.toggleClass('is-shown');
    }

    function startDragBar(e) {
      e.preventDefault();
      barOrigin = $gradeBar.offset().left;
      barWidth = $gradeBar.width();
      $draggingBar = $(e.target).closest('li').addClass('is-dragging');
      $body.bind('mousemove', moveBar);
      $body.bind('mouseup', stopDragBar);
    }

    function moveBar(e) {
      var barIndex = $draggingBar.index();
      var min = gradeThresholds[barIndex + 1] || 0;
      var max = gradeThresholds[barIndex - 1] || 100;
      var percentage = Math.min(Math.max((e.pageX - barOrigin) / barWidth * 100, min), max);
      $draggingBar.css('width', percentage + '%');
      gradeThresholds[$draggingBar.index()] = Math.round(percentage);
      renderGradeRanges();
    }

    function stopDragBar(e) {
      $draggingBar.removeClass('is-dragging');
      $body.unbind('mousemove', moveBar);
      $body.unbind('mouseup', stopDragBar);
    }

    function renderGradeRanges() {
      $('.range').each(function(i) {
        var min = gradeThresholds[i + 1] + 1 || 0;
        var max = gradeThresholds[i];
        $(this).text(min + '-' + max);
      });
    }

  </script>
</%block>

<%block name="content">
  <!-- -->
  <div class="main-wrapper">
    <div class="inner-wrapper">      
      <h1>Settings</h1>
      <article class="settings-overview">
        <div class="sidebar">
          <nav class="settings-page-menu">
            <ul>
              <li><a href="#" class="is-shown" data-section="details">Course Details</a></li>
              <li><a href="#" data-section="faculty">Faculty</a></li>
              <li><a href="#" data-section="grading">Grading</a></li>
              <li><a href="#" data-section="problems">Problems</a></li>
              <li><a href="#" data-section="discussions">Discussions</a></li>
            </ul>
          </nav>
        </div>
        <div class="settings-page-section main-column">

          <section class="settings-details is-shown">
            <h2 class="title">Course Details</h2>

            <section class="settings-details-basic">
              <header>
                <h3>Basic Information</h3>
                <span class="detail">The nuts and bolts of your course</span>
              </header>

              <div class="row row-col2">
                <label for="course-name-input">Course Name:</label>
                <div class="field">
                  <div class="input">
                    <input type="text" class="long" id="course-name-input" value="[Course Name]" disabled="disabled">
                    <span class="tip tip-stacked">This is used in <a href="[COURSE_SUMMARY_URL]">your course URL</a>, and cannot be changed</span>
                  </div>
                </div>
              </div>

              <div class="row row-col2">
                <label for="course-organization-input">Organization:</label>
                <div class="field">
                  <div class="input">
                    <input type="text" class="long" id="course-organization-input" value="[Course Organization]" disabled="disabled">
                    <span class="tip tip-stacked">This is used in <a href="[COURSE_SUMMARY_URL]">your course URL</a>, and cannot be changed</span>     
                  </div>
                </div>
              </div>

              <div class="row row-col2">
                <label for="course-number-input">Course Number:</label>
                <div class="field">
                  <div class="input">
                    <input type="text" class="short" id="course-number-input" value="[Course No.]" disabled="disabled">
                    <span class="tip tip-inline">e.g. 101x</span>
                    <span class="tip tip-stacked">This is used in <a href="[COURSE_SUMMARY_URL]">your course URL</a>, and cannot be changed</span>
                  </div>
                </div>
              </div>
            </section><!-- .settings-details-basic -->

            <hr class="divide" />

            <section class="settings-details-schedule">
              <header>
                <h3>Course Schedule</h3>
                <span class="detail">Important steps and segments of your course</span>
              </header>

              <div class="row row-col2">
                <h4 class="label">Course Dates:</h4>
                
                <div class="field">
                  <div class="input multi multi-inline">
                    <div class="group">
                      <label for="course-start-date-input">Start Date</label>
                      <input type="text" class="start-date date set-date" id="course-start-date-input" placeholder="MM/DD/YYYY">
                      <span class="tip tip-stacked">First day the course begins</span>          
                    </div>

                    <div class="group">
                      <label for="course-end-date-input">End Date</label>
                      <input type="text" class="start-date date set-date" id="course-end-date-input" placeholder="MM/DD/YYYY">
                      <span class="tip tip-stacked">Last day the course is active</span>          
                    </div>
                  </div>
                </div>
              </div>

              <div class="row row-col2">
                <h4 class="label">Enrollment Dates:</h4>
                
                <div class="field">
                  <div class="input multi multi-inline">
                    <div class="group">
                      <label for="course-enrollment-start-date-input">Start Date</label>
                      <input type="text" class="start-date date set-date" id="course-enrollment-start-date-input" placeholder="MM/DD/YYYY">
                      <span class="tip tip-stacked">First day students can enroll</span>          
                    </div>

                    <div class="group">
                      <label for="course-enrollment-end-date-input">End Date</label>
                      <input type="text" class="start-date date set-date" id="course-enrollment-end-date-input" placeholder="MM/DD/YYYY">
                      <span class="tip tip-stacked">Last day students can enroll</span>          
                    </div>
                  </div>
                </div>
              </div>

              <div class="row row-col2">
                <label for="course-syllabus-input">Course Syllabus</label>
                <div class="field">
                  <div class="input input-existing">
                    <div class=" current current-course-syllabus">
                      <span class="doc-filename"><a href="[link to file]".pdf> <i class="ss-icon ss-standard">&#x1F4C4;</i>CS184x_syllabus.pdf</a></span>

                      <a href="#" class="remove-item remove-course-syllabus remove-doc-data"><span class="delete-icon"></span> Delete Syllabus</a>
                    </div>
                  </div>

                  <div class="input">
                    <a href="#" class="new-item new-course-syllabus add-syllabus-data" id="course-syllabus-input">
                      <span class="upload-icon"></span>Upload Syllabus
                    </a>
                    <span class="tip tip-inline">PDF formatting preferred</span>          
                  </div>
                </div>
              </div>
            </section><!-- .settings-details-schedule -->

            <hr class="divide" />

            <section class="setting-details-marketing">
              <header>
                <h3>Introducing Your Course</h3>
                <span class="detail">Information for perspective students</span>
              </header>

              <div class="row row-col2">
                <label for="course-overview">Course Overview:</label>
                <div class="field">
                  <div class="input">
                    <textarea class="long tall edit-box tinymce" id="course-overview"></textarea>
                    <span class="tip tip-stacked">Introductions, prerequisites, FAQs that are used on <a href="[COURSE_SUMMARY_URL]">your course summary page</a></span>
                  </div>
                </div>      
              </div>

              <div class="row row-col2">
                <label for="course-introduction-video">Introduction Video:</label>
                <div class="field">
                  <div class="input input-existing">
                    <div class=" current current-course-introduction-video">
                      <iframe width="380" height="215" src="http://www.youtube.com/embed/6F0pR-ANmXY" frameborder="0" allowfullscreen></iframe>

                      <a href="#" class="remove-item remove-course-introduction-video remove-video-data"><span class="delete-icon"></span> Delete Video</a>
                    </div>
                  </div>

                  <div class="input">
                    <a href="#" class="new-item new-course-introduction-video add-video-data" id="course-introduction-video">
                      <span class="upload-icon"></span>Upload Video
                    </a>
                    <span class="tip tip-inline">Video restrictions go here</span>          
                  </div>
                </div>
              </div>
            </section><!-- .settings-details-marketing -->

            <hr class="divide" />

            <section class="settings-details-requirements">
              <header>
                <h3>Requirements</h3>
                <span class="detail">Expectations of the students taking this course</span>
              </header>

              <div class="row row-col2">
                <label for="course-effort">Hours of Effort per Week:</label>
                <div class="field">
                  <div class="input">
                    <input type="text" class="short" id="course-effort" placeholder="HH:MM">
                    <span class="tip tip-inline">Time students should spend on all course work</span>
                  </div>
                </div>
              </div>
            </section>
          </section><!-- .settings-details -->

          <section class="settings-faculty">
            <h2 class="title">Faculty</h2>

            <section class="settings-faculty-members">
              <header>
                <h3>Faculty Members</h3>
                <span class="detail">Individuals instructing and help with this course</span>
              </header>

              <div class="row">
                <div class="field enum">
                  <ul class="input-list course-faculty-list">
                    <li class="input input-existing multi course-faculty-list-item">
                      <div class="row row-col2">
                        <label for="course-faculty-firstname-input">Faculty First Name:</label>
                        <div class="field">
                          <input type="text" class="long" id="course-faculty-firstname-input">
                        </div>
                      </div>

                      <div class="row row-col2">
                        <label for="course-faculty-lastname-input">Faculty Last Name:</label>
                        <div class="field">
                          <input type="text" class="long" id="course-faculty-lastname-input">
                        </div>
                      </div>

                      <div class="row row-col2">
                        <label for="course-faculty-photo-input">Faculty Photo</label>
                        <div class="field">
                          <div class="input input-existing">
                            <div class="current current-faculty-photo">
                              <img src="http://placehold.it/400x300&text=Faculty+Photo" alt="Faculty Photo" />
                              <a href="#" class="remove-item remove-faculty-photo remove-video-data"><span class="delete-icon"></span> Delete Faculty Photo</a>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="row row-col2">
                        <label for="course-faculty-bio-input">Faculty Bio:</label>
                        <div class="field">
                          <textarea class="long tall edit-box tinymce" id="course-faculty-bio-input"></textarea>
                          <span class="tip tip-stacked">A brief description of your education, experience, and expertise</span>
                        </div>      
                      </div>

                      <a href="#" class="remove-item remove-faculty-data"><span class="delete-icon"></span> Delete Faculty Member</a>
                    </li>

                    <li class="input multi course-faculty-list-item">
                      <div class="row row-col2">
                        <label for="course-faculty-firstname-input">Faculty First Name:</label>
                        <div class="field">
                          <input type="text" class="long" id="course-faculty-firstname-input">
                        </div>
                      </div>

                      <div class="row row-col2">
                        <label for="course-faculty-lastname-input">Faculty Last Name:</label>
                        <div class="field">
                          <input type="text" class="long" id="course-faculty-lastname-input">
                        </div>
                      </div>

                      <div class="row row-col2">
                        <label for="course-faculty-photo-input">Faculty Photo</label>
                        <div class="field">
                          <div class="input">
                            <a href="#" class="new-item new-faculty-photo add-faculty-photo-data" id="course-faculty-photo-input">
                              <span class="upload-icon"></span>Upload Faculty Photo
                            </a>
                            <span class="tip tip-inline">Max size: 30KB</span>          
                          </div>
                        </div>
                      </div>

                      <div class="row row-col2">
                        <label for="course-faculty-bio-input">Faculty Bio:</label>
                        <div class="field">
                          <div clas="input">
                            <textarea class="long tall edit-box tinymce" id="course-faculty-bio-input"></textarea>
                            <span class="tip tip-stacked">A brief description of your education, experience, and expertise</span>
                          </div>
                        </div>      
                      </div>
                    </li>
                  </ul>

                  <a href="#" class="new-item new-course-faculty-item add-faculty-data">
                    <span class="plus-icon"></span>New Faculty Member
                  </a>
                </div>
              </div>
            </section>

          </section><!-- .settings-staff -->

          <section class="settings-grading">
            <h2 class="title">Grading</h2>

            <section class="settings-grading-range">
              <header>
                <h3>Overall Grade Range</h3>
                <span class="detail">Course grade ranges and their values</span>
              </header>

              <div class="row">
                
                <div class="grade-controls">
                  <a href="#" class="new-grade-button"><span class="plus-icon"></span></a>
                  <div class="grade-slider">
                    <div class="grade-bar">
                      <ol class="increments">
                        <li class="increment-0">0</li>
                        <li class="increment-10">10</li>
                        <li class="increment-20">20</li>
                        <li class="increment-30">30</li>
                        <li class="increment-40">40</li>
                        <li class="increment-50">50</li>
                        <li class="increment-60">60</li>
                        <li class="increment-70">70</li>
                        <li class="increment-80">80</li>
                        <li class="increment-90">90</li>
                        <li class="increment-100">100</li>
                      </ol>
                      <ol class="grades">
                        <li class="bar-a" style="width: 100%;">
                          <span class="letter-grade" contenteditable>A</span>
                          <span class="range">81-100</span>
                          <a href="#" class="remove-button">remove</a>
                        </li>
                        <li class="bar-b" style="width: 80%;">
                          <span class="letter-grade" contenteditable>B</span>
                          <span class="range">71-80</span>
                          <a href="#" class="drag-bar"></a>
                          <a href="#" class="remove-button">remove</a>
                        </li>
                        <li class="bar-c" style="width: 70%;">
                          <span class="letter-grade" contenteditable>C</span>
                          <span class="range">0-70</span>
                          <a href="#" class="drag-bar"></a>
                          <a href="#" class="remove-button">remove</a>
                        </li>
                        <li class="bar-fail" style="width: 50%;">
                          <span class="letter-grade" contenteditable>F</span>
                          <span class="range">0-50</span>
                          <a href="#" class="drag-bar"></a>
                          <a href="#" class="remove-button">remove</a>
                        </li>
                      </ol>
                    </div>
                  </div>
                </div>

              </div>
            </section>

            <section class="settings-grading-general">
              <header>
                <h3>General Grading</h3>
                <span class="detail">Deadlines and Requirements</span>
              </header>

              <div class="row row-col2">
                <label for="course-grading-graceperiod">General Assignment Deadline:</label>

                <div class="field">
                  <div class="input">
                    <input type="text" class="short" id="course-grading-duetime" placeholder="HH:MM">
                    <span class="tip tip-stacked">Boston, MA Local Time (UTC/GMT -5 hours).<br />
                      <a href="http://www.worldtimeserver.com/convert_time_in_UTC.aspx">Convert to your time zone</a></span>
                  </div>
                </div>
              </div>

              <div class="row row-col2">
                <label for="course-grading-graceperiod">Grace Period on Deadline:</label>

                <div class="field">
                  <div class="input">
                    <input type="text" class="short" id="course-grading-graceperiod" placeholder="e.g. 10 minutes">
                    <span class="tip tip-inline">leeway on due dates</span>
                  </div>
                </div>
              </div>
            </section>

            <section class="setting-grading-assignment-types">
              <header>
                <h3>Assignment Types</h3>
              </header>

              <div class="row">
                <div class="field enum">
                  <ul class="input-list course-grading-assignment-list">
                    <li class="input input-existing multi course-grading-assignment-list-item">
                      <div class="row row-col2">
                        <label for="course-grading-1-gradeweight">Assignment Type Name:</label>

                        <div class="field">
                          <div class="input course-grading-assignment-name">
                            <input type="text" class="long" id="course-grading-assignment-1-gradeweight">
                            <span class="tip tip-stacked">e.g. Homework, Labs, Midterm Exams, Final Exam</span>
                          </div>
                        </div>
                      </div>  

                      <div class="row row-col2">
                        <label for="course-grading-1-gradeweight">Weight of Total Grade:</label>

                        <div class="field">
                          <div class="input course-grading-gradeweight">
                            <input type="text" class="short" id="course-grading-assignment-1-gradeweight">
                            <span class="tip tip-inline">e.g. 25%</span>                
                          </div>
                        </div>
                      </div>

                      <div class="row row-col2">
                        <label for="course-grading-assignment-1-totalassignments">Total Number:</label>

                        <div class="field">
                          <div class="input course-grading-totalassignments">
                            <input type="text" class="short" id="course-grading-assignment-1-totalassignments">
                            <span class="tip tip-inline">total exercises assigned</span>                
                          </div>
                        </div>
                      </div>

                      <div class="row row-col2">
                        <label for="course-grading-assignment-1-totalassignmentsdroppable">Number of Droppable:</label>

                        <div class="field">
                          <div class="input course-grading-totalassignmentsdroppable">
                            <input type="text" class="short" id="course-grading-assignment-1-totalassignmentsdroppable">
                            <span class="tip tip-inline">total exercises that won't be graded</span>               
                          </div>
                        </div>
                      </div>

                      <a href="#" class="remove-item remove-grading-data"><span class="delete-icon"></span> Delete Assignment Type</a>
                    </li>

                    <li class="input input-existing multi course-grading-assignment-list-item">
                      <div class="row row-col2">
                        <label for="course-grading-2-gradeweight">Assignment Type Name:</label>

                        <div class="field">
                          <div class="input course-grading-assignment-name">
                            <input type="text" class="long" id="course-grading-assignment-2-gradeweight">
                            <span class="tip tip-stacked">e.g. Homework, Labs, Midterm Exams, Final Exam</span>
                          </div>
                        </div>
                      </div>  

                      <div class="row row-col2">
                        <label for="course-grading-2-gradeweight">Weight of Total Grade:</label>

                        <div class="field">
                          <div class="input course-grading-gradeweight">
                            <input type="text" class="short" id="course-grading-assignment-2-gradeweight">
                            <span class="tip tip-inline">e.g. 25%</span>                
                          </div>
                        </div>
                      </div>

                      <div class="row row-col2">
                        <label for="course-grading-assignment-2-totalassignments">Total Number:</label>

                        <div class="field">
                          <div class="input course-grading-totalassignments">
                            <input type="text" class="short" id="course-grading-assignment-2-totalassignments">
                            <span class="tip tip-inline">total exercises assigned</span>                
                          </div>
                        </div>
                      </div>

                      <div class="row row-col2">
                        <label for="course-grading-assignment-2-totalassignmentsdroppable">Number of Droppable:</label>

                        <div class="field">
                          <div class="input course-grading-totalassignmentsdroppable">
                            <input type="text" class="short" id="course-grading-assignment-2-totalassignmentsdroppable">
                            <span class="tip tip-inline">total exercises that won't be graded</span>               
                          </div>
                        </div>
                      </div>

                      <a href="#" class="remove-item remove-grading-data"><span class="delete-icon"></span> Delete Assignment Type</a>
                    </li>
                  </ul>

                  <a href="#" class="new-item new-course-grading-item add-grading-data">
                    <span class="plus-icon"></span>New Assignment Type
                  </a>
                </div>
              </div>
            </section>
          </section><!-- .settings-grading -->

          <section class="settings-problems">
            <h2 class="title">Problems</h2>

            <section class="settings-problems-general">
              <header>
                <h3>General Settings</h3>
                <span class="detail">Course-wide settings for all problems</span>
              </header>

              <div class="row row-col2">
                <h4 class="label">Problem Randomization:</h4>

                <div class="field">
                  <div class="input input-radio">
                    <input checked="checked" type="radio" name="problems-general-randomization" id="problems-general-randomization-always" value="Always">
                    
                    <div class="copy">
                      <label for="problems-general-randomization-always">Always</label>
                      <span class="tip tip-stacked"><strong>randomize all</strong> problems</span>
                    </div>
                  </div>

                  <div class="input input-radio">
                    <input type="radio" name="problems-general-randomization" id="problems-general-randomization-never" value="Never">
                    
                    <div class="copy">
                      <label for="problems-general-randomization-never">Never</label>
                      <span class="tip tip-stacked"><strong>do not randomize</strong> problems</span>
                    </div>
                  </div>

                  <div class="input input-radio">
                    <input type="radio" name="problems-general-randomization" id="problems-general-randomization-perstudent" value="Per Student">
                    
                    <div class="copy">
                      <label for="problems-general-randomization-perstudent">Per Student</label>
                      <span class="tip tip-stacked">randomize problems <strong>per student</strong></span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row row-col2">
                <h4 class="label">Show Answers:</h4>

                <div class="field">
                  <div class="input input-radio">
                    <input checked="checked" type="radio" name="problems-general-showanswer" id="problems-general-showanswer-always" value="Always">
                    
                    <div class="copy">
                      <label for="problems-general-showanswer-always">Always</label>
                      <span class="tip tip-stacked">Answers will be shown after the number of attempts has been met</span>
                    </div>
                  </div>

                  <div class="input input-radio">
                    <input type="radio" name="problems-general-showanswer" id="problems-general-showanswer-never" value="Never">
                  
                    <div class="copy">
                      <label for="problems-general-showanswer-never">Never</label>
                      <span class="tip tip-stacked">Answers will never be shown, regardless of attempts</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row row-col2">
                <label for="problems-general-attempts">Number of Attempts: </label>

                <div class="field">
                  <div class="input">
                    <input type="text" class="short" id="problems-general-attempts" placeholder="0 or higher" value="0">
                    <span class="tip tip-inline">To set infinite atttempts, use "0"</span>
                  </div>
                </div>
              </div>
            </section><!-- .settings-problems-general -->

            <section class="settings-problems--assignment-1 settings-extras">
              <header>
                <h3>[Assignment Type Name]</h3>
              </header>

              <div class="row row-col2">
                <h4 class="label">Problem Randomization:</h4>

                <div class="field">
                  <div class="input input-radio">
                    <input checked="checked" type="radio" name="problems--assignment-1-randomization" id="problems--assignment-1-randomization-always" value="Always">
                    
                    <div class="copy">
                      <label for="problems--assignment-1-randomization-always">Always</label>
                      <span class="tip tip-stacked"><strong>randomize all</strong> problems</span>                    
                    </div>
                  </div>

                  <div class="input input-radio">
                    <input type="radio" name="problems-assignment-1-randomization" id="problems-assignment-1-randomization-never" value="Never">
                    
                    <div class="copy">
                      <label for="problems-assignment-1-randomization-never">Never</label>
                      <span class="tip tip-stacked"><strong>do not randomize</strong> problems</span>
                    </div>
                  </div>

                  <div class="input input-radio">
                    <input type="radio" name="problems-assignment-1-randomization" id="problems-assignment-1-randomization-perstudent" value="Per Student">
                    
                    <div class="copy">
                      <label for="problems-assignment-1-randomization-perstudent">Per Student</label>
                      <span class="tip tip-stacked">randomize problems <strong>per student</strong></span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row row-col2">
                <h4 class="label">Show Answers:</h4>

                <div class="field">
                  <div class="input input-radio">
                    <input checked="checked" type="radio" name="problems-assignment-1-showanswer" id="problems-assignment-1-showanswer-always" value="Always">
                    
                    <div class="copy">
                      <label for="problems-assignment-1-showanswer-always">Always</label>
                      <span class="tip tip-stacked">Answers will be shown after the number of attempts has been met</span>
                    </div>
                  </div>

                  <div class="input input-radio">
                    <input type="radio" name="problems-assignment-1-showanswer" id="problems-assignment-1-showanswer-never" value="Never">

                    <div class="copy">
                      <label for="problems-assignment-1-showanswer-never">Never</label>
                      <span class="tip tip-stacked">Answers will never be shown, regardless of attempts</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row row-col2">
                <label for="problems-assignment-1-attempts">Number of Attempts: </label>

                <div class="field">
                  <div class="input">
                    <input type="text" class="short" id="problems-assignment-1-attempts" placeholder="0 or higher" value="0">
                    <span class="tip tip-inline">To set infinite atttempts, use "0"</span>
                  </div>
                </div>
              </div>
            </section><!-- .settings-problems-assignment-1 -->
          </section><!-- .settings-problems -->

          <section class="settings-discussions">
            <h2 class="title">Discussions</h2>
            
            <section class="settings-discussions-general">
              <header>
                <h3>General Settings</h3>
                <span class="detail">Course-wide settings for online discussion</span>
              </header>

              <div class="row row-col2">
                <h4 class="label">Anonymous Discussions:</h4>

                <div class="field">
                  <div class="input input-radio">
                    <input type="radio" name="discussions-anonymous" id="discussions-anonymous-allow" value="Allow">
                    
                    <div class="copy">
                      <label for="discussions-anonymous-allow">Allow</label>
                      <span class="tip tip-stacked">Students and faculty <strong>will be able to post anonymously</strong></span>
                    </div>
                  </div>

                  <div class="input input-radio">
                    <input checked="checked" type="radio" name="discussions-anonymous" id="discussions-anonymous-dontallow" value="Do Not Allow">
                    
                    <div class="copy">
                      <label for="discussions-anonymous-dontallow">Do not allow</label>
                      <span class="tip tip-stacked"><strong>Posting anonymously is not allowed</strong>. Any previous anonymous posts <strong>will be reverted to non-anonymous</strong></span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row row-col2">
                <h4 class="label">Discussion Categories</h4>

                <div class="field enum">
                  <ul class="input-list course-discussions-categories-list">
                    <li class="input input-existing input-default course-discussions-categories-list-item">
                      <div class="group">
                        <label for="course-discussions-categories-1-name-input">Category Name: </label>
                        <input type="text" class="course-discussions-categories-name-input" id="course-discussions-categories-1-name-input" placeholder="" value="General" disabled="disabled">
                      </div>
                    </li>
                    
                    <li class="input input-existing input-default course-discussions-categories-list-item">
                      <div class="group">
                        <label for="course-discussions-categories-2-name-input">Category Name: </label>
                        <input type="text" class="course-discussions-categories-name-input" id="course-discussions-categories-2-name-input" placeholder="" value="Feedback" disabled="disabled">
                      </div>
                    </li>

                    <li class="input input-existing input-default course-discussions-categories-list-item">
                      <div class="group">
                        <label for="course-discussions-categories-3-name-input">Category Name: </label>
                        <input type="text" class="course-discussions-categories-name-input" id="course-discussions-categories-3-name-input" placeholder="" value="Troubleshooting" disabled="disabled">
                      </div>
                    </li>

                    <li class="input input-existing course-discussions-categories-list-item">
                      <div class="group">
                        <label for="course-discussions-categories-4-name-input">Category Name: </label>
                        <input type="text" class="course-discussions-categories-name-input" id="course-discussions-categories-4-name-input" placeholder="" value="Study Groups">

                        <a href="#" class="remove-item remove-course-discussions-categories-data"><span class="delete-icon"></span> Delete Category</a>
                      </div>
                    </li>

                    <li class="input input-existing course-discussions-categories-list-item">
                      <div class="group">
                        <label for="course-discussions-categories-5-name-input">Category Name: </label>
                        <input type="text" class="course-discussions-categories-name-input" id="course-discussions-categories-5-name-input" placeholder="" value="Lectures">
                      </div>

                      <a href="#" class="remove-item remove-course-discussions-categories-data"><span class="delete-icon"></span> Delete Category</a>
                    </li>

                    <li class="input course-discussions-categories-list-item">
                      <div class="group">
                        <label for="course-discussions-categories-6-name-input">Category Name: </label>
                        <input type="text" class="course-discussions-categories-name-input" id="course-discussions-categories-6-name-input" placeholder="">
                      </div>

                      <a href="#" class="remove-item remove-course-discussions-categories-data"><span class="delete-icon"></span> Delete Category</a>
                    </li>
                  </ul>

                  <a href="#" class="new-item new-course-discussions-categories-item add-categories-data">
                    <span class="plus-icon"></span>New Discussion Category
                  </a>
                </div>
              </div>
            </section><!-- .settings-discussions-general -->
          </section><!-- .settings-discussions -->
        </div>
      </article>
    </div>
  </div>
</%block>
