<html>

<body bgcolor="#212127">

	<head>
		<title>All questions</title>
		<meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=0.8" />
		<style>
			body {
				font: normal 14px Verdana;
				color: #999999;
			}

			td {
				font: normal 16px Verdana;
			}

			td {
				font: normal 16px Verdana;
				width: 100%;
			}

			textarea {
				font: normal 14px Verdana;
				color: #999999;
				background-color: #212127;
				width: 100%;
				height: 700
			}

			a {
				color: #9999ff;
			}

			.collapsible {
				background-color: #212127;
				color: #999999;
				cursor: pointer;
				width: 100%;
				border: none;
				text-align: left;
				outline: none;
				font-size: 13px;
			}

            .openall {
				background-color: #212127;
				color: #999999;
				cursor: pointer;
				border: none;
				outline: none;
				font-size: 13px;
            }

			.active,
			.collapsible:hover {
				background-color: #555;
			}

			.content {
				padding: 0 18px;
				display: none;
				overflow: hidden;
				background-color: #212127;
			}
		</style>
	</head>
	<center>
		<h2>
			Ennek az oldalnak a tartalma dinamikusan frissül minden beküldött kérdés után
			</br>
			<%=scount%> tárgy és <%=qcount%> kérdés
		</h2>
		</p>
		<a href="<%=siteurl%>/allqr"> Letöltés </a>
        <button class="openall" onclick="openall()"> Összes kinyitása </button>
	</center>

	<% include aludni.ejs %>

	<% for (var i = 0; i < data.Subjects.length; i++) { %>
      <button
        class="collapsible"
        style='<%= i % 2 === 0 ? "background-color: #2f2f37" : "" %>'
        onmouseenter='mouseEnter(this, <%= i %>)'
        onmouseleave='mouseLeave(this, <%= i %>)'
        > 
		<h2>
			<table id=<%=i%>>
				<td>
					<%=data.Subjects[i].Name %>
				</td>
				<td style="vertical-align:middle;text-align:right">
					<%=data.Subjects[i].length %>
				</td>
			</table>
		</h2>
      </button>
		<div class="content">
			<% var a = data.Subjects[i].toString().split('\n')%>
            <% for (var j = 1; j < a.length; j++) { %>
                <% if (a[j][0] == '?') { %>
                    </br>
                <% } %>
                <%=a[j] %>
                </br>
            <% } %>
		</div>
	<% } %>
    <script>
        var coll = document.getElementsByClassName("collapsible");
        var i;

        for (i = 0; i < coll.length; i++) {
            coll[i].addEventListener("click", function() {
                this.classList.toggle("active");
                var content = this.nextElementSibling;
                if (content.style.display === "block") {
                    content.style.display = "none";
                } else {
                    content.style.display = "block";
                }
            });
        }
        function openall () {
          var coll = document.getElementsByClassName("content");
          var i;
          for (i = 0; i < coll.length; i++) {
            coll[i].style.display = "block";
          }
        }
        function mouseEnter (e, i) {
          e.style.backgroundColor = "#555"
        }
        function mouseLeave (e, i) {
          if (i % 2 == 0) {
            e.style.backgroundColor = "#2f2f37"
          } else {
            e.style.backgroundColor = "#212127"
          }
        }
    </script>
	<% include b.ejs %>
</body>
</html>