{% extends "base.html" %}
{% load static %}
{% load compress %}
{% load sass_tags %}
{% load entity_renderer %}

{% block title %}| Home{% endblock title %}

{% block container %}

{% compress css %}
  <link href="{% sass_src 'scss/pages/home/base.scss' %}" rel="stylesheet" type="text/css" />
{% endcompress %}

{% compress js %}
  <script type="text/javascript" src="{% static 'js/clinicalcode/components/homeCounter.js' %}"></script>
{% endcompress %}

<header class="main-header main-header--collapse homepage-hero-banner">
  <div
    class="main-header__inner-container main-header__inner-container--constrained main-header__inner-container--centred">
    <section class="homepage-hero">
      <div class="homepage-hero__container">
        <div class="homepage-hero__details">
          <h1>
            Concept Library
          </h1>
          <h2>
            The Concept Library is a system for storing, managing, sharing, and documenting clinical code lists in health research.
          </h2>
          <p>
            Our goal is to create a system that describes research study designs in a machine-readable format to facilitate rapid study development;
            higher quality research; easier replication; and sharing of methods between researchers, institutions, and countries.
          </p>
        </div>
        <form class="homepage-hero__search" action="{% url 'search_phenotypes' %}" method="GET">
          <input class="homepage-hero__search-input" aria-label="Search Phenotypes" type="text"
            id="data-search" name="search" placeholder="Search..." minlength="3">
          <button class="homepage-hero__search-icon" tabindex="0" 
            name="page" value="1" aria-label="Go to Phenotype Search">
          </button>
        </form>
      </div>
      <img class="homepage-hero__image" draggable="false" />
    </section>
  </div>
</header>

<main class="main-content">
  <div
    class="main-content__inner-container main-content__inner-container--fill-width main-content__inner-container--centred">

    <!-- Statistics -->
    <section class="homepage-statistics homepage-statistics--inner-padding homepage-statistics--bg-gradient">
      <div class="homepage-statistics__group homepage-statistics--constrained">
        <header class="homepage-statistics__header">
          <h3 class="homepage-statistics__header-title">
            You will find...
          </h3>
        </header>
        <div class="homepage-statistics__container">
          <div class="homepage-statistics__card">
            <div class="homepage-statistics__card-content">
              <header class="homepage-statistics__card-header">
                <p>
                  Phenotypes
                </p>
                <p id="entity-counter" x-value="{{ published_phenotype_count }}" x-init="countup">
                  {{ published_phenotype_count|stylise_number }}
                </p>
              </header>
              <p class="homepage-statistics__card-text">
                A Phenotype defines how to measure real-world attributes of human health in data
              </p>
            </div>
          </div>
          <div class="homepage-statistics__card">
            <div class="homepage-statistics__card-content">
              <header class="homepage-statistics__card-header">
                <p>
                  Concepts
                </p>
                <p id="entity-counter" x-value="{{ published_concept_count }}" x-init="countup">
                  {{ published_concept_count|stylise_number }}
                </p>
              </header>
              <p class="homepage-statistics__card-text">
                Concepts are individual lists of clinical codes defining a condition, treatment, and so forth
              </p>
            </div>
          </div>
          <div class="homepage-statistics__card">
            <div class="homepage-statistics__card-content">
              <header class="homepage-statistics__card-header">
                <p>
                  Data Sources
                </p>
                <p id="entity-counter" x-value="{{ datasources_component_count }}" x-init="countup">
                  {{ datasources_component_count|stylise_number }}
                </p>
              </header>
              <p class="homepage-statistics__card-text">
                Data sources are datasets against which phenotypes may be defined - for example, 
                routinely collected health datasets.
              </p>
            </div>
          </div>
          <div class="homepage-statistics__card">
            <div class="homepage-statistics__card-content">
              <header class="homepage-statistics__card-header">
                <p>
                  Clinical Codes
                </p>
                <p id="entity-counter" x-value="{{ published_clinical_codes }}" x-init="countup">
                  {{ published_clinical_codes|stylise_number }}
                </p>
              </header>
              <p class="homepage-statistics__card-text">
                Clinical codes are the 'words' in standardized languages used to create electronic health records
              </p>
            </div>
          </div>
          <div class="homepage-statistics__card">
            <div class="homepage-statistics__card-content">
              <header class="homepage-statistics__card-header">
                <p>
                  Clinical Terminologies
                </p>
                <p id="entity-counter" x-value="{{ clinical_terminologies }}" x-init="countup">
                  {{ clinical_terminologies|stylise_number }}
                </p>
              </header>
              <p class="homepage-statistics__card-text">
                Clinical Coding Systems are the languages used to capture electronic health records 
                in a standardized format
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Brands -->
    <section class="homepage-about homepage-about--inner-padding homepage-about--constrained">
      <div class="homepage-about__list">
        {% for obj in known_brands %}
          <div class="homepage-about__brand">
            <div class="homepage-about__brand-item">
              <div class="homepage-about__brand-icon">
                <img src="{% static 'img/brands/'|add:obj.name|add:'/apple-touch-icon.png' %}" />
              </div>
              <div class="homepage-about__brand-details">
                <h4>
                  {{ obj.name }}
                </h4>
                <p>
                  {{ obj.description }}
                </p>
              </div>
            </div>
            <div class="homepage-about__brand-footer">
              <a class="homepage-about__brand-anchor" href="/{{ obj.name }}">
                View Site 
                <span class="homepage-about__brand-anchor-icon"></span>
              </a>
            </div>
          </div>
        {% endfor %}
      </div>
      <div class="homepage-about__info">
        <h3 class="homepage-about__info-title">
          What do we do?
        </h3>
        <p>
          The Concept Library is an open source software application enabling researchers to create, 
          document and share definitions and algorithms that are used in health data research.
          This tool serves as a key enabler to the open research agenda, driving efficient, high 
          quality, and repeatable research.  
        </p>
        <p>
          For example, the <a href="https://www.go-fair.org/fair-principles/">FAIR principles</a> state that 
          digital assets used in research should be <em>"Findable, Accessible, Interoperable, and Reusable"</em>.
          The Library implements a solution to those goals within the electronic phenotype space. 
        </p>
        <p>
          Originally developed by the SAIL Databank team, the Concept Library has been adopted as 
          a sharing solution by multiple organizations, including Health Data Research UK. 
          A multi-institutional, interdisciplinary team is responsible for ongoing development.
        </p>

        {% if not CLL_READ_ONLY %}
          <div class="homepage-about__info-buttons">
            <a class="secondary-btn text-accent-darkest bold bubble-accent" aria-label="Contact Us"
              id="contact-btn" href="{% url 'contact_us' %}">
              Get in touch
            </a>
          </div>
        {% endif %}
      </div>
    </section>

    <!-- Features -->
    <section class="homepage-features homepage-features--inner-padding homepage-features--constrained">
      <header class="homepage-features__header">
        <h3 class="homepage-features__header-title">
          Our 
          <span class="homepage-features__header-title homepage-features__header-title-highlight">
            Features
          </span>
        </h3>
      </header>
      <div class="homepage-features__container">
        <div class="homepage-features__image show" id="fade-item">
          <img draggable="false"/>
        </div>
        
        <div class="homepage-features__list">
          <div class="homepage-features__item show" id="fade-item">
            <span class="homepage-features__item-icon build"></span>
            <div class="homepage-features__details">
              <span class="homepage-features__details-title">
                Build
              </span>
              <span class="homepage-features__details-text">
                Build codelists from our wide range of coding systems to define your phenotypes and concepts.
              </span>
            </div>
          </div>
          <div class="homepage-features__item show" id="fade-item">
            <span class="homepage-features__item-icon repository"></span>
            <div class="homepage-features__details">
              <span class="homepage-features__details-title">
                Repository
              </span>
              <span class="homepage-features__details-text">
                Store code lists along with metadata that captures important information about quality, author, etc.
              </span>
            </div>
          </div>
          <div class="homepage-features__item show" id="fade-item">
            <span class="homepage-features__item-icon version"></span>
            <div class="homepage-features__details">
              <span class="homepage-features__details-title">
                Versioning
              </span>
              <span class="homepage-features__details-text">
                Store version history and provide a way to unambiguously reference a particular version of a code list.
              </span>
            </div>
          </div>
          <div class="homepage-features__item show" id="fade-item">
            <span class="homepage-features__item-icon algorithm"></span>
            <div class="homepage-features__details">
              <span class="homepage-features__details-title">
                Algorithms
              </span>
              <span class="homepage-features__details-text">
                Provides programmatic interaction with codelists, and allows users to build their study's cohort.
              </span>
            </div>
          </div>
          <div class="homepage-features__item show" id="fade-item">
            <span class="homepage-features__item-icon share"></span>
            <div class="homepage-features__details">
              <span class="homepage-features__details-title">
                Sharing
              </span>
              <span class="homepage-features__details-text">
                Provide a mechanism for sharing code lists between projects and organizations.
              </span>
            </div>
          </div>
          <div class="homepage-features__item show" id="fade-item">
            <span class="homepage-features__item-icon review"></span>
            <div class="homepage-features__details">
              <span class="homepage-features__details-title">
                Review
              </span>
              <span class="homepage-features__details-text">
                Allow clinicians and other team members to review codelists.
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Carousel -->
    <section class="homepage-carousel">
      <header class="homepage-carousel__header">
        <h3 class="homepage-carousel__header-title">
          Get Started
        </h3>
      </header>
      <div class="homepage-carousel__container">
        <div class="homepage-carousel__items">
          <div class="homepage-carousel__item">
            <span class="homepage-carousel__item-subtitle">
              Explore Phenotypes
            </span>
            <span class="homepage-carousel__item-text">
              View the Library's Phenotypes.
            </span>
            <a class="secondary-btn text-accent-darkest bold bubble-accent" aria-label="Search Phenotypes"
              id="explore-btn" href="{% url 'search_phenotypes' %}">
              Search
            </a>
          </div>
          {% if not CLL_READ_ONLY %}
            <div class="homepage-carousel__item">
              <span class="homepage-carousel__item-subtitle">
                Create a Phenotype
              </span>
              <span class="homepage-carousel__item-text">
                Start here to contribute to the Library.
              </span>
              <a class="secondary-btn text-accent-darkest bold bubble-accent" aria-label="Create a Phenotype" 
                id="create-btn" href="{% url 'create_phenotype' %}">
                Create
              </a>
            </div>
          {% endif %}
        </div>
      </div>
    </section>

    <!-- Principles -->
    <section class="homepage-principles homepage-principles--inner-padding homepage-principles--constrained">
      <header class="homepage-principles__header">
        <h3 class="homepage-principles__header-title">
          <span class="homepage-principles__header-title homepage-principles__header-title-highlight">
            Key
          </span>
          Principles
        </h3>
      </header>
      <div class="homepage-principles__container">
        <div class="homepage-principles__principle">
          <div class="homepage-principles__details">
            <p class="homepage-principles__details-text">
              The Library stores phenotyping algorithms, metadata and tools only. No data is stored in the Library.
            </p>
          </div>
        </div>
        <div class="homepage-principles__principle">
          <div class="homepage-principles__details">
            <p class="homepage-principles__details-text">
              Phenotype definitions will be assigned a unique Digital Object Identifier (DOI) 
              to facilitate identification of the phenotype.
            </p>
          </div>
        </div>
        <div class="homepage-principles__principle">
          <div class="homepage-principles__details">
            <p class="homepage-principles__details-text">
              Ideally, phenotypes that are deposited in the Library will have undergone some form of 
              peer-review to assess validity and quality either through peer-reviewed publication or 
              some other means of sharing the definition(s).
            </p>
          </div>
        </div>
        <div class="homepage-principles__principle">
          <div class="homepage-principles__details">
            <p class="homepage-principles__details-text">
              Users should cite the Phenotype Library in all publications,
              presentations and reports as follows: “HDR UK CALIBER Phenotype Library https://portal.caliberresearch.org/”.
            </p>
          </div>
        </div>
        <div class="homepage-principles__principle">
          <div class="homepage-principles__details">
            <p class="homepage-principles__details-text">
              All material deposited in the Library remain the intellectual property of the research group who created the phenotype(s)
              &#8208; the default licensing agreement that information is available under is the Creative Commons Attribution 4.0 (CC-A).
            </p>
          </div>
        </div>
        <div class="homepage-principles__principle">
          <div class="homepage-principles__details">
            <p class="homepage-principles__details-text">
              The aim of the Library is not to standardize or harmonize disease definitions,
              therefore several phenotypes may be stored for the same condition and the onus is on
              individual researchers to explore which phenotypes they wish to use.
            </p>
          </div>
        </div>
      </div>
    </section>

  </div>
</main>
{% endblock container %}