<!DOCTYPE html>
<html lang="en" ng-app="clientesModulo">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<script src="js/angular.min.js"></script>
<!--Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/carousel.css" rel="stylesheet">
<script src="controller/cliente.js"></script>
<title>Carousel Template for Bootstrap</title>
</head>
<!-- NAVBAR
================================================== -->
<body ng-controller = "clientesController">
<div class="navbar-defaut">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-down">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">MRJ business</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Sobre</a></li>
<li><a href="#contact">Contatos</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Sistema <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Produtos</a></li>
<li><a href="#">Fornecedores</a></li>
<li><a href="#">Produtos importados</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Contatos</li>
<li><a href="#">Lista de fornecedores</a></li>
<li><a href="#">Lista de parceiros</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<h1 align="center" >Lista e Cadastro de Clientes</h1>
<form class="form-horizontal">
<div class="form-group">
<label for="codigo" class="col-sm-2 control-label">Código</label>
<div class= "col-sm-4">
<input type="text" ng-model = "cliente.codigo" class="form-control" id="codigo" placeholder="Código">
</div>
</div>
<div class= "form-group">
<label class="col-sm-2 control-label for="nome">Nome</label>
<div class= "col-sm-8">
<input type="Text" ng-model = "cliente.nome" class="form-control" id="nome" placeholder="Nome">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label for="email">Email</label>
<div class= "col-sm-6">
<input type="email" ng-model = "cliente.email" class="form-control" id="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label for="fone">Fone</label>
<div class= "col-sm-5">
<input type="fone" ng-model = "cliente.fone" class="form-control" id="fone" placeholder="Fone">
</div>
</div>
<div align = "center"class="form-group">
<button type="submit" class="btn btn-success">Novo</button>
<button type="submit" class="btn btn-primary">Gravar</button>
<button type="submit" class="btn btn-danger">Excluir</button>
<input type="fone" id="" placeholder="Digite a pesquisa">
</div>
</form>
<div class = "container">
<table class="table table-striped table-hover">
<th>Código</th>
<th>Nome</th>
<th>Email</th>
<th>Telefone</th>
<tr ng-repeat = "clientesTabela in clientes" ng-click="selecionaCliente(clientesTabela)">
<td>{{clientesTabela.codigo}}</td>
<td>{{clientesTabela.nome}}</td>
<td>{{clientesTabela.email}}</td>
<td>{{clientesTabela.fone}}</td>
</tr>
</table>
</div>
<!-- FOOTER -->
<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
<br>
<p>© MRJCorporate · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>