<%@ page session="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>Index (${vertaling.afkorting})</title>
<meta name="viewport"
	content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<link rel="stylesheet" href="resources/css/themes/Psalmenweb.min.css" />
<link rel="stylesheet" href="resources/css/psalmenweb.css" />
	
<style type="text/css">
a {
	width: 20%;
}

.ui-btn {
	height: 100px;
	font-size: 60px;
	line-height: 40px;
}
</style>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script
	src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script></head>
<body>

	<div data-role="page" id="myPage" data-theme="a">
		<div data-role="content" data-theme="a">
			<c:forEach items="${letters}" var="letter" varStatus="index">
				<c:if test="${(index.index % 4 == 0) && (index.index > 0)}">
					</div>
				</c:if>
				<c:if test="${index.index % 4 == 0}">
					<div data-role="controlgroup" data-type="horizontal" class="localnav indexknoppengroep">
				</c:if>
				<a href="bijbelindexboeken?start=${letter}&t=${vertaling.id}" data-role="button" data-theme="a" data-ajax="false">${letter}</a>
				&nbsp;
			</c:forEach>		
		</div>
	</div>

</body>
</html>