{% 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><br>

        <p>Si vous avez déjà effectuer l'installation veuillez cliquer sur ce bouton : <a href="{{ url_for('install.finish') }}" class="btn blue darken-1 btn-lg">Terminer</a></p>   

      </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><br>
          <p>Si vous avez déjà effectuer l'installation veuillez cliquer sur ce bouton : <a href="{{ url_for('install.finish') }}" class="btn blue darken-1 btn-lg">Terminer</a></p> 


        </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 ! <br><center>  <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></center> <br>

             <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>

          <br>
          <p>Si vous avez déjà effectuer l'installation veuillez cliquer sur ce bouton : <a href="{{ url_for('install.finish') }}" class="btn blue darken-1 btn-lg">Terminer</a></p> 


          </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 %}