<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: #232329;
				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: #232329;
			}
            .subjTitle {
              text-align: center;
              margin: 13px;
              font-size: 23px;
            }
		</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.txt"> Letöltés </a> (ctrl-s ha nem tölti le file-ba)
        <button class="openall" onclick="openall()"> Összes kinyitása </button>
	</center>

	<% include aludni.ejs %>

    <% Object.keys(orderedData).sort().forEach((key, i) => { %>
        <table id=<%=i%>>
            <td>
              <div class="subjTitle">
                <%= key %>
              </div>
            </td>
            <td style="vertical-align:middle;text-align:right">
              <%= orderedData[key].reduce((acc, item) => {
                acc += item.Questions.length
                return acc
              }, 0)%>
            </td>
        </table>
      </h2>
      <div>


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


		</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 = "#232329"
          }
        }
    </script>
	<% include b.ejs %>
</body>
</html>