<!DOCTYPE html>
<html lang="ar">
  <head>
    <meta charset="UTF-8" />
    <title>اقتراحات الأصدقاء</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #f4f4f4;
    }
    .all {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      margin-right: 1%;
      margin-left: 1%;
      margin-bottom: 100vh;
    }
    .app {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 1.1rem;
    }
    .ferind {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #f4f4f4;
    }
    p {
      font-size: 1rem;
    }
    h1 {
      margin-top: 2%;
    }
    .ul {
      background: #fff;
      padding: 40px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      text-align: center;
      margin: 0 auto;
      margin-top: 8%;
    }

    .ul button {
      color: white;
      border: none;
      padding: 2px 5px;
      border-radius: 5px;
      background-color: #4682b4;
    }
    .ulone {
      background: #fff;
      padding: 2px 10px 2px 10px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .ulone img {
      width: 60px;
      height: 60px;
    }
    .ultow {
      background: #fff;
      padding: 2px 10px 2px 10px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
    .ultow img {
      width: 60px;
      height: 60px;
    }

    .li {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      align-self: center;
    }
    button {
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 5px;
      background-color: #4682b4;
    }
    img {
      border-radius: 50%;
      width: 80px;
      height: 80px;
      margin-right: 10px;
    }
    .find {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }
  </style>

  <%- include('partials/headerhome') %> <%- include('partials/headeraction') %>

  <body>
    <div class="all">
      <div class="app">
        <h1>اقتراحات الأصدقاء</h1>
        <ul class="ulone">
          <% users.forEach(user => { %>
          <li class="li">
            <img src="<%= user.avatar %>" alt="Avatar" width="50" height="50" />
            <p><%= user.name %></p>
            <p>dev: <%= user.programming_languages %></p>
            <p>country: <%= user.country %></p>
            <form action="/notify/send" method="POST">
              <input type="hidden" name="friendId" value="<%= user.id %>" />
              <button type="submit">add</button>
            </form>
          </li>
          <% }) %>
        </ul>
      </div>
      <div class="ferind">
        <ul class="ul">
          <h1 style="color: #4682b4">الاصدقاء</h1>
          <% users.forEach(user => { %>
          <li class="li">
            <img src="<%= user.avatar %>" alt="Avatar" width="50" height="50" />
            <p><%= user.name %></p>
            <p>dev: <%= user.programming_languages %></p>
            <p>country: <%= user.country %></p>
            <form action="/chat/send" method="POST">
              <input type="hidden" name="friendId" value="<%= user.id %>" />
              <button type="submit">massage</button>
            </form>
            <form action="/user/profile" method="POST">
              <input type="hidden" name="friendId" value="<%= user.id %>" />
              <button type="submit">profile</button>
            </form>
            <form action="/ferind/block" method="POST">
              <input type="hidden" name="friendId" value="<%= user.id %>" />
              <button type="submit">block</button>
            </form>
          </li>
          <% }) %>
        </ul>
      </div>
      <div class="ferind">
        <h1>البحث عن صديق</h1>
        <div class="find">
          <input type="search" name="" id="" />
          <label for="countery">حسب الدولة :</label>
          <select name="countery" id="">
            <option value="sudan">sudan</option>
            <option value="egypt">egypt</option>
          </select>
          <label for="code">حسب لغة البرمجة :</label>
          <select name="code" id="">
            <option value="javascript">javascript</option>
            <option value="php">php</option>
          </select>
          <label for="lang">حسب اللغة :</label>
          <select name="lang" id="">
            <option value="arabic">arabic</option>
            <option value="english">english</option>
          </select>
        </div>
        <h1>الاصدقاء المحظورين</h1>
        <ul class="ultow">
          <% users.forEach(user => { %>
          <li class="li">
            <img src="<%= user.avatar %>" alt="Avatar" width="50" height="50" />
            <p><%= user.name %></p>

            <form action="/ferind/block" method="POST">
              <input type="hidden" name="friendId" value="<%= user.id %>" />
              <button type="submit">unblock</button>
            </form>
          </li>
          <% }) %>
        </ul>
      </div>
    </div>
  </body>
  <%- include('partials/footer') %>
</html>
