{% extends "credentials/base_cred.html" %}

{% block title %}Canonical Credentials -- Your exams{% endblock %}

{% block meta_description %}
  The Canonical Ubuntu Essentials exams certify knowledge and verify skills in general Linux,
  Ubuntu Desktop, and Ubuntu Server topics.
{% endblock meta_description %}

{% block meta_copydoc %}
  https://docs.google.com/document/d/1QuhO-9FEOGLrYp8bErS_9snqdljl7d6tFAUoNQxoVDQ/edit
{% endblock meta_copydoc %}

{% block content %}

  <section class="p-suru--50-50">
    <div class="row--50-50">
      <div class="col">
        <h1>
          <strong>Your exams</strong>
        </h1>
      </div>
      <div class="col">
        <p>To take an exam, you need to schedule it and log back in during your booked time&nbsp;slot.</p>
        <div class="row--50-50">
          {% if exams|length == 0 %}
            <a href="/credentials/shop"
               class="col p-button--positive u-no-margin--right">Purchase an exam</a>
          {% endif %}
          <a class="col p-button" href="/credentials/redeem">Redeem an exam</a>
        </div>
      </div>
    </div>
  </section>
  <section class="p-strip u-no-padding--top">
    {% if agreement_notification %}
      <div class="row">
        <div class="p-notification--caution is-inline" id="notification">
          <div class="p-notification__content">
            <h5 class="p-notification__title">Attention:</h5>
            <p class="p-notification__message">
              Before you start your exam you need to sign our <a href="/legal/confidentiality-agreement?tfa_7=cue%40canonical.com"
    target="_blank">confidentiality agreement.</a>
            </p>
          </div>
        </div>
      </div>
    {% endif %}
    {% if exams|length == 0 %}
      <caption>
        <div class="p-strip">
          <div class="row">
            <div class="u-align--right col-2 col-medium-2 col-small-1 col-start-large-4">
              <img src="https://assets.ubuntu.com/v1/11b01c59-Security-orange-reverse.png"
                   alt="" />
            </div>
            <div class="u-align--left col-4 col-medium-4 col-small-3">
              <p class="p-heading--4">You have no exams available</p>
              <p>Once you purchase an exam, you can see it here</p>
            </div>
          </div>
        </div>
      </caption>
    {% else %}
      <div class="row">
        <h3>Exam Attempts</h3>
        <table aria-label="Scheduled exams">
          <thead>
            <tr>
              <th>Exam</th>
              <th>Status</th>
              <th>Start time</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for exam in exams %}
              <tr>
                <td>{{ exam["name"] }}</td>
                {% if exam["state"] == "Scheduled" %}
                  <td>
                    {{ exam["state"] | capitalize }}&nbsp;<i class="p-icon--information"
   aria-describedby="scheduled-tooltip-{{ loop.index }}"></i>
                  </td>
                {% else %}
                  <td>{{ exam["state"] | capitalize }}</td>
                {% endif %}
                <td>
                  {{ exam["date"] }}
                  <br />
                  {{ exam["time"] }}
                </td>
                <td>
                  {% for action in exam["actions"] %}
                    <a class="{{ action['button_class'] }}" href="{{ action['href'] }}">{{ action['text'] }}</a>
                  {% endfor %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% endif %}
  </section>
  {% for exam in exams %}
    {% if exam["state"] == "Scheduled" %}
      <div class="p-tooltip--top-left is-detached u-hide"
           id="scheduled-tooltip-{{ loop.index }}">
        <span class="p-tooltip__message" role="tooltip">Exam will be available on scheduled date.</span>
      </div>
    {% endif %}
  {% endfor %}

  <script>
    function setTooltipPosition(trigger, container) {
      const triggerRect = trigger.getBoundingClientRect();
      let tooltipX = triggerRect.x;
      let tooltipY = triggerRect.y;

      if (container.classList.contains('p-tooltip--top-left')) {
        tooltipY = triggerRect.y + 2;
      }

      container.style.left = tooltipX + 'px';
      container.style.top = tooltipY + 'px';
    }

    function handleTooltipEvents(target, tooltipContainers) {
      const trigger = document.querySelector("[aria-describedby='" + target.getAttribute('id') + "']");
      let timeout;
      const showEvents = ['click', 'mouseenter', 'focus'];
      const hideEvents = ['click', 'mouseout', 'blur'];
      let tooltipClickedOpen = false;

      showEvents.forEach(function(event) {
        trigger.addEventListener(event, function() {
          if (event === 'click') {
            tooltipClickedOpen = !tooltipClickedOpen;
          }
          // wait 200ms before showing the tooltip,
          // so we know there is intent
          timeout = setTimeout(function() {
            // hide any tooltips that may still be visible
            tooltipContainers.forEach(function(container) {
              container.classList.add('u-hide');
            });
            target.classList.remove('u-hide');
            setTooltipPosition(trigger, target);
          }, 200);
        });
      });

      hideEvents.forEach(function(event) {
        trigger.addEventListener(event, function(e) {
          if (e.target.parentNode !== trigger) {
            if (tooltipClickedOpen) {
              return;
            } else {
              clearTimeout(timeout);
              target.classList.add('u-hide');
            }
          }
        });
      });

      // Hide the tooltip when the user clicks outside the trigger or presses escape
      ['keyup', 'click'].forEach(function(event) {
        document.addEventListener(event, function(e) {
          if (tooltipClickedOpen) {
            if (e.target !== trigger || e.key === 'Escape') {
              clearTimeout(timeout);
              target.classList.add('u-hide');
              tooltipClickedOpen = false;
            }
          }
        });
      });
    }

    function initDetachedTooltips(selector) {
      const tooltipContainers = [].slice.call(document.querySelectorAll(selector));
      tooltipContainers.forEach(function(target) {
        handleTooltipEvents(target, tooltipContainers);
      });
    }

    document.addEventListener('DOMContentLoaded', function() {
      initDetachedTooltips('[class*="p-tooltip"].is-detached');
    });
  </script>

{% endblock content %}