<!DOCTYPE HTML>
<html lang="pt-br">
	<head>
		<meta charset="UTF-8">

		<title>Multiroom Chat</title>
		
		<!-- bootstrap - link cdn -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	
		<!-- estilo -->
		<link href="css/style.css" rel="stylesheet">
	</head>

	<body>

		<div class="container">
            <div class="row vertical-offset-80">
                <div class="col-md-4 col-md-offset-4">
                    <div class="panel panel-default">
                    	<div class="panel-heading">                                
                            <div class="row-fluid user-row">
                                <img src="images/multiroom_chat_2.png" class="img-responsive" alt="Multiroom Chat"/>
                            </div>
                        </div>
                        <div class="panel-body">
                            <form action="/chat" method="post" accept-charset="UTF-8" role="form" class="form-signin">
                                <fieldset>
                                    <label class="panel-login">
                                        <div class="login_result"></div>
                                    </label>
                                    <input class="form-control" name="nome" placeholder="Nome ou apelido" id="apelido" type="text">
                                    <br></br>
                                    <input class="btn btn-lg btn-success btn-block" type="submit" id="entrar" value="Entrar »">
                                </fieldset>
                            </form>
                        </div>
                    </div>

                    <div>
                        
                        <% if(validacao) { %>
                           <div class="row">
                                <div class="md-12">
                                    <div class="alert alert-danger">
                                        <strong>Atenção!</strong>
                                        <ul>
                                            <% const erros= Object.values(validacao) %>
                                            <% erros.forEach(element => { %>
                                                <% if(element){ %>
                                                    <li>
                                                        <%= element %>
                                                    </li>
                                                <% } %>
                                            <% }); %>
                                        </ul>
                                        
                                    </div>
                                </div>
                           </div> 
                        <% } %>
                        
                    </div>
                </div>
            </div>
        </div>
		
	</body>
</html>