{% extends "layout/install.html" %}
{% block body %}

<header>
 	<center><h1>Installation d'Onyx</h1></center> 
</header>   



<nav>
	<center>
    <div class="nav-wrapper blue darken-1">
      <div class="col s12">
        <a href="#step1" id="gostep1" class="breadcrumb"><span class="breadcrumb">Bienvenue</span></a>
        <a href="#step2" id="gostep2" class="breadcrumb"><span class="breadcrumb">Création du compte</span></a>
        <a href="#step3" id="gostep3" class="breadcrumb"><span class="breadcrumb">Finalisation</span></a>
      </div>
    </div>
    </center>
</nav>

            
  

    <div class="row" id="step1">
        <div class="col-md-8 col-md-offset-2">
          <div class="well well-sm">
            <div class="card-panel blue-grey grey lighten-3">
              <p>Bienvenue sur la page de configuration d'Onyx !</p>
              <p>Vous allez pouvoir reglez votre configuration comme vous le souhaitez</p>
              <p>Onyx sera votre assistant personnel et vous pourrez l'utiliser sur vos différents appareils</p>
            
                  <button id="etape1" class="btn blue darken-1 btn-lg">Suivant</button>

            </div>

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

   

    <div class="row" id="step2">
        <div class="col-md-8 col-md-offset-2">
          <div class="well well-sm">
             


            <div class="card-panel blue-grey grey lighten-3">
                <legend class="text-center">Créer votre compte administrateur</legend>
      <form class="register-form" method=post action=""> 
 
              <input type="text" id="username" name="username" 
            placeholder="Nom d'utilisateur" value="{{ request.form.username }}" required> 

      <input type="password" id="password" name="password" 
            placeholder="Mot de passe" value="{{ request.form.password }}" required>

      <input type="email" id="email" name="email" class="input-xlarge"
            placeholder="Adresse Email" value="{{ request.form.email }}" required>


                <div class="form-group">
                <div class="col-md-12 text-right">
                  <span id="etape2" class="btn blue darken-1 btn-lg">Suivant</span>
                </div>
                </div>

              </div>

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


    <div class="row" id="step3">
        <div class="col-md-8 col-md-offset-2">
          <div class="well well-sm">
            <div class="card-panel blue-grey grey lighten-3">
              <legend class="text-center">Finalisation</legend>
            
              <p>Votre assistant est maintenant correctement réglé ! Vous pourrez néanmoins modifier tous ces paramètres depuis votre panneau d'administration !</p>
              <p>Je vous invite maintenant à vous connectez au panneau de contrôle, et à l'ajouter à vos favoris.</p>
               <div>Faites connaître le projet ! <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://onyxlabs.fr" data-text="Je viens d'installer Onyx , mon assistant !"  data-related="Onyx" data-lang="fr" data-size="large" data-count="none">Tweet</a></div>
                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>

            
              <div class="form-group">
                <div class="col-md-12 text-right">
                  <button class="btn blue darken-1 btn-lg">Accéder à Onyx</button>
                  </form>
                </div>
              </div>
            </div>

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



</div>




      <footer>
        <p>© Onyx 2016 - Si vous rencontrez quelconques problème rendez-vous sur notre forum : <a href="http://onyxlabs.fr/forum/">http://onyxlabs.fr/forum/</a></p>
      </footer>
      
{% endblock %}