<div id='page-alert'></div>
<div id='page-prompt'></div>

<div id="content">
    <div class="wrapper-mast wrapper">
      <header class="mast has-actions has-subtitle">
        <h1 class="page-header">
          <small class="subtitle">Settings</small>
          <span class="sr">&gt; </span>Instructor Access
        </h1>

        <nav class="nav-actions">
          <h3 class="sr">Page Actions</h3>
          <ul>
            <li class="nav-item">
              <a href="#" class="button new-button create-user-button"><i class="icon fa fa-plus"></i> Add Instructor</a>
            </li>
          </ul>
        </nav>
      </header>
    </div>

    <div class="wrapper-content wrapper">
      <section class="content">
        <article class="content-primary" role="main">
          <div class="wrapper-create-element animate wrapper-create-user">
            <form class="form-create create-user" id="create-user-form" name="create-user-form">
              <div class="wrapper-form">
                <h3 class="title">Grant Instructor Access to This Library</h3>

                <fieldset class="form-fields">
                  <legend class="sr">New Instructor Information</legend>

                    <ol class="list-input">
                      <li class="field text required create-user-email">
                        <label for="user-email-input">User's Email Address</label>
                        <input id="user-email-input" class="user-email-input" name="user-email" type="text" placeholder="example: username@domain.com" value="">
                        <span class="tip tip-stacked">Please provide the email address of the instructor you'd like to add</span>
                      </li>
                    </ol>
                </fieldset>
              </div>

              <div class="actions">
                <button class="action action-primary" type="submit">Add User</button>
                <button class="action action-secondary action-cancel">Cancel</button>
              </div>
            </form>
          </div>

          <ol id="user-list" class="user-list">
            <div class="ui-loading">
              <p><span class="spin"><i class="icon fa fa-refresh"></i></span> <span class="copy">Loading</span></p>
            </div>
          </ol>

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