<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="pagedtable-1.1/pagedtable.css">
    <script language="javascript" src="pagedtable-1.1/pagedtable.js"></script>
    <link rel="stylesheet" href="highlight.js-9.15.9/qtcreator_light.css">
    <script src="highlight.js-9.15.9/highlight.js"></script>
    <style>
      body {
         display: flex;
         flex-direction: column;
      }
      .pin-section {
        border-left: solid 6px #dddddd;
        padding: 4px 4px 4px 10px;
      }
      .pin-download { margin-bottom: 4px; }
      .pin-code { margin: -16px 0 -40px 0; }
      .pin-preview {
        flex-grow: 1;
        display: flex;
      }
      .pin-toggle {
        display: inline;
        padding-left: 6px;
      }
      .pin-toggle > div {
        position: relative;
        display: table-cell;
        padding: 6px 12px 6px 12px;
        color: #888;
        cursor: pointer;
      }
      .pin-toggle > div.pin-selected {
        color: #FFF;
        background: #75aadb;
        border-radius: 4px;
      }
      h3 {
        font-weight: normal;
        color: #888;
        margin: 2px 0 6px 0;
      }
    </style>
  </head>
  <body>
    <div class="pin-section">
      <h3>Download Pin</h3>
      <div class="pin-download">
        {{files_html}}
      </div>
    </div>
    <br>
    <script type="text/javascript">
      function pin_code_toggle(show, hide) {
        document.getElementById(hide).style.display = "none";
        document.getElementById(show).style.display = "block";
        document.getElementById(hide + "-btn").className = "pin-toggle";
        document.getElementById(show + "-btn").className = "pin-toggle pin-selected";
      }
    </script>
    <div class="pin-section">
      <h3 style="display: inline-block">
        Use Pin from
        <div class="pin-toggle">
          <div id="pin-r-btn" class="pin-toggle pin-selected" onclick="pin_code_toggle('pin-r','pin-python')">R</div>
          <div id="pin-python-btn" class="pin-toggle" onclick="pin_code_toggle('pin-python','pin-r')">Python</div>
        </div>
      </h3>
      <pre id="pin-r" class="pin-code">
        <code class="r"># Register RStudio Connect
library(pins)
board_register("rsconnect", server = "{{server_name}}")

# Retrieve Pin
{{retrieve_pin}}
        </code>
      </pre>
      <pre id="pin-python" class="pin-code" style="display: none">
        <code class="python"># Register RStudio Connect
import pins
pins.board_register("rsconnect", server = "{{server_name}}")

# Retrieve Pin
pins.pin_get("{{account_name}}/{{pin_name}}", board = "rsconnect")
        </code>
      </pre>
    </div>
    <script type="text/javascript">
      hljs.registerLanguage("r", highlight_r);
      hljs.registerLanguage("python", highlight_python);

      hljs.initHighlightingOnLoad();
    </script>
    <br>
    <div class="pin-section" style="display: flex; flex-grow: 1; flex-direction: column;{{data_preview_style}}">
      <h3>Preview Pin</h3>
      <div class="pin-preview">
        <div data-pagedtable style="flex-grow: 1; margin-bottom: 2px;">
          <script data-pagedtable-source type="application/json">
            {{data_preview}}
          </script>
        </div>
      </div>
    </div>
    <div style="height: 8px;"></div>
  </body>
</html>
