{% include 'header.twig' %}

 <!-- Main variables *content* -->

          <div   id="notAuthed">
        <style>
    #notAuthed{
        background: url(https://cdn.mypanel.link/92zqvd/phs8bkrzi686e3qi.png);
        background-repeat: no-repeat;
        background-position: top;
        background-size: contain;
    }
</style>
<section id="signup">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-12">
               <div class="signup_content">
                    <h1>
                                                    Register to <span class="primary-color">{{ site['site_name'] }}</span>!
                                                
                    </h1>
                    <p>
                                                    Become a part of {{ site['site_name'] }} now! <br> Fill out the short form and register.
                                            </p>
               </div>
            </div>
            <div class="col-lg-3 col-md-3 col-12"></div>
            <div class="col-lg-6 col-md-6 col-12">
                <div class="signup_form">
                    <div class="card">
                        <div class="card-body">
                            
                            {% if errorText %}
								<div class="alert alert-dismissible alert-danger">
								  {{ errorText }}
								</div>
							  {% endif %}
							  {% if successText %}
								<div class="alert alert-dismissible alert-success">
								  {{ successText }}
								</div>
							  {% endif %}	
							  
                            <form  action="" method="post">
                                                                
                                                                    <div class="mb-4">
                                        <label class="login-label" for="login">Username</label>
                                        <div class="login-control">

                                                                                        <div class="icon">
                                                <i class="ri-user-line"></i>
                                            </div>
                                            
                                            <input type="text" class="form-control" id="login" value="" name="username" autocomplete="email">
                                        </div>
                                    </div>
                                                                    <div class="mb-4">
                                        <label class="login-label" for="email">Email</label>
                                        <div class="login-control">

                                                                                        <div class="icon">
                                                <i class="ri-mail-line"></i>
                                            </div>
                                            
                                            <input type="email" class="form-control" id="email" value="" name="email" autocomplete="email">
                                        </div>
                                    </div>
                                                                    <div class="mb-4">
                                        <label class="login-label" for="password">Password</label>
                                        <div class="login-control">

                                                                                        <div class="icon">
                                                <i class="ri-lock-line"></i>
                                            </div>
                                            
                                            <input type="password" class="form-control" id="password" value="" name="password" autocomplete="email">
                                        </div>
                                    </div>
                                                                    <div class="mb-4">
                                        <label class="login-label" for="password_again">Confirm password</label>
                                        <div class="login-control">

                                                                                        <div class="icon">
                                                <i class="ri-lock-line"></i>
                                            </div>
                                            
                                            <input type="password" class="form-control" id="password_again" value="" name="password_again" autocomplete="email">
                                        </div>
                                    </div>
                                
                                                                 <div class="checkbox">
            <label>
              <input type="checkbox" name="terms" value="1"> I have read and agreed with <a href='terms'>Terms of service</a>
            </label>
          </div>
                                                      
                                <button type="submit" class="btn btn-primary btn-100">Sign up</button>
                                <div class="text-center">Already have an account? <a href="/">Sign in</a></div>
                              </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-12"></div>
        </div>
    </div>
</section>
      </div>

{% include 'footer.twig' %}