{% extends "dashboard/base.html" %}

{% block title %} User Approval {% endblock %}

{% block extrastyle %}
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
{% endblock %}

{% block content %}
<style>
/*
  Materialize CSS's 'collection' component doesn't work properly with the
  dark mode setting present in some browsers. To fix this, manually
  override the bg color when the user has their browser set to dark mode.
*/
@media (prefers-color-scheme: dark) {
  .collection-item {
    background-color: var(--body-bg) !important;
  }
}
</style>
<div id="content-main">
  <div>
    <ul class="collection">
      <li class="collection-item">
        <h5 class="title">Email:</h5>
        <p>{{ user.username }}</p>
      </li>
      {% if social_account != None %}
        <a href="https://github.com/{{ social_account.username }}" class="collection-item avatar">
          <img src="https://github.com/{{ social_account.username }}.png" class="circle">
          <h5 class="title">GitHub profile (click to view on GitHub)</h5>
          <p><b>Username</b>: {{ social_account.username }}</p>
          <p><b>Full name</b>: {{ social_account.name }}</p>
          <p><b>Joined GitHub</b>: {{ social_account.created }}</p>
        </a>
      {% endif %}
      <li class="collection-item">
      <h5 class="title">Signup Questionnaire:</h5>
      {% for question, answer in user.metadata.questionnaire_form.items %}
        <b><span class="title">{{ question }}</span></b>
        <p>{{ answer }}</p>
      {% endfor %}
      </li>
    </ul>

    <div style="margin-bottom: 4em;">
      <h5 style="display: inline-block">Current status:
      {% if user.metadata.status == 'APPROVED' %}
        <span class="green-text">
      {% elif user.metadata.status == 'REJECTED' %}
        <span class="red-text">
      {% else %}
        <span class="orange-text">
      {% endif %}
          {{ user.metadata.status }}
        </span>
      </h5>
      <h5>Last changed: {{ user.metadata.modified }}</h5>
    </div>

    <div class="row" style="text-align: center;">
      <div class="col s1"></div>
      <div class="col s4">
        <form method="POST">
          {% csrf_token %}
          <input type="hidden" name="status" value="APPROVED">
          <button
            {% if user.metadata.status == 'APPROVED' %}
              disabled
            {% endif %}
            class="waves-effect waves-light btn-large green accent-5" type="submit">
            <span>APPROVE</span>
          </button>
        </form>
      </div>
      <div class="col s2"></div>
      <div class="col s4">
        <form method="POST">
          {% csrf_token %}
          <input type="hidden" name="status" value="REJECTED">
          <button
            disabled
            id="rejection_btn"
            class="waves-effect waves-light btn-large red accent-5 mb-5" type="submit">
            <span>REJECT</span>
          </button>
          <br /><br /><br />
          <label for="rejection_reason">Rejection reason (optional)</label>
          <input
            id="rejection_reason"
            type="text"
            name="rejection_reason"
            value="{% if user.metadata.rejection_reason != None %}{{ user.metadata.rejection_reason }}{% endif %}"
          >
        </form>
      </div>
      <div class="col s1"></div>
    </div>
  </div>
</div>

<script>
// Event listener that disables the Reject button when no rejection reason is provided
var rejectionReason = document.getElementById('rejection_reason');
rejectionReason.addEventListener('keyup', function (event) {
  var rejection_btn = document.getElementById('rejection_btn');
  if (event.target.value) {
    rejection_btn.removeAttribute('disabled');
  }
  else {
    rejection_btn.setAttribute('disabled', true);
  }
});
</script>
{% endblock %}