{% extends "base.html" %}

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

{% block title %}| My Collection {% 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>
    <script type="module" src="{% static 'js/clinicalcode/components/toastNotification.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">My Collection</h2>
        <p class="banner__description">
          View content owned by or shared with you.
        </p>
        <div class="banner__cards">
          <div class="hstack-cards-banner hstack-cards-banner-justify-content-space-evenly slim-scrollbar">
            {% if not CLL_READ_ONLY %}
              {% url 'create_phenotype' as create_url %}
              <article class="referral-card referral-card referral-card-fill-area-evenly bright-accent referral-card-shadow referral-card-border-radius referral-card-no-margin">
                <div class="referral-card__header">
                  <a class="referral-card__title" href="{{ create_url }}">Create a Phenotype<span class="referral-card__title-icon"></span></a>
                </div>
                <div class="referral-card__body">
                  <p>Start here to contribute to the Library.</p>
                </div>
              </article>
            {% endif %}
            {% url 'search_phenotypes' as search_url %}
            <article class="referral-card referral-card referral-card-fill-area-evenly bright-accent referral-card-shadow referral-card-border-radius referral-card-no-margin">
              <div class="referral-card__header">
                <a class="referral-card__title" href="{{ search_url }}">Search Phenotypes<span class="referral-card__title-icon"></span></a>
              </div>
              <div class="referral-card__body">
                <p>Find Phenotypes within the Library.</p>
              </div>
            </article>
          </div>
        </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="content">
          <data aria-hidden="true" data-owner="collection-service" page-type="PROFILE_COLLECTIONS" name="content" type="text/json">
            {% if content %}
              {{ content|jsonify|striptags }}
            {% endif %}
          </data>
          <h3>1. My Phenotypes</h3>
          <p>Phenotypes that you own or have access to.</p>
          <section class="profile-collection__none-available show" id="empty-collection">
            <p class="profile-collection__none-available-message">
              You haven't published anything yet
            </p>
          </section>
          <div class="profile-collection__table-container" id="published-area">

          </div>
        </section>
        <section class="profile-collection__inner-container" id="archived">
          <data aria-hidden="true" data-owner="collection-service" page-type="PROFILE_COLLECTIONS" name="archived" type="text/json">
            {% if archived_content %}
              {{ archived_content|jsonify|striptags }}
            {% endif %}
          </data>
          <h3>2. Archived Phenotypes</h3>
          <p>Content that has been marked as archived is still present on the system but is hidden by default.</p>
          <section class="profile-collection__none-available show" id="empty-collection">
            <p class="profile-collection__none-available-message">
              You haven't archived any content yet
            </p>
          </section>
          <div class="profile-collection__table-container" id="archived-area">
            
          </div>
        </section>
      </article>
    </div>
  </main>

  {% if not CLL_READ_ONLY %}
    <template id="archive-form">
      {% include "components/forms/archive.html" %}
    </template>
  {% endif %}

{% endblock container %}