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

{% block title %}Canonical credentials -- Exam content{% 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/1T1K7jyUa32-OURET6AjN2CD_c80TaUmj9EncYT70PNw/edit?usp=sharing
{% endblock meta_copydoc %}

{% block content %}

  <section class="p-suru--fan-top is-dark">
    <div class="row">
      <div class="col-6">
        <h1>Quick Certifications</h1>
        <p class="p-heading--4">Specifically designed with expert input to "QC" the most relevant industry skills today</p>
        <p>
          <a href="/credentials/shop" class="p-button--positive">Get certification</a>
        </p>
      </div>
    </div>
  </section>
  <div class="p-tabs">
    <div class="row">
      <div class="p-tabs__list u-no-margin--bottom"
           role="tablist"
           aria-label="CUE Syllabus">
        {% for exam in syllabus_data %}
          <div class="p-tabs__item">
            <button class="p-tabs__link"
                    role="tab"
                    aria-controls="{{ exam['exam_name'] }}-tab"
                    id="{{ exam['exam_name'] }}"
                    {% if (exam_name and exam_name!=exam["exam_name"]) or (not exam_name and loop.index!=1) %}aria-selected="false"{% else %}aria-selected="true"{% endif %}>
              {{ exam["exam_name"] }}
            </button>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
  <section class="p-strip u-no-padding--top">
    <div class="u-fixed-width">
      {% for exam in syllabus_data %}
        <div tabindex="0"
             role="tabpanel"
             id="{{ exam['exam_name'] }}-tab"
             aria-labelledby="{{ exam['exam_name'] }}"
             {% if (exam_name and exam_name!=exam["exam_name"]) or (not exam_name and loop.index!=1) %}hidden="hidden"{% endif %}>
          <div class="row" style="padding: 4rem 0rem;">
            <div class="col-6">
              <p class="p-heading--5">OVERVIEW</p>
            </div>
            <div class="col-6">
              <p class="u-no-margin--bottom">{{ exam['exam_description'] }}</p>
            </div>
          </div>
          <ol class="p-stepped-list--detailed">
            {% for chapter in exam["syllabus"] %}
              <li class="p-stepped-list__item">
                <h2 class="p-stepped-list__title">{{ chapter['chapter_title'] }}</h2>
                <div class="p-stepped-list__content">
                  <ul>
                    {% for section in chapter['chapter_sections'] %}<li>{{ section }}.</li>{% endfor %}
                  </ul>
                </div>
              </li>
            {% endfor %}
          </ol>
        </div>
      {% endfor %}
    </div>
    <div class="u-fixed-height">
      <div class="row">
        <a href="/credentials/schedule" style="display: none;">
          <button class="p-button--positive">Schedule your exam now</button>
        </a>
      </div>
    </div>
  </section>
  <script>
    (function() {
      var keys = {
        left: 'ArrowLeft',
        right: 'ArrowRight',
      };

      var direction = {
        ArrowLeft: -1,
        ArrowRight: 1,
      };

      /**
        Attaches a number of events that each trigger
        the reveal of the chosen tab content
        @param {Array} tabs an array of tabs within a container
      */
      function attachEvents(tabs) {
        tabs.forEach(function(tab, index) {
          tab.addEventListener('keyup', function(e) {
            if (e.code === keys.left || e.code === keys.right) {
              switchTabOnArrowPress(e, tabs);
            }
          });

          tab.addEventListener('click', function(e) {
            e.preventDefault();
            setActiveTab(tab, tabs);
          });

          tab.index = index;
        });
      }

      /**
        Determine which tab to show when an arrow key is pressed
        @param {KeyboardEvent} event
        @param {Array} tabs an array of tabs within a container
      */
      function switchTabOnArrowPress(event, tabs) {
        var pressed = event.code;

        if (direction[pressed]) {
          var target = event.target;
          if (target.index !== undefined) {
            if (tabs[target.index + direction[pressed]]) {
              tabs[target.index + direction[pressed]].focus();
            } else if (pressed === keys.left) {
              tabs[tabs.length - 1].focus();
            } else if (pressed === keys.right) {
              tabs[0].focus();
            }
          }
        }
      }

      /**
        Cycles through an array of tab elements and ensures
        only the target tab and its content are selected
        @param {HTMLElement} tab the tab whose content will be shown
        @param {Array} tabs an array of tabs within a container
      */
      function setActiveTab(tab, tabs) {
        tabs.forEach(function(tabElement) {
          var tabContent = document.getElementById(tabElement.getAttribute('aria-controls'));

          if (tabElement === tab) {
            tabElement.setAttribute('aria-selected', true);
            tabContent.removeAttribute('hidden');
          } else {
            tabElement.setAttribute('aria-selected', false);
            tabContent.setAttribute('hidden', true);
          }
        });
      }

      /**
        Attaches events to tab links within a given parent element,
        and sets the active tab if the current hash matches the id
        of an element controlled by a tab link
        @param {String} selector class name of the element
        containing the tabs we want to attach events to
      */
      function initTabs(selector) {
        var tabContainers = [].slice.call(document.querySelectorAll(selector));

        tabContainers.forEach(function(tabContainer) {
          var tabs = [].slice.call(tabContainer.querySelectorAll('[aria-controls]'));
          attachEvents(tabs);
        });
      }

      document.addEventListener('DOMContentLoaded', function() {
        initTabs('[role="tablist"]');
      });
    })();
  </script>

{% endblock %}