{% extends "base.html" %}

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

{% block title %}| Create a Phenotype {% endblock title %}

{% block indexing_robots %}
  {% with stop_robot_indexing=True %}
    {{ block.super }}
  {% endwith %}
{% endblock indexing_robots %}

{% block container %}
  <!-- Page Stylesheets -->
  {% compress css %}
    <link href="{% sass_src 'scss/pages/select.scss' %}" rel="stylesheet" type="text/css" />
  {% endcompress %}

  <!-- Dependencies -->
  {% compress js %}
  <script type="module" src="{% static 'js/clinicalcode/forms/entitySelector.js' %}"></script>
  {% 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">Create a Phenotype</h2>
        <p class="banner__description">
          Select the type of Phenotype you want to create to start contributing to the Library.
        </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"
        id="group-container">

    </div>
  </main>

  <!-- Entity class template -->
  <template name="group" data-owner="entity-selector">
    <article class="entity-panel">
      <section class="entity-panel__group">
        <h3 class="entity-panel__title">${title}</h3>
        <p class="entity-panel__description">${description}</p>
        <div class="entity-panel__container slim-scrollbar" id="entity-options"></div>
      </section>
    </article>
  </template>

  <!-- Card template -->
  <template name="card" data-owner="entity-selector">
    <article class="entity-panel__card" data-type="${type}" data-id="${id}">
      <div class="entity-panel__card-body">
        <span class="entity-panel__card-hint">${hint}</span>
        <h3 class="entity-panel__card-title">${title}</h3>
        <p class="entity-panel__card-description">${description}</p>
        <div class="entity-panel__card-interface">
          <button class="primary-btn text-accent-darkest bold tertiary-accent"
            aria-label="Select Item" id="select-btn">
            Create
          </button>
        </div>
      </div>
    </article>
  </template>

  <!-- Entity data -->
  <data aria-hidden="true" name="data" data-owner="entity-selector" type="text/json">{% if entity_data %} {{ entity_data|jsonify|striptags }} {% endif %}</data>
{% endblock container %}