<!DOCTYPE html>
<html lang="en">
  <head>
    <%- include('../partials/head'); %>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
  </head>
  <body class="container" id="users-index">
    <header><%- include('../partials/header'); %></header>

    <main>
      <section class="text-center">
        <noscript>
          <a class="weatherwidget-io" target="_blank" href="https://forecast7.com/en/52d374d90/amsterdam/" data-label_1="AMSTERDAM" data-label_2="WEATHER" data-theme="original" >Bekijk het weer in Amsterdam</a>
        </noscript>
        <p id="temperature"></p>
        <p id="location"></p>
      </section>

      <section class="row d-flex justify-content-center">
        <% if (users.length > 0) { %> <% users.forEach(user => { %>

        <article class="col-3 m-3 box card text-center shadow p-3">
          <div
            class="card-header"
            style="background-color: <%= user.personalColor %>"
          >
          </div>
          <div class="card-body">
            <h5 class="card-title">
             <%= user.username %>
            </h5>
            <h6><%= user.city %></h6>
            <a href="/users/<%= user._id %> " class="btn btn-primary"
              >Bekijk profiel</a
            >
          </div>
          <div class="card-footer text-muted"><a href="mailto:<%= user.email %>">neem contact op</a>
          </div>
        </article>
        <% }); %> <% } else { %>

        <div class="col-12">No Users to be shown</div>

        <% } %>
      </section>
    </main>
    <footer><%- include('../partials/footer'); %></footer>
    <script src="/dist/js/weatherapi.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
      // Listen for message parameter
      const urlParams = new URLSearchParams(window.location.search);
      const message = urlParams.get('message');
    
      if (message) {
        // Display toastr notification
        toastr.success(message);
      }
    </script>
  </body>
</html>
