{% extends "base.html" %}

{% load static %}
{% load compress %}
{% load sass_tags %}
{% load cl_extras %}
{% load breadcrumbs %}
{% load entity_renderer %}

{% block title %}| Phenotype Moderation {% endblock title %}

{% block container %}
  <!-- Vendor -->
  <script src="{% static 'js/lib/moment.min.js' %}"></script>
  <script src="{% static 'js/lib/simple-datatables/simple-datatables.min.js' %}"></script>

  <!-- Dependencies -->
  {% compress js %}
    <script type="module" src="{% static 'js/clinicalcode/services/collectionService.js' %}"></script>
  {% endcompress %}
  
  <!-- Page Stylesheets -->
  {% compress css %}
    <link href="{% sass_src 'scss/pages/profile.scss' %}" rel="stylesheet" type="text/css" />
  {% endcompress %}

  <!-- Main -->
  <header class="main-header banner">
    <div class="main-header__inner-container main-header__inner-container--constrained-no-pad main-header__inner-container--centred">
      <div class="banner__container">
        <h2 class="banner__title">Phenotype Moderation</h2>
        <p class="banner__description">
          Review content before publication.
        </p>
        <div class="banner__cards">
        </div>
      </div>
    </div>
  </header>

  <main class="main-content">
    <div class="main-content__inner-container main-content__inner-container--constrained main-content__inner-container--centred">
      <article class="profile-collection">
        <section class="profile-collection__inner-container" id="requested">
          <data aria-hidden="true" data-owner="collection-service" page-type="MODERATION_COLLECTIONS" name="requested" type="text/json">
            {% if requested_content %}
              {{ requested_content|jsonify|striptags }}
            {% endif %}
          </data>
          <h3>1. Phenotypes to be Reviewed</h3>
          <p>Phenotypes that are awaiting a review before publication</p>
          <section class="profile-collection__none-available show" id="empty-collection">
            <p class="profile-collection__none-available-message">
              There are no review requests at the moment
            </p>
          </section>
          <div class="profile-collection__table-container" id="requested-area">

          </div>
        </section>
        <section class="profile-collection__inner-container" id="pending">
          <data aria-hidden="true" data-owner="collection-service" page-type="MODERATION_COLLECTIONS" name="pending" type="text/json">
            {% if pending_content %}
              {{ pending_content|jsonify|striptags }}
            {% endif %}
          </data>
          <h3>2. Phenotypes under Review</h3>
          <p>Table that lists all phenotypes that this individual is reviewing</p>
          <section class="profile-collection__none-available show" id="empty-collection">
            <p class="profile-collection__none-available-message">
              There are no pending reviews at the moment
            </p>
          </section>
          <div class="profile-collection__table-container" id="pending-area">

          </div>
        </section>
      </article>
    </div>
  </main>

{% endblock container %}