<!DOCTYPE html>
<html>
<%- include('../includes/head.ejs') %>
<!-- include another file's content -->

<body>
  <%- include('../includes/containers-start.ejs') %>
  <%- include('../includes/navbar.ejs') %>
  <div class="intros"><%= pageIntro %></div>
  <div class="inner-details">
    <% if (subscribers.length > 0) { %>
  </div><!-- end inner-details -->
  <!-- loop through subscribers via ejs loop -->
  <div id='users-grid-container'>
    <h1 id='users-intro'><%= pageTitle %></h1>
    <div id='users-grid'>
      <div class='row'>
        <div class='user-col'>Name</div>
        <div class='user-col'>Email</div>
        <div class='user-col'>Tag</div>
        <div class='user-col'>Subscription Date</div>
        <div class='user-col view'></div>
      </div>
      <% for (const sub of subscribers) { %>
      <div class='row'>
        <div class='user-col name'><%= sub.name %></div>
        <div class='user-col email'><%= sub.email %></div>
        <div class='user-col tag'><%= sub.tag %></div>
        <div class='user-col date'><%= sub.subDate %></div>
        <div class='user-col view'>
          <a href='/sub/<%= sub._id %>' class='view-sub'>View</a>
        </div>
      </div>
      <% } %>
    </div>
  </div>
  <% } else { %>
  <div id='empty-sub-list'>
    <p>You currently have no subscribers.</p>
  </div>
  </div><!-- end inner-details -->
  <% } %>
  <%- include('../includes/containers-end.ejs') %>
</body>

</html>