<html>

<head>
   <title>{{i18n "Register"}}</title>
   <meta charset="utf8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
</head>

<body>
   <hgroup>
      <h1>{{i18n "Register"}}</h1>
   </hgroup>

   <form action="JavaScript:void(0)">
      <div class="error invisible" id="error" style="font-size: 18px; margin-bottom: 16px"></div>

      <div class="floating group">
         <input type="text" id="regcode">
         <span class="highlight"></span>
         <span class="bar"></span>
         <label>{{i18n "Registration code"}}</label>
         <div class="error invisible" id="err_regcode"></div>
      </div>

      <div class="floating group">
         <input type="text" id="username">
         <span class="highlight"></span>
         <span class="bar"></span>
         <label>{{i18n "Username"}}</label>
         <div class="error invisible" id="err_username"></div>
      </div>

      <div class="floating group">
         <input type="text" id="name">
         <span class="highlight"></span>
         <span class="bar"></span>
         <label>{{i18n "Name"}}</label>
         <div class="error invisible" id="err_name"></div>
      </div>

      <div class="error invisible" id="err_gender"></div>
      <div class="mdc-form-field group">
         <div class="mdc-radio">
            <input class="mdc-radio__native-control" type="radio" id="radio-male" name="radios" checked>
            <div class="mdc-radio__background">
               <div class="mdc-radio__outer-circle"></div>
               <div class="mdc-radio__inner-circle"></div>
            </div>
         </div>
         <label for="radio-male" style="position: relative;">{{i18n "Male"}}</label>

         <div class="mdc-radio">
            <input class="mdc-radio__native-control" type="radio" id="radio-female" name="radios" checked>
            <div class="mdc-radio__background">
               <div class="mdc-radio__outer-circle"></div>
               <div class="mdc-radio__inner-circle"></div>
            </div>
         </div>
         <label for="radio-female" style="position: relative;">{{i18n "Female"}}</label>

         <div class="mdc-radio">
            <input class="mdc-radio__native-control" type="radio" id="radio-other" name="radios" checked>
            <div class="mdc-radio__background">
               <div class="mdc-radio__outer-circle"></div>
               <div class="mdc-radio__inner-circle"></div>
            </div>
         </div>
         <label for="radio-other" style="position: relative;">{{i18n "Other"}}</label>
      </div>

      <div class="floating group">
         <input type="text" id="mail">
         <span class="highlight"></span>
         <span class="bar"></span>
         <label>{{i18n "Mail"}}</label>
         <div class="error invisible" id="err_mail"></div>
      </div>

      <div class="floating group">
         <input type="password" id="password">
         <span class="highlight"></span>
         <span class="bar"></span>
         <label>{{i18n "Password"}}</label>
         <div class="error invisible" id="err_password"></div>
      </div>

      <div class="floating group">
         <input type="password" id="passwordrep">
         <span class="highlight"></span>
         <span class="bar"></span>
         <label>{{i18n "Repeat Password"}}</label>
         <div class="error invisible" id="err_passwordrep"></div>
      </div>

      <button type="button" id="registerbutton" class="mdc-button mdc-button--raised">{{i18n "Register"}}
      </button>
   </form>
   <footer>
      <p>Powered by {{appname}}</p>
   </footer>

   <script type="json" id="error_codes">
      {
         "noregcode": "{{i18n "Registration code required"}}",
         "nousername": "{{i18n "Username required"}}",
         "noname": "{{i18n "Name required"}}",
         "nomail": "{{i18n "Mail required"}}",
         "nogender": "{{i18n "You need to select one of the options"}}",
         "nopassword": "{{i18n "Password is required"}}",
         "nomatch": "{{i18n "The passwords do not match"}}"
      }
   </script>
</body>

</html>