<div class="panel panel-default step1 hide">
  <div class="panel-body">

    <div class="row">
      <div class="col-md-8">
        <div class="team">
          <div class="row">

            <div class="col-md-3 col-sm-6 col-md-offset-1">
              <div class="team-member">
                <%= image_tag 'people/rachael_korinek.jpg', class: 'img-circle' %>
                <h3>Rachael Korinek</h3>
                <p class="lead">Help &amp; Support</p>
              </div>
            </div>

            <div class="col-md-3 col-sm-6">
              <div class="team-member">
                <%= image_tag 'people/florence_catherine.jpg', class: 'img-circle' %>
                <h3>Florence Catherine</h3>
                <p class="lead">Help &amp; Support</p>
              </div>
            </div>

            <div class="clearfix visible-xs visible-sm"></div>

            <div class="col-md-3 col-sm-6">
              <div class="team-member">
                <%= image_tag 'people/george_millo.jpg', class: 'img-circle' %>
                <h3>George Millo</h3>
                <p class="lead">Development</p>
              </div>
            </div>

            <div class="clearfix"></div>
          </div>

          <div class="row">

            <div class="col-md-3 col-sm-6 col-md-offset-2">
              <div class="team-member">
                <%= image_tag 'people/simon_vrachliotis.jpg', class: 'img-circle'  %>
                <h3>Simon Vrachliotis</h3>
                <p class="lead">Web Design</p>
              </div>
            </div>

            <div class="col-md-3 col-sm-6 col-md-offset-1">
              <div class="team-member">
                <%= image_tag 'people/daniel_martin.png', class: 'img-circle' %>
                <h3>Daniel Martin</h3>
                <p class="lead">Founder</p>
              </div>
            </div>

            <div class="clearfix visible-xs visible-sm"></div>

            <div class="clearfix"></div>
          </div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="aside">
          <h1>Meet your Dradis Pro team</h1>

          <p>Every day we're looking for ways to make your life a little bit easier. Building a better app.</p>
          <p>If there is anything you can think of that will make things smoother, don't keep it to yourself!</p>
          <p class="lead">Happy hunting!   <i class="fa fa-heart text-grass"></i> <i class="fa fa-bug fa-lg text-grapefruit"></i></p>
        </div>
      </div>
    </div>

  </div>
  <div class="panel-footer">
    <div class="wizard-actions">
      <a href="javascript:void(0)" class="btn btn-lg btn-primary js-tour-next">Next Step <i class="fa fa-long-arrow-right"></i></a>
    </div>
  </div>
</div>

<div class="panel panel-default step2 hide">
  <div class="panel-body">
    <h1>Getting help</h1>

    <div class="row">
      <div class="col-md-5 col-md-offset-1">
        <h2>From inside the app</h2>
        <p class="lead">Find the help widget at the bottom of the screen. It looks like this:</p>
        <div>
          <button class="widget-trigger" onclick="HS.beacon.toggle()">Help</button>
        </div>

        <div class="js-beacon-test">
          <p><i class="fa fa-spinner fa-spin"></i> Verifying in-app help widget...</p>
        </div>

        <div class="js-beacon-ok hide">
          <p class="text-success"><i class="fa fa-check"></i> Good to go!</p>
        </div>

        <div class="alert alert-warning js-beacon-ko hide">
          <p><strong>Warning</strong>: It seems that you're blocking the JS snippet that enables the in-app help functionality.</p>
          <p>Please allow all JS on the app to get the best possible experience!</p>
        </div>
      </div>
      <div class="col-md-5">
        <ul class="fa-ul">
          <li><p class="lead"><a target="_blank" href="http://securityroots.com/dradispro/support/"><i class="fa fa-li fa-database text-lavender"></i> Knowledge Base</a></p></li>
          <li><p class="lead"><a target="_blank" href="http://discuss.dradisframework.org/"><i class="fa fa-li fa-comments-o text-mint"></i> Community Forum</a></p></li>
          <li><p class="lead"><a target="_blank" href="http://dradis.slack.com"><i class="fa fa-li fa-slack text-sunflower"></i> Slack Channel</a></p></li>
        </ul>
        <hr/>
        <div class="checkbox">
          <input type="checkbox" id="support-sign-up" checked="checked" />
          <label for="support-sign-up" class="lead">Sign up for support sites</label>
        </div>
      </div>
    </div>
  </div>
  <div class="panel-footer">
    <div class="wizard-actions">
      <a href="javascript:void(0)" class="js-tour-previous">Back</a> or
      <a href="javascript:void(0)" class="btn btn-lg btn-primary js-tour-next">Next Step <i class="fa fa-long-arrow-right"></i></a>
    </div>
  </div>
</div>

<div class="panel panel-default step3 hide">
  <div class="panel-body">
    <h1>Who else should be using Dradis?</h1>
    <h2>If you want anyone else to check Dradis out, let them know.</h2>

    <div class="row">
      <div class="col-md-5 col-md-offset-1">
        <div class="form-group">
          <textarea class="form-control js-paste-area" rows="9" placeholder="Paste e-mail addresses here, one per line."></textarea>
        </div>
      </div>
      <div class="col-md-6">
        <div class="row email-list js-email-list">
          <div class="col-md-6">
            <p class="lead text-muted"><em>apollo@<%= current_user.email.split('@').last %></em></p>
            <p class="lead text-muted"><em>husker@<%= current_user.email.split('@').last %></em></p>
            <p class="lead text-muted"><em>starbuck@<%= current_user.email.split('@').last %></em></p>
          </div>
          <div class="col-md-6">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel-footer">
    <div class="wizard-actions">
      <a href="javascript:void(0)" class="js-tour-previous">Back</a> or
      <%= form_tag tour_complete_path() do %>
      <button class="btn btn-lg btn-primary js-tour-submit">All done <i class="fa fa-check"></i></button>
      <% end %>
    </div>
  </div>
</div>
