<%- partial('partials/sidebar', { type: page.type, index: page.index }) %>
<div class="Content js-Content <%- page.type ? page.type + ' with-sidebar' : '' %>">
  <h1><%- page.title %> Example</h1>

  <p>Hey there stranger! Uppy <img src="/images/emojis/dog.png" width="14" align="absmiddle">
    is in the early stages of development and the example section
    is our playground. Things might not yet work, but we're working hard to improve this.</p>
  <p>We're on a monthly release cycle and our latest version is
    <a href="https://github.com/transloadit/uppy/blob/master/CHANGELOG.md#<%- theme.uppy_version_anchor %>">v<%- theme.uppy_version %></a>,
    but the example pages reflect the latest work in our master branch. Here's
    <a href="https://github.com/transloadit/uppy/compare/v<%- theme.uppy_version %>...master">what changed in master since v<%- theme.uppy_version %></a>
    in terms of commits, while the CHANGELOG
    provides a higher level view of this things planned for our
    <a href="https://github.com/transloadit/uppy/blob/master/CHANGELOG.md#next">next release</a>.</p>
  <p><img src="/images/emojis/ok_hand.png" width="14" align="absmiddle"> Files from the examples are uploaded to our test servers and deleted daily.</p>

  <!-- Add textarea already so it's available immediately for logging.
  It is later made visible, and moved into the #console-wrapper to position it in layout how
  you see fit. -->

  <textarea id="console-log" class="Console"></textarea>
  <script>
  console.log = (function (old_function, div_log) {
    return function (text) {
      old_function(text);

      if (text !== (text + '')) {
        text = JSON.stringify(text);
      }

      div_log.value = text + "\n" + div_log.value;
    };
  } (console.log.bind(console), document.getElementById("console-log")));
  </script>

  <%- page.content %>

  <script>
    // #console-log textarea is declared earlier so it's available immediately for logging.
    // Here it is made visible, and moved into the #console-wrapper, so you can position it in the layout how
    // you see fit.
    document.getElementById('console-wrapper').appendChild(document.getElementById('console-log'));
    document.getElementById('console-log').style.display = 'block';
  </script>

  <div class="footer">Caught a mistake or want to contribute to the documentation?
     <a href="https://github.com/transloadit/uppy/blob/master/website/src/<%- page.source %>" target="_blank">Edit/fork this page directly on Github</a>!
  </div>
</div>
