{% extends "tutorials/base_tutorials.html" %}

{% set small_footer = True %}

{% set section_title = "Tutorials" %}
{% set section_path = "/tutorials" %}

{% block title %}{{ document["title"] }}{% endblock %}

{% block meta_image %}https://assets.ubuntu.com/v1/ebdfffbf-Aubergine_suru_background.png{% endblock %}

{% block content %}

  <div class="p-strip">
    <div class="row">
      <div class="col-7 col-start-large-5">
        <h1 class="p-heading--2">{{ document.title }}</h1>
      </div>
    </div>
  </div>

  <div class="l-tutorial row">
    <aside class="l-tutorial__sidebar col-4">
      <button type="button"
              class="l-tutorial__nav-toggle p-icon--menu u-hide u-show--small"
              aria-controls="menu-tutorial"
              aria-expanded="false">Toggle tutorial menu</button>
      <ol class="l-tutorial__nav p-stepped-list u-hide--small"
          id="menu-tutorial">
        {% for section in document.sections %}
          <li class="p-stepped-list__item l-tutorial__nav-item">
            <p class="p-stepped-list__title l-tutorial__nav-title u-no-margin--bottom">
              <a class="l-tutorial__nav-link"
                 href="#{{ loop.index }}-{{ section['slug'] }}">{{ section["title"] }}</a>
            </p>
          </li>
        {% endfor %}
      </ol>
    </aside>
    <div class="l-tutorial__content col-8">
      {% for section in document.sections %}
        <section class="l-tutorial-section"
                 id="{{ loop.index }}-{{ section['slug'] }}">
          <h2 class="p-heading--3">{{ loop.index }}. {{ section["title"] }}</h2>

          <article class="l-tutorial-section__content">{{ section.content | safe }}</article>

          {% if loop.last %}
            <div class="l-tutorial__feedback-options">
              <p>Was this tutorial useful?</p>
              <ul class="p-inline-list">
                <li class="p-inline-list__item">
                  <div class="u-inline--child js-feedback-icon">
                    {{ image(url="https://assets.ubuntu.com/v1/aca5f600-Helpful-yes.svg",
                                        alt="Positive response",
                                        height="32",
                                        width="32",
                                        hi_def=True,
                                        attrs={"class": "l-tutorial__feedback-icon", "data-feedback-value": "positive"},
                                        loading="lazy",) | safe
                    }}
                    {{ image(url="https://assets.ubuntu.com/v1/784c0dc9-Helpful-yes-green.svg",
                                        alt="positive",
                                        height="32",
                                        width="32",
                                        hi_def=True,
                                        attrs={"class": "l-tutorial__feedback-icon has-color", "data-feedback-value": "positive"},
                                        loading="lazy",) | safe
                    }}
                  </div>
                </li>
                <li class="p-inline-list__item">
                  <div class="u-inline--child js-feedback-icon">
                    {{ image(url="https://assets.ubuntu.com/v1/5dacff00-Helpful-unsure.svg",
                                        alt="Neutral response",
                                        height="32",
                                        width="32",
                                        hi_def=True,
                                        attrs={"class": "l-tutorial__feedback-icon", "data-feedback-value": "neutral"},
                                        loading="lazy",) | safe
                    }}
                    {{ image(url="https://assets.ubuntu.com/v1/b601b52c-Helpful-unsure-orange.svg",
                                        alt="Neutral response",
                                        height="32",
                                        width="32",
                                        hi_def=True,
                                        attrs={"class": "l-tutorial__feedback-icon has-color", "data-feedback-value": "neutral"},
                                        loading="lazy",) | safe
                    }}
                  </div>
                </li>
                <li class="p-inline-list__item">
                  <div class="u-inline--child js-feedback-icon">
                    {{ image(url="https://assets.ubuntu.com/v1/4ff77e8e-Helpful-no.svg",
                                        alt="Negative response",
                                        height="32",
                                        width="32",
                                        hi_def=True,
                                        attrs={"class": "l-tutorial__feedback-icon", "data-feedback-value": "negative"},
                                        loading="lazy",) | safe
                    }}
                    {{ image(url="https://assets.ubuntu.com/v1/b45bf2a3-Helpful-no-red.svg",
                                        alt="Negative response",
                                        height="32",
                                        width="32",
                                        hi_def=True,
                                        attrs={"class": "l-tutorial__feedback-icon has-color", "data-feedback-value": "negative"},
                                        loading="lazy",) | safe
                    }}
                  </div>
                </li>
              </ul>
            </div>

            <div class="l-tutorial__feedback-result p-notification--positive u-hide">
              <div class="p-notification__content">
                <p class="p-notification__message">Thank you for your feedback.</p>
              </div>
            </div>
          {% endif %}

          <hr class="p-rule" />
          <footer class="l-tutorial-section__footer row">
            <div class="col-6 col-small-2 col-medium-3">
              <a class="l-tutorial__bug-link"
                 href="https://discourse.ubuntu.com{{ document.topic_path }}">
                <small>Suggest changes&nbsp;&rsaquo;</small>
              </a>
            </div>
            <div class="col-8 col-small-2 col-medium-3 u-align--right">
              <div class="l-tutorial__duration">
                <small>
                  <span class="u-hide--small">about</span>
                  {% if section["remaining_duration"] %}
                    {{ section["remaining_duration"] }}
                  {% else %}
                    0
                  {% endif %}
                  minutes to go
                </small>
              </div>
              <div class="l-tutorial__pagination">
                {% if loop.first %}
                  <button class="l-tutorial__pagination-item--prev p-button has-icon u-no-margin--bottom"
                          disabled
                          style="margin-right: 1rem">
                    <i class="p-icon--chevron-down">Previous step</i>
                  </button>
                {% else %}
                  <a href="#{{ loop.index - 1 }}-{{ loop.previtem['slug'] }}"
                     class="l-tutorial__pagination-item--prev p-button has-icon u-no-margin--bottom"
                     style="margin-right: 1rem">
                    <i class="p-icon--chevron-down">Previous step</i>
                  </a>
                {% endif %}

                {% if loop.last %}
                  <button class="l-tutorial__pagination-item--next p-button has-icon u-no-margin--bottom"
                          disabled>
                    <i class="p-icon--chevron-down">Next step</i>
                  </button>
                {% else %}
                  <a href="#{{ loop.index + 1 }}-{{ loop.nextitem['slug'] }}"
                     class="l-tutorial__pagination-item--next p-button has-icon u-no-margin--bottom">
                    <i class="p-icon--chevron-down">Next step</i>
                  </a>
                {% endif %}
              </div>
            </div>
          </footer>
        </section>
      {% endfor %}
    </div>
  </div>

  <script>
    if (window.location.hash == "#0") {
      window.location.hash == "#welcome";
    }
  </script>

  <script>
    (function() {
      var polls = document.querySelectorAll('.poll');

      [].forEach.call(polls, function(poll) {
        var answers = poll.querySelectorAll('[type="radio"]');
        var pollId = poll.getAttribute('data-poll-name');

        [].forEach.call(answers, function(answer) {
          answer.addEventListener('change', function(e) {
            var answerLabel = document.querySelector('label[for="' + e.target.id + '"]');
            var eventLabel = answerLabel.innerText;
            var eventAction = document.getElementById(pollId).innerText;

            dataLayer.push({
              'event': 'GAEvent',
              'eventCategory': 'survey',
              'eventAction': eventAction,
              'eventLabel': eventLabel,
              'eventValue': undefined
            });
          });
        });
      });
    })();
  </script>
{% endblock %}