<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>cyclone upload demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>

  </head>

  <body>

    <div class="container">

      <h1>cyclone upload demo</h1>
      <br>

      <form class="form-horizontal"
            method="post" action="/" enctype="multipart/form-data">
        <legend>Who are you?</legend>
        <fieldset>
          <div class="control-group {% if 'fullname' in missing %}error{% end %}">
            <label class="control-label" for="fullname">Name</label>
            <div class="controls">
              <input type="text" class="input-xlarge" name="fullname">
              <p class="help-block">Your full name</p>
            </div>
          </div>

          <div class="control-group {% if 'picture' in missing %}error{% end %}">
            <label class="control-label" for="picture">Picture</label>
            <div class="controls">
              <input type="file" class="input-file" name="picture">
              <p class="help-block">A picture of you</p>
            </div>
          </div>

          <div class="form-actions">
            <button type="submit" class="btn btn-primary">Submit</button>
            <button type="reset" class="btn">Cancel</button>
          </div>
        </fieldset>
      </form>

      {% if info is not None %}
        <div class="well">
          <p>Name: {{info["name"]}}<p>
          <p>File: {{info["file"]}}</p>
        </div>
      {% end %}

    </div> <!-- /container -->

  </body>
</html>
