{% extends "basic/layout.html" %}

{% if dynamic_pages == 'True' %}
  {% set appname = '{{ =request.application }}' %}
{% endif %}


{% if theme_bootswatch_theme %}
  {% set css_files = css_files +
    ['http://netdna.bootstrapcdn.com/bootswatch/2.3.1/' + theme_bootswatch_theme + '/bootstrap.min.css']
  %}
{% endif %}


{%- block doctype -%}
<!DOCTYPE html>
{%- endblock %}

{%- block scripts %}
{# Override the scripts block from sphinx so we can force loading of jquery/underscore/doctools js files #}
{{ js_defer(script_files) }}
{{ super() }}
{%- endblock %}

{# Sidebar: Rework into our Boostrap nav section. #}
{% macro navBar() %}

<!-- Begin navbar -->
<div id="navbar" class="navbar navbar-default navbar-fixed-top" role="navigation">

  <div class="container">

    <div class="navbar-header">
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <button type='button' class='navbar-toggle' data-toggle="collapse" data-target=".navbar-ex1-collapse" aria-label="navbar toggle">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <div>
        {% set logo = '_static/' + (logo if logo else 'img/logo_small.png') %}
        {% if minimal_outside_links != 'True' %}
          <a class="brand-logo" href="/{{appname}}/default/user/login" aria-label="Login"><img src="{{pathto(logo, 1)}}" alt=""></a>
        {% else %}
          <div class="brand-logo"><img src="{{pathto(logo, 1)}}" alt=""></div>
        {% endif %}
        <a class="navbar-brand" href="{{ pathto(master_doc) }}" aria-label="index-page">
          {% if dynamic_pages == 'True' %}
            {% raw %}
            {{ =course_name }}
            {% endraw %}
          {% else %}
          {% if course_title -%}{{ course_title|e }}{%- else -%}{{ course_id|e }}{%- endif -%}
          {% endif %}
        </a>
      </div>
    </div>



    <div class="navbar-collapse collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav navbar-right" >

        <li class="divider-vertical"></li>


        <!-- social media dropdown -->
        {% if minimal_outside_links != 'True' %}
        <li class="dropdown">
          <a class="dropdown-toggle" href="#" data-toggle="dropdown">
            <i class="glyphicon glyphicon-globe" style="opacity: 0.9"><span class="visuallyhidden" aria-label="Social">Social</span></i>
          </a>
          <ul class="dropdown-menu social-menu">
              <li>
                <div>
                  <b>Runestone in social media:</b>
                </div>
                <a href="https://twitter.com/iRunestone">Follow @iRunestone</a>
                <a href="https://www.facebook.com/RunestoneInteractive">Our Facebook Page</a>
              </li>

              <li class="divider"></li>
              <li>
                <div>
                  <b>Help support us:</b>
                </div>
                <div>
                    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                  <input type="hidden" name="cmd" value="_s-xclick">
                  <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----MIIHNwYJKoZIhvcNAQcEoIIHKDCCByQCAQExggEwMIIBLAIBADCBlDCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb20CAQAwDQYJKoZIhvcNAQEBBQAEgYAcrkqh1hn3lYqIpfXxNqe1T82EhXzCJGy1yMAmklpyZshyMkfDGe1Bhx+iwyGeoYRTTyphFmP+9M3NyO0+Q5XdHxgZPx/zYjjBxlZHgEV6jhE8bN2fHkkPf0VHfz0a0QQylQOPlKiOTZV7B37Jpk6yM47oVZ1tG/KNm0NkfmB76DELMAkGBSsOAwIaBQAwgbQGCSqGSIb3DQEHATAUBggqhkiG9w0DBwQIi0GmFfOlcjuAgZBbYOo9UO+CpMQa+PYqwsUmUnJvXIImeMeNI3KVTUx5Cfk9gNMo3WzPeiB5IqZo9nRAQ0mf1qL2ecLeB5tidM+lgBUhOxfj3/FecpnVFa0263gp4g+PLw8jzhvVRdUon1K3SeO1Rzh23fIRKwnrD6btt73uwtj0sl3tGd8qz+6GIcwPDdRk9VcUffiBJT/ZagKgggOHMIIDgzCCAuygAwIBAgIBADANBgkqhkiG9w0BAQUFADCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb20wHhcNMDQwMjEzMTAxMzE1WhcNMzUwMjEzMTAxMzE1WjCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb20wgZ8wDQYJKoZIhvcNAQEBBQADgY0AMIGJAoGBAMFHTt38RMxLXJyO2SmS+Ndl72T7oKJ4u4uw+6awntALWh03PewmIJuzbALScsTS4sZoS1fKciBGoh11gIfHzylvkdNe/hJl66/RGqrj5rFb08sAABNTzDTiqqNpJeBsYs/c2aiGozptX2RlnBktH+SUNpAajW724Nv2Wvhif6sFAgMBAAGjge4wgeswHQYDVR0OBBYEFJaffLvGbxe9WT9S1wob7BDWZJRrMIG7BgNVHSMEgbMwgbCAFJaffLvGbxe9WT9S1wob7BDWZJRroYGUpIGRMIGOMQswCQYDVQQGEwJVUzELMAkGA1UECBMCQ0ExFjAUBgNVBAcTDU1vdW50YWluIFZpZXcxFDASBgNVBAoTC1BheVBhbCBJbmMuMRMwEQYDVQQLFApsaXZlX2NlcnRzMREwDwYDVQQDFAhsaXZlX2FwaTEcMBoGCSqGSIb3DQEJARYNcmVAcGF5cGFsLmNvbYIBADAMBgNVHRMEBTADAQH/MA0GCSqGSIb3DQEBBQUAA4GBAIFfOlaagFrl71+jq6OKidbWFSE+Q4FqROvdgIONth+8kSK//Y/4ihuE4Ymvzn5ceE3S/iBSQQMjyvb+s2TWbQYDwcp129OPIbD9epdr4tJOUNiSojw7BHwYRiPh58S1xGlFgHFXwrEBb3dgNbMUa+u4qectsMAXpVHnD9wIyfmHMYIBmjCCAZYCAQEwgZQwgY4xCzAJBgNVBAYTAlVTMQswCQYDVQQIEwJDQTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEUMBIGA1UEChMLUGF5UGFsIEluYy4xEzARBgNVBAsUCmxpdmVfY2VydHMxETAPBgNVBAMUCGxpdmVfYXBpMRwwGgYJKoZIhvcNAQkBFg1yZUBwYXlwYWwuY29tAgEAMAkGBSsOAwIaBQCgXTAYBgkqhkiG9w0BCQMxCwYJKoZIhvcNAQcBMBwGCSqGSIb3DQEJBTEPFw0xMzExMDMxMzQxMzFaMCMGCSqGSIb3DQEJBDEWBBRDJF8w+zsMr7FSk+pwinB5f5D4rzANBgkqhkiG9w0BAQEFAASBgHw1LMHpkpaqHIvDGdFE0eG+2mZlmMnUeDCBhQlbc7QMzFQYKTV94NfaebBO4PmNdADe1rq4WidSRZZbE7CzkX9IGENYnBTWY0hb2l0lGdGrJdGeWyV3ekg9WVaFMMumrekds96h3Cx7dGz2kWDzIai2iEXE/qoE+xpkyXAYZNV3-----END PKCS7-----
                  ">
                  <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                  <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
                  </form>

                </div>
              </li>
          </ul>
        </li>
        {%- endif -%}
        <!-- end social media dropdown -->

        <li class="divider-vertical"></li>

        <!-- search dropdown -->
        <li class="dropdown">
          <a class="dropdown-toggle" href="#" data-toggle="dropdown">
            <i class="glyphicon glyphicon-search" style='opacity:0.9;'><span class="visuallyhidden" aria-label="Search">Search</span></i>
          </a>
          <ul class='dropdown-menu'>
            {% if 'overview' in course_id %}
                <li><a href='{{ pathto(master_doc) }}/overview.html' aria-label="index-page">Table of Contents</a></li>
            {% else: %}
                <li><a href='{{ pathto(master_doc) }}' aria-label="index-page">Table of Contents</a></li>
            {% endif %}
            <li><a href='{{ pathto("genindex.html",1) }}'>Book Index</a></li>
            <li class="divider"></li>
            <li style="width: 240px;">
              <form class="navbar-search" style="margin:10px;" action="{{ pathto('search') }}" method="get">
                <div class="input-group">
                  <input type="text" class="form-control" name="q" placeholder="Search this book" />
                  <span class="input-group-btn">
                    <button class="btn btn-primary" style="margin:0;" type="submit">
                      <i class="glyphicon glyphicon-search"></i>
                    </button>
                  </span>
                </div><!-- /input-group -->
                <input type="hidden" name="check_keywords" value="yes" />
                <input type="hidden" name="area" value="default" />
              </form>
            </li>
          </ul>
        </li>
        <!-- end search dropdown -->

        <li class="divider-vertical"></li>

        {% if use_services == 'true' %}
        <!-- user account dropdown -->
        <li class="dropdown">
          <a class="dropdown-toggle" href="#" data-toggle="dropdown">
            <i class="glyphicon glyphicon-user" style="opacity:0.9;"><span class="visuallyhidden" aria-label="User">User</span></i>
          </a>
          <ul class="dropdown-menu user-menu">
            <li><span class='loggedinuser'></span></li>
            <li class="divider"></li>
            <li><a href='/{{appname}}/assignments/chooseAssignment.html'>Assignments</a></li>
            <li><a href='/{{appname}}/assignments/practice'>Practice</a></li>
            <li class="divider"></li>
            {% if minimal_outside_links != 'True' %}
            <li><a href='/{{appname}}/default/courses'>Change Course</a></li>
			      <li class="divider"></li>
            <li id="ip_dropdown_link"><a href='/{{appname}}/admin/index'>Instructor's Page</a></li>
            {% endif %}
            <li><a href='/{{appname}}/dashboard/studentreport'>Progress Page</a></li>
            <li class="divider"></li>
            {% if minimal_outside_links != 'True' %}
            <li><a href="/{{appname}}/default/user/profile" id="profilelink">Edit Profile</a></li>
            <li><a href="/{{appname}}/default/user/change_password" id="passwordlink">Change Password</a></li>
            <li><a href="/{{appname}}/default/user/register" id="registerlink">Register</a></li>
            {% endif %}
            <li class='loginout'><a href='#'>Login</a></li> <!-- correct link populated by addNavbarLoginLink() -->
			<!-- dark mode toggle -->
             <li><label class="theme-switch" for="checkbox">
					  <input type="checkbox" id="checkbox" onchange="runestoneComponents.switchTheme()" />
							<div class="slider round"></div>
					</label>Dark Mode</li>
			 </ul>
        </li>
        <!-- end user account dropdown -->
        {% endif %}
        <li class="divider-vertical"></li>
        <!-- <li id="scratch_ac_link"><a href="javascript:ACFactory.toggleScratchActivecode()">Scratch ActiveCode</a></li> -->

        <!-- <li class="dropdown">             -->
          <li id="scratch_ac_link" class="dropdown"><a href="javascript:runestoneComponents.popupScratchAC()">
              <i class="glyphicon glyphicon-pencil" style="opacity:0.9;"><span class="visuallyhidden" aria-label="Scratch Activecode" >Scratch Activecode</span></i></a></li>
        <!-- </li> -->

        <li class="divider-vertical"></li>

        {% if minimal_outside_links != 'True' %}
        <!-- help menu dropdown -->
        <li class="dropdown">
          <a class="dropdown-toggle" href="#" data-toggle="dropdown">
            <i class="glyphicon glyphicon-question-sign" style="opacity:0.9;"><span class="visuallyhidden" aria-label="Help">Help</span></i>
          </a>
          <ul class="dropdown-menu user-menu">
            <li><a href='http://runestoneinteractive.org/pages/faq.html'>FAQ</a></li>
            <li><a href='https://runestone.academy/runestone/static/instructorguide/index.html'>Instructors Guide</a></li>
            <li class="divider"></li>
            <li><a href='http://runestoneinteractive.org'>About Runestone</a></li>
            <li><a href='/{{ appname }}/default/reportabug?course={{ course_id }}&page={{ pathto(pagename,1) }}'>Report A Problem</a></li>
          </ul>
        </li>
        <!-- end help menu dropdown -->

        <li class="divider-vertical"></li>
      {% endif %}
      </ul>

      <ul class="nav navbar-nav">
        <li class="divider-vertical"></li>
        {% block sidebartoc %}
          {% if dynamic_pages == 'True': %}
            {% include "subchaptoc.html" %}
          {% endif %}
          <li class="divider-vertical"></li>
        {% endblock %}
        <!-- {% block sidebarrel %}
          {% include "relations.html" %}
        {% endblock %}-->
        {% if theme_source_link_position == "nav" %}
          <li>{% include "sourcelink.html" %}</li>
        {% endif %}
      </ul>
      </div> <!-- navbar-collapse -->
    </div> <!-- navbar -->
  </div> <!-- container -->
{% endmacro %}

{%- block extrahead %}

{% if not favicon %}
<link rel="shortcut icon" href="/{{appname}}/static/favicon.ico" type="image/ico" />
{% endif %}

<script>
  eBookConfig = {};
  {% if dynamic_pages == 'True' %}
    {% raw %}
    eBookConfig.useRunestoneServices = true;
    eBookConfig.host = '';
    eBookConfig.app = eBookConfig.host + '/' + '{{= request.application }}';
    eBookConfig.course = '{{= course_name }}';
    eBookConfig.basecourse = '{{= base_course }}';
    eBookConfig.isLoggedIn = {{= is_logged_in}};
    eBookConfig.email = '{{= user_email }}';
    eBookConfig.isInstructor = {{= is_instructor }};
    eBookConfig.username = '{{= user_id}}';
    eBookConfig.readings = {{= readings}};
    eBookConfig.activities = {{= XML(activity_info) }}
    eBookConfig.downloadsEnabled = {{=downloads_enabled}};
    eBookConfig.allow_pairs = {{=allow_pairs}}
    eBookConfig.enableCompareMe = {{=enable_compare_me }};
    {% endraw %}
  {% else %}
    eBookConfig.useRunestoneServices = {% if use_services == 'true' -%}true{%- else -%}false{%- endif -%};
    eBookConfig.host = '{{course_url}}' || 'http://127.0.0.1:8000';
    eBookConfig.app = eBookConfig.host+'/{{appname}}';
    eBookConfig.course = '{{course_id}}';
    eBookConfig.basecourse = '{{ basecourse }}';
    eBookConfig.isLoggedIn = false;
    eBookConfig.enableCompareMe = eBookConfig.useRunestoneServices;
  {% endif %}
  eBookConfig.ajaxURL = eBookConfig.app+'/ajax/';
  eBookConfig.logLevel = {{loglevel}};
  eBookConfig.loginRequired = {{login_required}};
  eBookConfig.build_info = "{{build_info}}";
  eBookConfig.python3 = {{ python3 }};
  eBookConfig.acDefaultLanguage = '{{ default_ac_lang }}' ? '{{ default_ac_lang }}' : 'python'
  eBookConfig.runestone_version = '{{ runestone_version }}';
  eBookConfig.jobehost = '{{jobe_server}}';
  eBookConfig.proxyuri_runs = '{{proxy_uri_runs}}';
  eBookConfig.proxyuri_files = '{{proxy_uri_files}}';
  eBookConfig.enable_chatcodes = {{enable_chatcodes}} ? {{ enable_chatcodes }} : false;

</script>

<!-- Ad Serving Headers Only serve ads to Anonymous Users -->
{% if dynamic_pages == 'True' %}
    {% raw %}
        {{ if response.serve_ad and settings.adsenseid: }}
         <script data-ad-client="{{=settings.adsenseid}}" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        {{ pass }}
    {% endraw %}
{% endif %}

{% endblock %}

{# Silence the sidebar's, relbar's #}
{% block header %}{% endblock %}
{% block sidebar1 %}{% endblock %}
{% block sidebar2 %}{% endblock %}
{% block relbar1 %}{% endblock %}
{% block relbar2 %}{% endblock %}
{% block sidebarsourcelink %}{% endblock %}

{%- block content %}
{{ navBar() }}

<div class="container" id="continue-reading"></div>

<div class="container" id="main-content" role="main">
  
<!-- Ad Serving for Runestone Campaign -->
{% if dynamic_pages == 'True' %}
    {% raw %}
        {{ if settings.num_banners > 0 and settings.show_rs_banner: }}
         <div style="width: 100%;">
            <a href="/runestone/default/donate?banner={{=banner_num}}">
            <img class="runestone-banner"
                 src="/runestone/static/images/RunestoneBanner{{=banner_num}}.png"
                 alt="Please Support Runestone"
                 style="display: block; width: 728px; margin-left: auto; margin-right: auto; margin-top: 10px;">
            </a>
         </div>
        {{ pass }}
    {% endraw %}
{% endif %}

  {% block body %}
  {% endblock %}
  <div id="scprogresscontainer">
    You have attempted <span id="scprogresstotal"></span> of <span id="scprogressposs"></span> activities on this page <div id="subchapterprogress" aria-label="Page progress"></div>
  </div>

  {% include "subchapter.html" %}
  
</div>
{%- endblock %}

{%- block footer %}
<footer class="footer">
  <div class="container">
    <p class="pull-right">
      {% if use_services == 'true' %}
      {% if minimal_outside_links != 'True' %}
      <span id='numuserspan'></span><span class='loggedinuser'></span>
      {% endif %}
      {% endif %}
      | <a href="#">Back to top</a>
      {% if theme_source_link_position == "footer" %}
        <br />
        {% include "sourcelink.html" %}
      {% endif %}
    </p>
    <p>
    {%- if show_copyright %}
      {%- if hasdoc('copyright') %}
        {% trans path=pathto('copyright'), copyright=copyright %}&copy; <a href="{{ path }}">Copyright</a> {{ copyright }}.{% endtrans %}
      {%- else %}
        {% trans copyright=copyright %}&copy; Copyright {{ copyright }}.{% endtrans %}
      {%- endif %}
    {%- endif %}
    {%- if last_updated %}
      {% trans last_updated=last_updated|e %}Last updated on {{ last_updated }}.{% endtrans %}<br/>
    {%- endif %}
    {%- if show_sphinx %}
      {% trans sphinx_version=sphinx_version|e %}Created using <a href="http://runestoneinteractive.org/">Runestone</a> {{ runestone_version }}.{% endtrans %}
    {%- endif %}
    </p>
  </div>
</footer>


{% if dynamic_pages == 'True' %}
  {% raw %}
    {{ if request.application == 'runestone':}}
      <script>
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', '{{ =settings.google_ga }}']);
        _gaq.push(['_trackPageview']);

        (function() {
          var ga = document.createElement('script'); ga.async = true;
          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
      </script>
    {{ pass }}
  {% endraw %}

  {% if minimal_outside_links != 'True' %}
    <script type="application/json" class="js-hypothesis-config">
    {
      "showHighlights": false
    }
    </script>

    <script async src="https://hypothes.is/embed.js"></script>
    <!--provide space to prevent hypothes.is sidebar from obscuring content-->
    <style>@media screen and (max-width:767px) { body { padding-right: 21px; }}</style>

  {% endif %}
{% endif %}

<script> 
  window.addEventListener('load', (event) => {
    runestoneComponents.getSwitch(); 
  });
</script>

{% endblock %}