<%
const errors = {
  'username-required': 'Le pseudo est requis',
  'username-match': 'Ce pseudo n\'est pas autorisé',
  'email-required': 'L\'email est requis',
  'email-match': 'L\'email n\'est pas valide',
  'email-dup': 'Cet email est déjà présent en base'
};
%>
<div class="box">
  <form method="POST">
    <h1>
      Inscription
    </h1>
    <div class="field">
        <label for="username">Nom d'utilisateur</label>
        <input type="text" required name="username" id="username" placeholder="ex : DarKou">
        <% if ( messages ) {%>
          <% for (let i = 0 ; i < messages.length ; i += 1 ) { %>
            <% if ( messages[i].includes('username') ) { %>
              <div class="message error" role="alert">
                <%= errors[messages[i]] %>
              </div>
            <% } %>
          <% } %>
        <% } %>
    </div>
    <div class="field">
        <label for="email">Adresse e-mail</label>
        <input type="email" required name="email" id="email" placeholder="ex : damien@darkou.fr">
        <% if ( messages ) {%>
          <% for (let i = 0 ; i < messages.length ; i += 1 ) { %>
            <% if ( messages[i].includes('email') ) { %>
              <div class="message error" role="alert">
                <%= errors[messages[i]] %>
              </div>
            <% } %>
          <% } %>
        <% } %>

    </div>
    <div class="field">
        <label for="password">Mot de passe</label>
        <input type="password" required name="password" id="password" placeholder="********">
    </div>

    <div class="text-right mt-10">
      Déjà inscrit ?
      <a href="/connexion">Connectez-vous</a>
    </div>

    <button type="submit" class="button is-primary">Connexion</button>
  </form>
</div>