<%inherit file="base.html" />

<%block name="title">My Courses</%block>
<%block name="bodyclass">is-signedin index dashboard</%block>

<%block name="header_extras">
  <script type="text/template" id="new-course-template">
    <section class="new-course">
      <div class="item-details">
        <form class="course-info">
          <div class="row">
            <label>Course Name</label>
            <input type="text" class="new-course-name" />
          </div>
          <div class="row">
            <div class="column">
              <label>Organization</label>
              <input type="text" class="new-course-org" />
            </div>
            <div class="column">
              <label>Course Number</label>
              <input type="text" class="new-course-number" />
            </div>
          </div>
          <div class="row">
            <input type="submit" value="Save" class="new-course-save" data-template="${new_course_template}" />
            <input type="button" value="Cancel" class="new-course-cancel" />
          </div>
        </form>
      </div>
    </section>
  </script>
</%block>

<%block name="content">
  <div class="wrapper-mast wrapper">
    <header class="mast has-actions">
      <div  class="title">
        <h1 class="title-1">My Courses</h1>
      </div>

      % if user.is_active:
      <nav class="nav-actions">
        <h3 class="sr">Page Actions</h3>
        <ul>
          <li class="nav-item">
            % if not disable_course_creation:
              <a href="#" class="button new-button new-course-button"><i class="ss-icon ss-symbolicons-standard icon icon-create">&#x002B;</i> New Course</a>
            % endif
          </li>
        </ul>
      </nav>
      % endif
    </header>
  </div>

  <div class="wrapper-content wrapper">
    <section class="content">
      <div class="introduction">
        <p class="copy"><strong>Welcome, ${ user.username }</strong>. Here are all of the courses you are currently authoring in Studio:</p>
      </div>
    </section>
  </div>

  <div class="main-wrapper">
    <div class="inner-wrapper">
      <article class="my-classes">
        % if user.is_active:
        <ul class="class-list">
          %for course, url, lms_link in courses:
          <li>
            <a class="class-link" href="${url}" class="class-name">
              <span class="class-name">${course}</span>
            </a>
            <a href="${lms_link}" rel="external" class="button view-button view-live-button"><i class="ss-icon ss-symbolicons-block icon icon-view">&#xE010;</i>View Live</a>
          </li>
            %endfor
        </ul>
        % else:
          <div class='warn-msg'>
            <p>
            In order to start authoring courses using edX Studio, please click on the activation link in your email.
            </p>
          </div>
        % endif
      </article>
    </div>
  </div>
</%block>