<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="manifest" href="/manifest/manifest.json">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <meta property="og:site_name" content="PacificDreams" />
  <meta property="og:title" content="PacificDreams - Archive" />
  <meta property="og:description" content="Kişisel dev bir klip arşivi.">
  <meta property="og:image" content="https://cdn.glitch.global/5245369d-a5f6-4972-8b73-ac2f2abfa5df/cropped_image.png?v=1728308280766" />

  <title>PacificDreams - Archive</title>

  <link rel="shortcut icon" href="/img/logo.ico" type="image/x-icon">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/notifications.css">
  <link rel="stylesheet" href="/css/all.css">
</head>
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
  <%- include('layout/header.ejs') %>

  <div class="container mt-5">
    <div class="row d-flex justify-content-center flex-wrap">

      <% data.forEach((db) => { %>
      <div class="col-md-4 col-sm-6 profile-card">
        <img src="<%= db.profile.avatar_url %>" alt="Profile 1" class="profile-pic">
        <h3><%= db.profile.name %></h3>
        <p><%= db.profile.about %></p>
	      <button onclick="location.href = '/profile/<%= db.profile.id %>'" class="cybr-btn buton-red">
          Klipler<span aria-hidden>_</span>
          <span aria-hidden class="cybr-btn_glitch"><%= db.profile.name %></span>
          <span aria-hidden class="cybr-btn_tag">PDA</span>
        </button>
      </div>
      <% }); %>

      <div class="col-md-4 col-sm-6 profile-card">
        <img src="https://pacificdreams.fun/img/dazz.png" alt="Profile 1" class="profile-pic">
        <h3>???</h3>
        <p><%- terhis() %></p>
        <button class="cybr-btn buton-blue">
          Coming<span aria-hidden>_</span>
          <span aria-hidden class="cybr-btn_glitch">Soon</span>
          <span aria-hidden class="cybr-btn_tag">PDA</span>
        </button>
      </div>

    </div>
  </div>

  
  <div class="container">
    <h2 class="text-center mb-4">Keşfet</h2>
    <div class="mb-4 text-center">
      <input type="text" id="searchInput" class="form-control" placeholder="Klipler arasında ara..." oninput="filterVideos()">
    </div>
    <div class="videos-grid">

    </div>

    <div id="loading" class="d-flex justify-content-center" style="display: none;">
      <div class="spinner-grow m-5" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>

  </div>


  <footer style="background-color: #1e1e1e;" class="footer bg-primary bg-dark text-light text-center py-3 mt-5">
    <p class="mb-0">© 2024 Pacific Dreams. Tüm hakları saklıdır. Design by MrBARO</p>
  </footer>

  <script src="/socket.io/socket.io.js"></script>
  <script src="/js/service-worker.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  <% if (user) { %>
  <script>
    const userName = document.getElementById("localUserName").innerText;
  </script>
  <% } %>
  <script src="/js/script.js"></script>
  <script src="/js/index.js"></script>
</body>
</html>
