<!DOCTYPE html>
<html>
<head>
    <title>Project Cover</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: "blue"; */
            background-color: <%= 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: 650px;
            /* background-color: "blue"; */
            background-color: <%= department?.projet_color%>;
            text-align: center;
            border-right: 1px solid white;
        }

        .left {
            margin-top: 93%;
        }

        .book-cover .right-panel {
            flex: 3;
            padding: 60px;
            width: 7.5in;
            background-image: url("../../img2/bg2.png");
            background-repeat: no-repeat;
            background-position: top;
            background-size: contain;
            background-size: 700px;
            background-color: <%= department?.projet_color%>;
            text-align: center;
            border-left: 1px solid white;
        }

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

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

        .text {
            color: <%= department?.projet_color %>;
        }

        .bottom {
            margin-top: 15%;
        }

        .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: gold;
            margin-top: 100px;
        }

        .vertical {
            transform: rotate(180deg);
            writing-mode: vertical-lr;
            text-align: center;
        }

        .right-panel .user-info {
            display: flex;
            flex-wrap: wrap;
			
        }

        .right-panel .user-info .user-details {
            flex: 1;
        }

    </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=" left" style="color:gold">KWARA STATE POLYTECHNIC <br> LIBRARY</h2>
            <br><br>
        </div>
        <center>
            <div class="center-panel">
                
                <div class="vertical"> 
                    <%= user?.lastname %> <%= user?.firstname.charAt(0)%>. <%= user?.middlename?.charAt(0)%>&nbsp;  &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;
                   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2024 &nbsp; &nbsp;</div>
            </div>
        </center>
        <div class="right-panel">
            <img src="../../img2/kp.png">
            <br>
            <h2 class="text">THE DEPARTMENT OF <%= (user?.department)?.toUpperCase()  %> <br ><br> <%= (user?.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:gold;"><%= (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:gold;"><%= (groupMembers[i]?.username)?.toUpperCase()  %></h3>
					<% } %>
				<% } %>
                </div>
            </div>
			<%}else{%>
				<h2 class="text"><%= (user?.lastname)?.toUpperCase()  %> <%= (user?.othername)?.toUpperCase()  %>  <%= (user?.firstname)?.toUpperCase()  %> </h2>
				<h3 class="text"><%= (user?.username)?.toUpperCase()  %></h3>
			<%}%>
            <div class="bottom">
                <% if(groupMembers && groupMembers.length < 1){ %>
                <img src="<%= user.photo_path%>" width="120" height="120" style="float: left;">
				<% } %>
                <h3 style="display: inline-block;float: right;" class="text">JULY, 2024</h3>
            </div>
        </div>
    </div>
</body>
</html>
