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

<head>
  <link rel="stylesheet" href="/css/styles.css" />
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>
    <%= thread.title %>
  </title>
  <meta name="description" content="Thread page of Akf-forum!">
  <meta name="author" content="Akif9748">
  <link rel="icon" type="image/x-icon" href="/images/favicon.jpg">

</head>


<body>
  <!-- Navbar: -->
  <a href="/"><img class="logo" src="/images/logo.jpg" alt="AKF-FORUM"></a>
  <br> <button class="buyuk" onclick="window.location.href = '/threads'">THREADS</button>

  <button class="buyuk" onclick="window.location.href = '/search'">SEARCH</button>
  <button class="buyuk" onclick="window.location.href = '/users'">USERS</button>
  <button class="buyuk" onclick="window.location.href = '/threads/open/'">OPEN THREAD</button>
  <h1 style="display:inline; float:right;"><a href=<%=user.getLink() %>> <%= user.name %></a>
    <img class="yuvarlak" src=<%=user.avatar %> alt=<%= user.name %>>
  </h1>
  <hr>


  <!-- Navbar end -->

  <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>


      <!-- This website is powered by AKF-Forum -->
</body>

</html>