{% extends "base.html" %}
{% load static i18n %}
{% load socialaccount %}

{% block content %}

  <div class="tab-content mt-1">
    <div class="tab-pane active">
      <div class="jumbotron">
        <div class="container">
          <h1 class="display-4">Welcome to <b>contact.&#8203;engineering</b></h1>
          <p class="lead">This is a web-based application that allows you to:
            Store and organize surface measurements,
            characterize surface topography,
            analyze contact properties and
            (if you wish) share your data with collaborators or even publish your datasets.
          </p>
          <div class="alert alert-primary" role="alert">
            For more information on this site and details about the analysis methods used,
            <a class="alert-link" target="_blank" href="https://doi.org/10.1088/2051-672X/ac860a">
              please read the accompanying open access paper</a>.
          </div>
          {#  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p> #}
          <div class="row">
            {% with request.user.is_anonymous as is_anonymous %}
              {% if is_anonymous %}
              <div class="col-xl-3 col-sm-6 mb-3">
                <div class="card text-white bg-secondary o-hidden h-100">
                  <div class="card-body">
                    <div class="card-body-icon">
                      <i class="fa fa-fw fa-user"></i>
                    </div>
                    <div class="me-2">
                      <div class="welcome-page-statistics">{{ num_users }}</div> registered users.
                    </div>
                  </div>
                </div>
              </div>
              {% endif %}

              <div class="col-xl-3 col-sm-6 mb-3">
                <a href="{% url 'ce_ui:select' %}" class="card-link text-decoration-none">
                  <div class="card text-white bg-primary o-hidden h-100">
                    <div class="card-body">
                      <div class="card-body-icon">
                        <i class="fa fa-fw fa-gem"></i>
                      </div>
                      <div class="me-2">
                      {% if not is_anonymous %}You have{% endif %}
                        <div class="welcome-page-statistics">{{ num_surfaces }}</div> digital surface twins.
                      </div>
                    </div>
                  </div>
                </a>
              </div>

              <div class="col-xl-3 col-sm-6 mb-3">
                <a href="{% url 'ce_ui:select' %}" class="card-link text-decoration-none">
                  <div class="card text-white bg-danger o-hidden h-100">
                    <div class="card-body">
                      <div class="card-body-icon">
                        <i class="fa fa-fw fa-edit"></i>
                      </div>
                      <div class="me-2">
                      {% if not is_anonymous %}You have{% endif %}
                        <div class="welcome-page-statistics">{{ num_topographies }}</div> individual measurements.
                      </div>
                    </div>
                  </div>
                </a>
              </div>

              <div class="col-xl-3 col-sm-6 mb-3">
                <a href="{% url 'ce_ui:select' %}" class="card-link text-decoration-none">
                  <div class="card text-white bg-warning o-hidden h-100">
                    <div class="card-body">
                      <div class="card-body-icon">
                        <i class="fa fa-chart-area"></i>
                      </div>
                      <div class="me-2">
                      {% if not is_anonymous %}You have{% endif %}
                        <div class="welcome-page-statistics">{{ num_analyses }}</div> computed analyses.
                      </div>
                    </div>
                  </div>
                </a>
              </div>

              {% if not is_anonymous %}
              <div class="col-xl-3 col-sm-6 mb-3">
                <a href="{% url 'ce_ui:select' %}" class="card-link text-decoration-none">
                  <div class="card text-white bg-success o-hidden h-100">
                    <div class="card-body">
                      <div class="card-body-icon">
                        <i class="fa fa-fw fa-share-alt"></i>
                      </div>
                      <div class="me-2">
                        You have access to
                        <div class="welcome-page-statistics">{{ num_shared_surfaces }}</div> digital twins of other users.
                      </div>
                    </div>
                  </div>
                </a>
              </div>
              {% endif %}
            {% endwith %}
          </div>
          <!-- /.row -->
        </div>
      </div>


      <div class="container">
        <!-- Example row of columns -->
        <div class="row">
          {% if not request.user.is_anonymous %}
          <div class="col-md-3">
            <h4>Digital surface twins</h4>
            <p>A <em>digital surface twin</em> represents the real-life surface you are measuring, together with its
              descriptive metadata. If you make multiple measurements on the same real-world surface (even using
              different techniques), you can collect all the <em>measurements</em> together in a single <em>digital
                surface twin</em>.
            </p>
          </div>
          <div class="col-md-3">
            <h4>Measurements</h4>
            <p>For each <em>digital surface twin</em>, you must upload one or more <em>measurements</em>. These represent each
              individual measurement you performed. You can save metadata for each one, and perform basic pre-analysis.
            </p>
          </div>
          <div class="col-md-3">
            <h4>Analysis workflows</h4>
            <p>A number of <em>analysis workflows</em>, such as computing the power-spectral density or the real area
            of contact, are performed on-demand on all uploaded <em>measurements</em>.
                Multiple analyses can be averaged to create, for example, the joint power-spectral density of a <em>digital surface twin</em>.
            </p>
          </div>
           <div class="col-md-3">
            <h4>Sharing & publishing</h4>
             <p><em>Digital surface twins</em> can be <em>shared</em> with others for collaboration. You decide whether
               your collaborators can modify them or not.</p>
             <p>Digital surface twins can also be <em>published</em> to make them citable and accessible for everyone.</p>
          </div>
          {% else %}
          <div class="col-md-12">
            <h2>Login via ORCID</h2>
            <p>
              Please allow the ORCID site to authenticate yourself to contact.engineering.
              If you don't have an ORCID account yet, you will be able to register.
            </p>
            <p>
              <a id="orcid-log-in-link" class="btn btn-secondary" href="{% provider_login_url 'orcid' method="oauth2" %}">
                Sign in using your ORCID account
              </a>
            </p>
          </div>
          {% endif %}
        </div>
      </div> <!-- /container -->

    </div>
  </div>


{% endblock %}
