{% extends 'base.html' %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "Home" %}{% endblock %}

{% block custom_head_js %}
{{ block.super }}
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script type="text/javascript" src="{% static 'js/dashboard-home.js'%}"></script>
{% endblock %}

{% block css %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
{% endblock %}

{% block breadcrumb_nav %}
{% endblock %}

{% block main %}
  <div class="row mt-4">
    <div class="col-xs-12">
      <h1 id="home_greeting">Hello and Welcome!</h1>
      {% if outages|length > 0 %}
        {% for outage in outages %}
          {% if outage.severity >= 2 and outage.end is None %}
            <div class="alert {% if outage.severity == 2 %} alert-warning {% else %} alert-danger {% endif %} fade in">
              <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
              <i class="fa fa-exclamation-circle fa-2x" style="vertical-align: middle;"></i>&nbsp;&nbsp;{{ outage.title }} <a href="{{ HORIZON_CONFIG.OUTAGE_BASE_URL }}{{ outage.id }}" target="_blank" class="alert-link">View Announcement <i class="fa fa-external-link"></i></a>
            </div>
          {% endif %}
        {% endfor %}
      {% endif %}
      <div id="welcome" class="panel panel-primary position-relative">
        <div class="panel-body p-5">
          <div class="row">
            <div class="col-xs-12 hidden-lg">
              <h2>Welcome to the Dashboard!</h2>
              <p class="lead"><em>The Dashboard</em> is your web interface to the <strong>ARDC Nectar Research Cloud</strong> - Australia&apos;s national research cloud, providing computing infrastructure to researchers, giving you access to powerful computing resources without the need to purchase or host your own hardware.</p>
            </div>
            <div class="col-sm-12 col-md-6">
              <iframe id="welcome-video" src="https://www.youtube.com/embed/p-i1W6uFGRA?si=7ifpEfvLxjcs7_qn" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
            </div>
            <div class="col-sm-12 col-md-6">
              <div class="visible-lg">
                <h2>Welcome to the Dashboard!</h2>
                <p class="lead"><em>The Dashboard</em> is your web interface to the <strong>ARDC Nectar Research Cloud</strong> - Australia&apos;s national research cloud, providing computing infrastructure to researchers, giving you access to powerful computing resources without the need to purchase or host your own hardware.</p>
              </div>
              <p>New to Nectar? Don&apos;t worry, we&apos;ve got loads of support arcticles and tutorials to help you along the way. You can learn all about the Nectar Cloud and The Dashboard on the Nectar Support Site and if you need help, you can simply contact our Support team by creating a help request.</p>
              <div id="welcome_buttons" class="my-4">
                <a href="https://support.ehelp.edu.au/" target="_blank" class="btn btn-sm btn-primary">Support Centre</a>
                <a href="https://tutorials.rc.nectar.org.au/" target="_blank" class="btn btn-sm btn-default">Tutorials</a>
                <a href="https://support.ehelp.edu.au/support/solutions/articles/6000156761-learning-and-training-resources/" target="_blank" class="btn btn-sm btn-default">Live Training</a>
              </div>
              <h3>To get started with the Nectar Cloud, we recommend following the <a href="https://tutorials.rc.nectar.org.au/cloud-starter/01-overview" target="_blank">Cloud Starter Series</a> of tutorials.</h3>
            </div>
          </div>
        </div>
        <button class="btn btn-sm btn-default btn-dismiss" id="welcome_dismiss"><i class="fa fa-close"></i> Dismiss</button>
      </div>
    </div>
  </div>
  <section id="banner">
  </section>
  <div class="row">
    <div class="col-sm-12 col-md-8">
      <div class="panel panel-default">
        <div class="panel-heading text-uppercase">Quick Links</div>
        <div class="panel-body">
          <h4>Here are some ways to get started:</h4>
          <div class="row">
            <div class="col-xs-6 col-md-3">
              <h3>Learn</h3>
              <ul class="list-unstyled">
                <li><a href="https://tutorials.rc.nectar.org.au/cloud-starter/01-overview">Tutorial: Cloud Starter Series</a></li>
                <li><a href="https://support.ehelp.edu.au/support/solutions/articles/6000171494-project-allocation-expiry-and-renewal">Learn about allocations</a></li>
                <li><a href="https://support.ehelp.edu.au/support/solutions/articles/6000156761-learning-and-training-resources">Register for live training</a></li>
              </ul>
            </div>
            <div class="col-xs-6 col-md-3">
              <h3>Actions</h3>
              <ul class="list-unstyled">
                <li><a href="{% url 'horizon:project:instances:index' %}">Launch an instance</a></li>
                <li><a href="{% url 'horizon:project:reservations:index' %}">Create a reservation</a></li>
                <li><a href="{% url 'horizon:app-catalog:catalog:index' %}">Deploy an application</a></li>
                <li><a href="{% url 'horizon:allocation:user_requests:index' %}">Request an allocation</a></li>
              </ul>
            </div>
            <div class="col-xs-6 col-md-3">
              <h3>View</h3>
              <ul class="list-unstyled">
                <li><a href="{% url 'horizon:project:overview:index' %}">Compute Overview</a></li>
                <li><a href="{% url 'horizon:project:usage-trend:index' %}">Usage Trend</a></li>
                {% if request.user.project_name|slice:":3" != "pt-" %}
                  <li><a href="{% url 'horizon:project:allocation-usage:index' %}">Allocation Usage</a></li>
                {% endif %}
                <li><a href="{% url 'horizon:identity:members:index' %}">Project Members</a></li>
              </ul>
            </div>
            <div class="col-xs-6 col-md-3">
              <h3>Support</h3>
              <ul class="list-unstyled">
                <li><a href="http://support.nectar.org.au/">Nectar Support Centre</a></li>
                <li><a href="https://tutorials.rc.nectar.org.au/">Browse Tutorials</a></li>
                <li><a href="https://status.rc.nectar.org.au/">Nectar System Status</a></li>
                <li><a href="#" role="button" onclick="FreshworksWidget('open');">Request Help</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading text-uppercase">Usage</div>
        <div class="panel-body">
          <div class="row">
            <div class="col-xs-12">
              <div class="text-center">
                <p class="h5">You have used</p>
                <p id="su_total" class="h1 my-4">0</p>
                <p class="h5">Service Units in the past 3 months.</p>
                <p>To view more usage data, visit the Usage Trend page.</p>
                <a href="{% url 'horizon:project:usage-trend:index' %}" class="btn btn-primary">Usage Trend</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    {% if outages|length > 0 %}
      <div class="col-xs-12 col-sm-6">
        <div class="panel panel-default">
          <div class="panel-heading text-uppercase d-md-flex align-items-center justify-content-between">
            Service Announcements
            <a class="btn btn-sm btn-default" href="https://status.rc.nectar.org.au/" target="_blank">Nectar System Status <i class="fa fa-external-link"></i></a>
          </div>
          <div class="panel-body p-5">
            <ul id="announcements" class="list-unstyled">
              {% for outage in outages %}
              <li class="d-flex py-4">
                <div class="announcement-severity">
                  <img class="severity-dial" src='{% static "img/severity" %}{{ outage.severity }}.svg' />
                </div>
                <div class="announcement-details pl-4">
                  <h5 class="text-uppercase">
                    {% if outage.status_display == "Resolved" %}(Resolved)&nbsp;{% elif outage.status_display == "Completed" %}(Completed)&nbsp;{% endif %}
                    {{ outage.scheduled_display }} Outage
                  </h5>
                  <h4>
                    {{ outage.title }}
                  </h4>
                  <p>
                    <strong>Status:</strong> {{ outage.status_display }}
                    {% if outage.start %}
                      <strong>Start:</strong> {{ outage.start|date:"r" }}
                    {% elif outage.scheduled and outage.schedule_start %}
                      <strong>Start:</strong> {{ outage.schedule_start|date:"r" }} (scheduled)
                    {% endif %}
                    {% if outage.end %}
                      <strong>End:</strong> {{ outage.end|date:"r" }}
                    {% elif outage.scheduled and outage.schedule_end %}
                      <strong>End:</strong> {{ outage.schedule_end|date:"r" }} (scheduled).</p>
                    {% endif %}
                  </p>
                  <a href="{{ HORIZON_CONFIG.OUTAGE_BASE_URL }}{{ outage.id }}" target="_blank">View Announcement <i class="fa fa-external-link"></i></a>
                </div>
              </li>
              {% endfor %}
            </ul>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6">
    {% else %}
      <div class="col-xs-12">
    {% endif %}
      <div class="panel panel-default">
        <div class="panel-heading text-uppercase d-md-flex align-items-center justify-content-between">
          ARDC News
          <a class="btn btn-sm btn-default" href="https://ardc.edu.au/news-and-events/news/" target="_blank">View All News <i class="fa fa-external-link"></i></a>
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-xs-12">
              <div id="ardc_news">
                <div id="news_loader">
                  <div class="loader-inline"><span class="loader fa fa-spinner fa-spin fa-4x text-center"></span><div class="loader-caption h4 text-center">Getting ARDC News&hellip;</div></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    dashboardHome.checkWelcomeStatus();
    dashboardHome.showUsage();
    dashboardHome.showNews();
    dashboardHome.showGreeting("{{ first_name }}");
    dashboardHome.showBanner();
  </script>
{% endblock %}