<!DOCTYPE html>
<!--
Copyright (c) Jupyter Development Team.
Distributed under the terms of the Modified BSD License.
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="google" content="notranslate" />
    <meta http-equiv="Content-Language" content="en" />

    <title>Clone Landing page</title>
    <style type="text/css" media="screen">
      body {
        background-color: #f1f1f1;
        margin: 0;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      }

      .container { margin: 50px auto 40px auto; width: 600px; text-align: center; }

      h1 { letter-spacing: -1px; line-height: 60px; font-size: 60px; font-weight: 100; margin: 0px; text-shadow: 0 1px 0 #fff; }
      p { color: rgba(0, 0, 0, 0.5); margin: 10px 0 10px; font-size: 18px; font-weight: 200; line-height: 1.6em;}

      @media
      only screen and (-webkit-min-device-pixel-ratio: 2),
      only screen and (   min--moz-device-pixel-ratio: 2),
      only screen and (     -o-min-device-pixel-ratio: 2/1),
      only screen and (        min-device-pixel-ratio: 2),
      only screen and (                min-resolution: 192dpi),
      only screen and (                min-resolution: 2dppx) {
      }

      p {
        text-align: left;
      }

      pre {
        text-align: left;
        white-space: pre-wrap;       /* css-3 */
        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
        white-space: -pre-wrap;      /* Opera 4-6 */
        white-space: -o-pre-wrap;    /* Opera 7 */
        word-wrap: break-word;
      }

      h1 {
        margin-bottom: 1em;
      }

      button {
        font-size: 25px;
      }

    </style>
  </head>
    <script>
      window.onload = function() {
        var getCookieByName = function(name) {
          // originally from https://github.com/jupyter/notebook/blob/master/notebook/static/base/js/utils.js#L800-L804
          // from tornado docs: http://www.tornadoweb.org/en/stable/guide/security.html
          var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
          return r ? r[1] : undefined;
        };

        var button = document.getElementById("mybutton");
        button.onclick = function(event) {
          var post_json = {{ post_model | tojson(indent=2)}}
          var xsrf_token = getCookieByName("_xsrf");
          var xhr = new XMLHttpRequest();
          xhr.responseType = "json";
          xhr.onload = function(e) {
            if (xhr.readyState === 4) {
              if (xhr.status === 200) {
                window.location.href = `{{ redirect_contents_url }}/${
                  xhr.response.path
                }`;
              } else {
                console.error(xhr);
              }
            }
          };
          xhr.onerror = function(e) {
            console.error(xhr.statusText);
          };

          xhr.open("POST", "{{ clone_api_url }}", true);
          xhr.withCredentials = true;
          xhr.setRequestHeader("X-XSRFToken", xsrf_token);
          xhr.setRequestHeader(
            "Content-Type",
            "application/json;charset=UTF-8"
          );
          xhr.send(JSON.stringify(post_json));
        };
      };
    </script>
  </head>

  <body>
    <div class="container">
        <h1>Clone Confirmation</h1>
        <p>Preparing to copy the following file to your notebook's working directory:</p>
        <pre>{{ source_description }}</pre>
        <p>Only copy code from locations that you recognize and trust.</p>

        <button id="mybutton" onclick="alert('did not get replaced')">
          Clone
        </button>
    </div>
  </body>
</html>
