<!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='sub-details-individual'>
    <h1 class="std-intro"><%= pageTitle %></h1>
    <div class='sub-specs'>
      <div class='sub-specs-inner'>
        <div class='sub-spec'>
          <span class='sub-spec-detail'>Name:</span> <span class='sub-spec-value'><%= name %></span>
        </div>
        <div class='sub-spec'>
          <span class='sub-spec-detail'>Email:</span> <span class='sub-spec-value'><%= email %></span>
        </div>
        <div class='sub-spec'>
          <span class='sub-spec-detail'>Tag:</span> <span class='sub-spec-value'><%= tag %></span>
        </div>
        <div class='sub-spec'>
          <span class='sub-spec-detail'>Subscription Date:</span> <span class='sub-spec-value'><%= subDate %></span>
        </div>
        <div class='sub-spec'>
          <span class='sub-spec-detail'>Verified:</span> <span
            class='sub-spec-value'><%= verificationStatus.toString() %></span>
        </div>
      </div>
      <div class='sub-specs-edit'>
        <div class='sub-specs-edit-inner'>
          <h2 class="change-sub-details">Change Subscriber Details:</h2>
          <form method="post" action="/rename-sub" class="sub-details-form">
            <label for="name">Name:</label>
            <input type="text" name="name" id="sub-name">
            <button type="submit" class="btn-std">Change</button>
            <input type="hidden" name="id" value="<%= id %>">
          </form>
          <form action="/delete-sub" method="POST" class='sub-delete-form'>
            <input type="hidden" name="id" value="<%= id %>">
            <button type="submit" class='btn-red'>Delete Subscriber</button>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class='centered-content'>
    <a href='#' class='btn-std edit-sub-btn'>Edit Subscriber</a>
    <a href='/subs' class='btn-std'>Back to Subs</a>
    <script>
      const editBtn = document.querySelector('.edit-sub-btn'),
        editArea = document.querySelector('.sub-specs-edit');

      editBtn.addEventListener('click', function (e) {
        e.preventDefault();
        editArea.classList.toggle('block');

        if (editArea.classList.contains('block')) {
          this.textContent = 'Turn Off Edit Mode';
        } else {
          this.textContent = 'Edit Mode';
        }
      });
    </script>
  </div>
  <%- include('../includes/containers-end.ejs') %>
</body>

</html>