<!-- BootStrap NavBar -->
<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <h3>
        <a class="brand" href="[% request.uri_base %]"><img src="images/dancer_man.png"> Perl Dancer</a>
      </h3>

      [% IF username %]
      [% ###### Embedded dropdown menu in the Nav-Bar ####### %]
        <ul class="nav pull-right">
          <li id="fat-menu" class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">[% username | html %]<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="">Log out</a></li>
            </ul>
          </li>
        </ul>
      [% END %]

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

<!-- HEADER line -->
<div class="container">

  <div class="page-header">
    <div class="row">
      <div class="span12">
        <h2>Dancer + Bootstrap Examples</h2>
        <h1>Login Form and Navigation Bar Dropdown Menu</h1>
      </div>
    </div>
  </div>

  <div class="row">

    <div class="span6">
      <form class="well form-inline" method="post"
          action="[% request.uri_base %]/navbar_login">
        <fieldset>
          <legend>Sign In</legend>
          <input type="text" class="input-large" name="username"
              placeholder="Username or email" />
          <input type="password" class="span2" name="password"
              placeholder="Password">
          <button type="submit" class="btn btn-primary">Sign in</button>
        </fieldset>
      </form>

      [% ####### Show any login warning (set by Dancer) ####### %]
      [% IF show_warning %]
      <div class="alert alert-error">
      <button type="button" class="close" data-dismiss="alert">&times;</button> 
      <strong>Hey!</strong> [% show_warning %]
      </div>
      [% END %]

      [% IF not username %]
        Try to login with any username and password
        <span class="label label-info">12345</span>.
        Try other passwords to see login error messages.
      [% ELSE %]
        Hello, <span class="label label-warning">[% username | html %]</span>.
        You've successfully logged in.
        Look at the nav-bar in the upper right.
        A drop-down should be there that will allow you to log out.
      [% END %]

      <br/>
      <br/>
      <br/>

      <h3>Code Highlights</h3>
      <ul>
        <li>
          The Dancer code is in
          <a href="[% request.uri_for("/show_file",file => "navbar_login.pm", example => "NavBar-Login", url => request.uri_for("/navbar_login") ) %]">
            <code>./lib/examples/navbar_login.pm</code>
            <i class="icon-eye-open"></i>
          </a>.
                    </li>
        <li>
          This HTML tempate is in
          <a href="[% request.uri_for("/show_file",file => "navbar_login.tt", example => "NavBar-Login", url => request.uri_for("/navbar_login") ) %]">
            <code>./views/examples/navbar_login.tt</code>
            <i class="icon-eye-open"></i>
          </a>.
        </li>
        <li>
          Inside the template, if the <code>username</code> variable is TRUE,
          the user is considered logged in
          and the template will render a slightly different HTML code.
        </li>
      </ul>

    </div>

    <div class="span6">
      <form class="form-horizontal well" method="post"
          action="[% request.uri_base %]/navbar_login">
        <fieldset>
          <legend>Create a New Account</legend>
          <div class="control-group">
            <label class="control-label" for="new_email">Email</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="new_email"
                  name="username"/>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="new_pw1">Password</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="new_pw1"
                  name="password"/>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="new_pw2">Verify password</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="new_pw2"/>
            </div>
          </div>
          <button type="submit" class="btn btn-primary">Create account</button>
        </fieldset>
      </form>
    </div>

  </div>

</div>