{{ enablePlugins('prettify') }}
{% set title = "Register" %}

{% extends "layouts/application.html" %}


{% block content %}
  {% include "shared/page-title.html" %}
  
  <div class="row">
    <div class="col s12 l6">

      <div class="card-panel">
        <form action="#!">
          
          <div class="row">
            <!-- First Name -->
            <div class="col m6 s12">
              <div class="input-field">
                <i class="fa fa-user prefix"></i>
                <input id="input_fname" type="text" name="firstname">
                <label for="input_fname">First Name</label>
              </div>
            </div>
            <!-- /First Name -->

            <!-- Last Name -->
            <div class="col m6 s12">
              <div class="input-field">
                <i class="fa fa-user prefix"></i>
                <input id="input_lname" type="text" name="lastname">
                <label for="input_lname">Last Name</label>
              </div>
            </div>
            <!-- /Last Name -->
          </div>

          <!-- Email -->
          <div class="input-field">
            <i class="fa fa-envelope prefix"></i>
            <input id="input_email" type="email" name="email">
            <label for="input_email">Email</label>
          </div>
          <!-- /Email -->

          <!-- Username -->
          <div class="input-field">
            <i class="fa fa-user prefix"></i>
            <input id="input_username" type="text" name="username">
            <label for="input_username">Username</label>
          </div>
          <!-- /Username -->

          <!-- Password -->
          <div class="input-field">
            <i class="fa fa-unlock-alt prefix"></i>
            <input id="input_password" type="password" name="password">
            <label for="input_password">Password</label>
          </div>
          <!-- /Password -->

          <!-- Gender -->
          <select name="gender">
            <option value="" disabled selected>Gender</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="other">Other</option>
          </select>
          <!-- /Gender -->

          <p>
            <input type="checkbox" id="checkbox_terms" />
            <label for="checkbox_terms">I agree to the <a href="#">terms of use</a>.</label>
          </p>

          <button class="waves-effect btn">Register</button>

        </form>
      </div>

    </div>
    <div class="col s12 l6">
      <pre class="prettyprint linenums white no-margin height-auto">
&lt;form action="#!">
  
  &lt;div class="row">
    &lt;div class="col m6 s12">
      &lt;div class="input-field">
        &lt;i class="fa fa-user prefix">&lt;/i>
        &lt;input id="input_fname" type="text" name="firstname">
        &lt;label for="input_fname">First Name&lt;/label>
      &lt;/div>
    &lt;/div>
    &lt;div class="col m6 s12">
      &lt;div class="input-field">
        &lt;i class="fa fa-user prefix">&lt;/i>
        &lt;input id="input_lname" type="text" name="lastname">
        &lt;label for="input_lname">Last Name&lt;/label>
      &lt;/div>
    &lt;/div>
  &lt;/div>

  &lt;div class="input-field">
    &lt;i class="fa fa-envelope prefix">&lt;/i>
    &lt;input id="input_email" type="email" name="email">
    &lt;label for="input_email">Email&lt;/label>
  &lt;/div>

  &lt;div class="input-field">
    &lt;i class="fa fa-user prefix">&lt;/i>
    &lt;input id="input_username" type="text" name="username">
    &lt;label for="input_username">Username&lt;/label>
  &lt;/div>

  &lt;div class="input-field">
    &lt;i class="fa fa-unlock-alt prefix">&lt;/i>
    &lt;input id="input_password" type="password" name="password">
    &lt;label for="input_password">Password&lt;/label>
  &lt;/div>

  &lt;select name="gender">
    &lt;option value="" disabled selected>Gender&lt;/option>
    &lt;option value="male">Male&lt;/option>
    &lt;option value="female">Female&lt;/option>
    &lt;option value="other">Other&lt;/option>
  &lt;/select>

  &lt;p>
    &lt;input type="checkbox" id="checkbox_terms" />
    &lt;label for="checkbox_terms">I agree to the &lt;a href="#">terms of use&lt;/a>.&lt;/label>
  &lt;/p>

  &lt;button class="waves-effect btn">Register&lt;/button>

&lt;/form></pre>
    </div>
  </div>

{% endblock %}