<!DOCTYPE html>
<html>

<head>
	<title>KWARA STATE COLLEGE OF EDUCATION</title>
	<style>
		body {
			font-family: "Arial Black", Arial, sans-serif;
		}

		.book-cover {
			display: flex;
			flex-direction: row;
			height: 10.11in;
			width: 15.4in;
			background-color: <%=user?.department?.projet_color%>;
			border: 1px solid #ddd;
			padding: 20px;
		}

		.book-cover .left-panel {
			flex: 3;
			flex-direction: column;
			padding: 10px;
			width: 7.5in;
			background-image: url("../../img2/bg.png");
			background-repeat: no-repeat;
			background-position: top;
			background-size: contain;
			background-size: 600px;
			background-color: <%=user?.department?.projet_color%>;
			text-align: center;
			bottom: 0 !important;
			/* border-right: 1px solid yellow; */
		}

		.left {
			margin-top: 90%;
		}

		.book-cover .right-panel {
			flex: 3;
			flex-direction: column;
			padding: 10px;
			width: 7.5in;
			background-image: url("../../img2/bg2-right.png");
			background-repeat: no-repeat;
			background-position: top;
			background-size: contain;
			background-size: 750px;
			text-align: center;
			/* background-color: white; */
			margin-left: 5px;
			/* border-left: 1px solid black; */
		}

		.book-cover h1 {
			font-size: 30px;
			margin-top: 0;
			margin-bottom: 10px;
			color: black;
		}

		.book-cover p {
			font-size: 16px;
			margin-top: 0;
			color: black;
		}

		.text {
			color: black;
		}

		.bottom {
			margin-top: 20%;
		}

		.vertical-text {
			writing-mode: vertical-rl;
			text-orientation: upright;
		}

		h2.text {
			white-space: pre-line;
			width: 630px;
			/* or any other width you prefer */
			word-wrap: break-word;
			margin-left: 20px;
		}

		.center-panel {
			display: grid;
			grid-auto-rows: minmax(min-content, max-content);
			grid-template-columns: auto 1fr;
			padding: 6px;
			width: .4in;
			text-align: center;
			font-size: 23px;
			color: black;
			margin-top: 100px;
		}

		.vertical {
			transform: rotate(180deg);
			writing-mode: vertical-lr;
			text-align: center;
		}
	</style>
</head>

<body>
	<div class="book-cover">
		<div class="left-panel">
			<br><br><br><br>
			<img src="<%= src%>" width="120" height="120">
			<br><br><br>
			<h2 class="text left">KWARA STATE COLLEGE OF EDUCATION, ILORIN. LIBRARY</h2>
			<br><br>
		</div>
		<center>
			<div class="center-panel">
				<% if (user.isUni) { %>
					<div class="vertical"> 2024 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; EKITI STATE 
						UNIVERSITY, ADO EKITI. </div>
					<% } else { %>
						<div class="vertical"> 2024 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; KWARA STATE COLLEGE
							OF
							EDUCATION, ILORIN. </div>
						<% } %>

			</div>
		</center>
		<div class="right-panel">
			<br><br>
			<% if (user.isUni) { %>
				<img src="../../img2/eksu-logo.png" width="130px">
			<% } else { %>
				<img src="../../img2/kp.png" width="130px">
			<% } %>
			
			<br>
			<% if (user.isUni) { %>
				<br>
			<h1 style="color: <%=user?.department?.projet_color%>;" class="text">
				EKITI STATE UNIVERSITY
			</h1>
			<% } %>
			<h2 class="text">
				<%= (user?.department?.name)?.toUpperCase() %> <br><br>
					<%= (topic?.topic)?.toUpperCase() %>
			</h2>
			<br>
			<h3 class="text" style="margin-top: 10px;">BY</h3>
			<% if(groupMembers && groupMembers.length> 0){ %>
				<div class="user-info">
					<div class="user-details">
						<% for (let i=0; i < groupMembers.length ; i++) { %>
							<% if (i % 2===0) { %>
								<h3 style="margin: 5px 0; font-weight: bolder;text-align: center; color:black;">
									<%= (groupMembers[i].username)?.toUpperCase() %>
								</h3>
								<% } %>
									<% } %>
					</div>
					<div class="user-details">
						<% for (let i=1; i < groupMembers.length; i++) { %>
							<% if (i % 2===1) { %>
								<h3 style="margin: 5px 0; font-weight: bolder;text-align: center; color:black;">
									<%= (groupMembers[i].username)?.toUpperCase() %>
								</h3>
								<% } %>
									<% } %>
					</div>
				</div>
				<%}else{%>
					<h2 class="text">
						<%= (user?.lastname)?.toUpperCase() %> <%= (user?.middlename)?.toUpperCase() %> <%= (user?.firstname)?.toUpperCase() %>
					</h2>
					<h3 class="text">
						<%= (user?.username)?.toUpperCase() %>
					</h3>
					<%}%>
						<div class="bottom">
							<% if(groupMembers && groupMembers.length < 1){ %>
								<img src="/avatar/<%= user.photo_path%>" width="120" height="120" style="float: left;">
								<% } %>
									<h3 style="display: inline-block;float: right;color: black;">JULY, 2024</h3>
						</div>
		</div>
	</div>
</body>

</html>