<!doctype html>
<html>
<head>
    <title>{{ title }}</title>
    {% assets 'main_css' %}
        <link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}">
    {% endassets %}
    <link href="//cdn.rawgit.com/noelboss/featherlight/1.7.6/release/featherlight.min.css" type="text/css" rel="stylesheet" />
    <link rel="shortcut icon" href="https://us.sunpower.com/sites/sunpower/files/favicon.ico">
    <link rel="stylesheet" type="text/css" href={{ url_for('static', filename='css/fontello.css') }}>
    <link rel="stylesheet" type="text/css" href={{ url_for('static', filename='css/animation.css') }}>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"></script>
    {% if context['google_analytics_token'] %}
        <script>
            (function (i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r;
                i[r] = i[r] || function () {
                            (i[r].q = i[r].q || []).push(arguments)
                        }, i[r].l = 1 * new Date();
                a = s.createElement(o),
                        m = s.getElementsByTagName(o)[0];
                a.async = 1;
                a.src = g;
                m.parentNode.insertBefore(a, m)
            })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

            ga('create', '{{ context['google_analytics_token'] }}', 'auto');
            ga('send', 'pageview');

        </script>
    {% endif %}
</head>
<body>
<header>
    <div class="group">
        <h1>{{ title }}</h1>
        <a href="{{ url_for('helix_documentation') }}" class="back button" target="_blank">Documentation</a>
    </div>
    <img src={{ url_for('static', filename='images/sp_logo.png') }}>
</header>
<div class="content">
    <div class="navigation_header">
        {% for step_number, step_name, step_link, step_completed in context["steps"] %}
            {% if step_completed is not none %}
                <div id="step_{{ step_number }}"
                     class="nav_step {{ 'active' if context['current_step'] == step_number }} {{ 'completed' if step_completed }}">
                    <div class="step_line">
                        <div class="line"></div>
                        <div class="circle">
                            <i class="icon-ok"></i>
                        </div>
                        <div class="line"></div>
                    </div>

                    {{ step_name }}
                </div>
            {% endif %}
        {% endfor %}
    </div>
    {% block contents %}{% endblock %}
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
{% if context['javascripts'] %}
    {% for script in context['javascripts'] %}
        {% if script.startswith('http') %}
            <script type="text/javascript" src={{ script }}></script>
        {% else %}
            <script type="text/javascript"
                    src={{ url_for('static', filename='javascripts/' + script + '.js') }}></script>
        {% endif %}
    {% endfor %}
{% endif %}
</body>
</html>
