{% extends "core/base/no_message_base.html" %}
{% comment %}
SPDX-FileCopyrightText: 2024 Helmholtz-Zentrum Dresden-Rossendorf (HZDR)

SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load static %}
{% block content %}
  <div class="p-5 text-center">
    <div class="container py-3">
      <img src="{% static 'core/img/heliport_wide.svg' %}"
           class="mb-3 w-100"
           alt="HELIPORT logo">
      <p class="mx-auto lead">
        The guidance system HELIPORT <i class="fa-solid fa-helicopter"></i> aims to make the entire life cycle of a
        scientific project findable, accessible, interoperable and reusable according to the
        <a href="https://doi.org/10.1038/sdata.2016.18">FAIR principles</a>.
        In particular, our data management solution deals with the areas from the generation of the data to the
        publication of primary research data, the workflows carried out, and the actual research results.
      </p>
      <div class="d-inline-flex gap-3 mb-5">
        <a class="align-items-center btn btn-primary px-5"
           href="{% url 'core:project_list' %}">
          {% if user.is_authenticated %}
            Go to my projects <i class="fa-solid fa-arrow-right"></i>
          {% else %}
            Sign In <i class="fa-solid fa-arrow-right-to-bracket"></i>
          {% endif %}
        </a>
        <a class="btn btn-outline-secondary px-5" href="{% url 'core:about' %}"><i class="fa-solid fa-info"></i> About HELIPORT</a>
        <a class="btn btn-outline-success px-5" href="{% url 'core:cite' %}"><i class="fa-solid fa-quote-left"></i> Cite HELIPORT</a>
      </div>
    </div>
  </div>
  <div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
    <div class="col">
      <div class="card mb-4 rounded-3 shadow-sm">
        <div class="card-header">
          <h4 class="my-0 fw-normal">
            <i class="fa-solid fa-users"></i> Users
          </h4>
        </div>
        <div class="card-body">
          <h1 class="card-title">
            {{ num_users }} <small class="text-body-secondary fw-light">total</small>
          </h1>
          <p class="card-text">users on this HELIPORT instance</p>
          <img class="w-100"
               alt="Sparkline showing the number of users over time."
               title="Sparkline showing the number of users over time."
               src="{{ sparkline_users }}" />
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card mb-4 rounded-3 shadow-sm">
        <div class="card-header">
          <h4 class="my-0 fw-normal">
            <i class="fa-solid fa-diagram-project"></i> Projects
          </h4>
        </div>
        <div class="card-body">
          <h1 class="card-title">
            {{ num_projects }} <small class="text-body-secondary fw-light">total</small>
          </h1>
          <p class="card-text">projects on this HELIPORT instance</p>
          <img class="w-100"
               alt="Sparkline showing the number of projects over time."
               title="Sparkline showing the number of projects over time."
               src="{{ sparkline_projects }}" />
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card mb-4 rounded-3 shadow-sm">
        <div class="card-header">
          <h4 class="my-0 fw-normal">
            <i class="fa-solid fa-tags"></i> Digital Objects
          </h4>
        </div>
        <div class="card-body">
          <h1 class="card-title">
            {{ num_digital_objects }} <small class="text-body-secondary fw-light">total</small>
          </h1>
          <p class="card-text">digital objects on this HELIPORT instance</p>
          <img class="w-100"
               alt="Sparkline showing the number of digital objects over time."
               title="Sparkline showing the number of digital objects over time."
               src="{{ sparkline_digital_objects }}" />
        </div>
      </div>
    </div>
  </div>
{% endblock content %}