<%! from django.utils.translation import ugettext as _ %>
<%! from django.template.defaultfilters import escapejs %>
<%! from microsite_configuration import page_title_breadcrumbs %>
<%! from edxnotes.helpers import is_feature_enabled as is_edxnotes_enabled %>
<%inherit file="/main.html" />
<%namespace name='static' file='/static_content.html'/>

<%block name="bodyclass">in-course view-teams</%block>
<%block name="title"><title>
Create New Team | [Course name]
</title></%block>

<%block name="header_extras">
<header class="global slim" aria-label="Main" role="banner">
  <div class="wrapper-header nav-container">
    <h1 class="logo" itemscope="" itemtype="http://schema.org/Organization">
      <a href="/" itemprop="url">

            <img src="/static/images/edx-theme/edx-logo-77x36.png" alt="Your Platform Name Here Home Page" itemprop="logo" />

      </a>
    </h1>

    <h2><span class="provider">PlantsX:</span> GAR_123 Wild Life</h2>


    <ul class="user">
      <li class="primary">
        <a href="/dashboard" class="user-link">
          <i class="icon fa fa-home" aria-hidden="true"></i>
          <span class="sr">Dashboard for:</span>
          <div>frances</div>
        </a>
      </li>
      <li class="primary">
        <a href="#" class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">More options dropdown</span> &#9662;</a>
        <ul class="dropdown-menu" aria-label="More Options" role="menu">

            <li><a href="/account/settings">Account Settings</a></li>
            <li><a href="/u/frances">My Profile</a></li>

          <li><a href="/logout" role="menuitem">Sign Out</a></li>
        </ul>
      </li>
    </ul>
  </div>
</header>

<nav aria-label="Course Material" class="courseware wrapper-course-material">
  <div class="course-material">
    <ol class="course-tabs">

          <li>
             <a class="active" href="/courses/PlantsX/GAR_123/2014_T3/courseware">
                 Courseware
                   <span class="sr">, current location</span>
             </a>
          </li>

          <li>
             <a class="" href="/courses/PlantsX/GAR_123/2014_T3/info">
                 Course Info
             </a>
          </li>

          <li>
             <a class="" href="/courses/PlantsX/GAR_123/2014_T3/discussion/forum">
                 Discussion
             </a>
          </li>

          <li>
             <a class="" href="/courses/PlantsX/GAR_123/2014_T3/course_wiki">
                 Wiki
             </a>
          </li>

          <li>
             <a class="" href="/courses/PlantsX/GAR_123/2014_T3/progress">
                 Progress
             </a>
          </li>

          <li>
             <a class="" href="/courses/PlantsX/GAR_123/2014_T3/instructor">
                 Instructor
             </a>
          </li>

    </ol>
  </div>
</nav>
</%block>

<%block name="headextra">
<%static:css group='style-course-vendor'/>
<%static:css group='style-course'/>
<%block name="nav_skip">${"#seq_content" if section_title else "#course-content"}</%block>
</%block>

<%block name="js_extra">

  <script type="text/javascript">
    $(function(){
        $(".ui-accordion-header a, .ui-accordion-content .subtitle").each(function() {
          var elemText = $(this).text().replace(/^\s+|\s+$/g,''); // Strip leading and trailing whitespace
          var wordArray = elemText.split(" ");
          var finalTitle = "";
          if (wordArray.length > 0) {
            for (i=0;i<=wordArray.length-1;i++) {
              finalTitle += wordArray[i];
              if (i == (wordArray.length-2)) {
                finalTitle += "&nbsp;";
              } else if (i == (wordArray.length-1)) {
                // Do nothing
              } else {
                finalTitle += " ";
              }
            }
          }
          $(this).html(finalTitle);
        });
      });
  </script>

</%block>

<div class="container">
  <div class="course-wrapper">
    <section class="course-content" id="course-content">

    <header class="page-header">
      <div class="page-header-main">
        <nav class="breadcrumbs">
          <a class="nav-item" href="">Solar Energy</a> <span class="icon fa-angle-right" aria-hidden="true"></span>
        </nav>
        <h1 class="page-title">Create a New Team</h1>
        <p class="page-description">If you cannot find an existing team to join or would like to team up with a group of friends, create a new team.</p>
      </div>
    </header>
    <div class="wrapper-msg is-incontext urgency-low warning">
        <div class="msg">
            <div class="msg-content">
                <h3 class="title">Oops!</h3>
                <div class="copy">
                    <p>We couldn't create your team because something needs to be fixed below.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="page-content">

      <form class="create-team">
        <fieldset class="required-wrapper">
          <legend class="sr">Required Information</legend>

          <div class="form-field is-required">
            <label for="team-name" class="label">Team Name (Required)</label>
            <input id="team-name" aria-required="true" class="input-text" />
            <span class="tip tip-input">The name that will identify your team</span>
          </div>

          <div class="form-field is-required has-errors">
            <label for="team-description" class="label">Team Description (Required)</label>
            <textarea id="team-description" aria-required="true" class="input-text input-text-large"></textarea>
            <span class="tip tip-input">A short description of the team to help other students understand the goals or directives the team is pursuing</span>
          </div>
        </fieldset>

        <fieldset class="optional-wrapper">
          <legend>Optional Characteristics</legend>
          <p class="description">Help other students find and join your team by specifying characteristics. The more limitations you add, the fewer students may be interested in joining, so choose carefully.</p>
          <div class="form-field">
            <label for="team-language" class="label">Language</label>
            <select id="team-language" name="team-language" class="input-select">
              <option value="">Select...</option>
              <option>Swahili</option>
              <option>Mandarin</option>
              <option>English</option>
              <option>Hobbitish</option>
            </select>
            <span class="tip tip-input">The primary language of the team</span>
          </div>
          <div class="form-field">
            <label for="team-country" class="label">Country</label>
            <select id="team-country" name="team-country" class="input-select">
              <option value="">Select...</option>
              <option>Timbuktoo</option>
              <option>The Moon</option>
              <option>Paris</option>
              <option>JP</option>
            </select>
            <span class="tip tip-input">The primary country of the team</span>
          </div>
        </fieldset>

        <div class="form-actions">
          <button class="action action-primary">Create</button>
          <button class="action action-cancel" href="">Cancel</button>
        </div>
      </form>
    </div>

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