<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@ taglib prefix="t" uri="http://myfaces.apache.org/tomahawk" %>

<html>
<%@include file="/paginas/comum/head.jsp" %>
<body>
<f:view>
<%@include file="/paginas/comum/cabecalho.jsp" %>

<f:verbatim>
<style type="text/css">
	.colunaIngredientes {
		width: 200px;
	}
</style>
</f:verbatim>

<h1>Ingredientes</h1>

<table>
<thead>
<tr><th class="tabelaCabecalho">Massa</th><th class="tabelaCabecalho">Preço</th></tr></thead>
<tbody>
<tr class="tabelaLinha1" onmouseout="tabelaMouseOut(this)" onmouseover="tabelaMouseOver(this)"><td class="colunaIngredientes">Tradicional</td><td class="colunaIngredientes">R$ 10,00</td></tr>
</tbody>
</table>

<t:dataTable id="tabelaDeCategoriasDeIngredientes"
	var="categoria" value="#{ingredientesControlador.categorias}">
	
	<h:column> 
		<f:facet name="header">
			<h:outputText value="#{categoria.nome}"/>
		</f:facet>
		
		<t:dataTable id="tabelaDeIngredientes"
			var="ingrediente" value="#{categoria.ingredientes}"
			headerClass="tabelaCabecalho"
			footerClass="tabelaRodape"
			columnClasses="colunaIngredientes"
			rowClasses="tabelaLinha1,tabelaLinha2"
			rowOnMouseOver="tabelaMouseOver(this)"
			rowOnMouseOut="tabelaMouseOut(this)">
			
			<h:column> 
				<f:facet name="header">
					<h:outputText value="#{categoria.nome}"/>
				</f:facet>
				
				<h:outputText value="#{ingrediente.nome}"/>
			</h:column>
			<h:column> 
				<f:facet name="header">
					<h:outputText value="Preço"/>
				</f:facet>
				
				<h:outputText value="#{ingrediente.preco}">
				<f:convertNumber minFractionDigits="2" groupingUsed="true" maxIntegerDigits="14" type="currency" currencySymbol="R$" />
				</h:outputText>
			</h:column>

		</t:dataTable>

	</h:column>


</t:dataTable>
		
</f:view>
<%@include file="/paginas/comum/rodape.jsp" %>
</body>
</html>