<!DOCTYPE html>
<html lang="en">

<%- include("extra/header", {title: "Main page!" }) %>

  <body>

    <%- include("extra/navbar", {user}) %>
     

      <h1 style="font-size: 35px;">
        <%= thread.title %>
      </h1>




      <br>
      <% messages.forEach(message=>{ %>

        <div id=<%="message-" + message.id %> style="border: 2px solid #444444; padding: 5px;">
          <h2>
            <img class="yuvarlak" src=<%=message.author.avatar %> alt=<%= message.author.name %>>
              <a style="  color: #bcbcbc;  " href=<%="/users/" + message.author.id %>> <%= message.author.name %></a>:
          </h2>

          <h2>
            <%= message.content %>
          </h2>
          <form style="text-align:right;display:inline;" action="/message/delete/<%= message.id %>" method="post">
            <button style="display:inline;" class="button" type="submit">DELETE</button>
          </form>


          <form style="display:inline;" action="/message/<%= message.id %>" method="delete">
          </form>
          <form style="text-align:right;" action="/message/react/<%= message.id %>" method="POST">

            <h3 style="display:inline;">
              <%= Object.values(message.react).filter(Boolean).length - Object.values(message.react).filter(x=>
                !x).length %>
            </h3>


            <button style="display:inline;" class="button" name="like" type="submit">+🔼</button>
            <button style="display:inline;" class="button" name="dislike" type="submit">-🔽</button>
            <h3 style="display:inline;">
              <%=new Date(message.time).toLocaleString() %>
            </h3>
          </form>
        </div>

        <br>
        <% }); %>

          <hr>


          <form action="/message" method="POST">
            <textarea rows="4" cols="50" name="content"></textarea>
            <input name="threadID" type="hidden" value="<%= thread.id %>"></input>

            <br>

            <button class="button" type="submit">Send!</button>
          </form>


          <%- include("extra/footer") %>
  </body>

</html>