<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Do we need additional share metadata included here? -->

    {% include partials/analytics %}

    <title>{{ title }}</title>
    
    {% include partials/header-includes %}

  </head>

  <body>
    <div class="mdl-layout mdl-layout--no-desktop-drawer-button mdl-js-layout mdl-layout--fixed-header">
      {% include partials/header %}
      
      <main class="mdl-layout__content hero-banner">
        <div class="tutorial-page-container mdl-grid">
          <div class="mdl-cell--8-col mdl-cell--8-col-tablet mdl-cell--4-col-phone">
            {% include partials/tutorial-breadcrumbs %}
            {{ content }}
          </div>
          <div class="mdl-cell--4-col hide-me">
            <div class="tutorial-info-container">
              <div class="tutorial-info-header">time to read</div>
              <div class="tutorial-info-copy">{{ time }}</div>
              <div class="tutorial-info-header">takeaways</div>
              <div class="tutorial-info-copy">{{ takeaways }}</div>
            </div>
          </div>
          <div class="tutorial-footer mdl-cell--8-col mdl-cell--8-col-tablet mdl-cell--4-col-phone">
            The Learning Interpretability Tool is being actively developed and documentation is likely to change as we improve the tool. We want to hear from you! Leave us a note, feedback, or suggestion on our <a href="https://github.com/pair-code/lit/issues/new" target="_blank">Github</a>.
          </div>
        </div>

        {% include partials/footer %}
      </main>

    </div>
  </body>

  {% include partials/footer-includes %}
</html>
