<html>
  <head>
    <title>{{title}}</title>
  </head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script type=text/javascript src=https://cdn.jsdelivr.net/npm/diagcess/dist/diagcess.js></script>
  <script type=text/javascript>
        document.addEventListener("DOMContentLoaded", function() {
          diagcess.Base.init();
        })
  </script>
  </head>
  <body>
    <!-- DW - This fix needed for ggplot, as its bars otherwise have only a
      fill and no border and hence don't display correctly in MakeAccessibleSVG
      Should consider whether to only run this for MakeAccessibleSVG.ggplot
      Tried to make the selection as narrow as possible to avoid unwanted side-effects
    -->
    <style>
      svg g[id^=geom_rect] rect {
        stroke-opacity: 1;
      }
    </style>
    <div class="container">
      <div class="content">
        <div class="ChemAccess-element" id="mole1" tabindex="0" role="application">
          <div class="svg">
            {{{svg}}}
          </div>
          <div class="cml">
            {{{xml}}}
          </div>
        </div>
      </div>
    </div>
    {{#vi}}
    <h2>VI output</h2>
    {{/vi}}
    {{#vi}}
    {{vi}}<br>
    {{/vi}}
    {{#key}}
    <p>Tab to or mouseclick on the diagram and use the following keys for interactive exploration:</p>
    <table>
      <tr>
        <th>Key:</th>
        <th></th>
      </tr>
      <tr>
        <td>A</td>
        <td>Activate keyboard driven exploration</td>
      </tr>
      <tr>
        <td>B</td>
        <td>Activate menu driven exploration</td>
      </tr>
      <tr>
        <td>Escape</td>
        <td>Leave exploration mode</td>
      </tr>
      <tr>
        <td>&emsp;</td>
      </tr>
      <tr>
        <td>Cursor down</td>
        <td>Explore next lower level</td>
      </tr>
      <tr>
        <td>Cursor up</td>
        <td>Explore next upper level</td>
      </tr>
      <tr>
        <td>Cursor right</td>
        <td>Explore next element on level</td>
      </tr>
      <tr>
        <td>Cursor left</td>
        <td>Explore previous element on level</td>
      </tr>
      <tr>
        <td>&emsp;</td>
      </tr>
      <tr>
        <td>X</td>
        <td>Toggle description mode</td>
      </tr>
      <tr>
        <td>M</td>
        <td>De/activate direct magnification</td>
      </tr>
      <tr>
        <td>N</td>
        <td>De/activate stepwise magnification</td>
      </tr>
      <tr>
        <td>S</td>
        <td>Toggle subtitles</td>
      </tr>
      <tr>
        <td>C</td>
        <td>Cycle contrast settings</td>
      </tr>
      <tr>
        <td>T</td>
        <td>Monochrome colours</td>
      </tr>
      <tr>
        <td>L</td>
        <td>Toggle language (if available)</td>
      </tr>
    </table>
    {{/key}}
    {{#has_description}}
    <h2>Description</h2>
    {{/has_description}}
    {{#description}}
    <h3>{{name}}</h3>
    {{title}}
    <h4>General</h3>
    {{general}}
    <h4>R hints</h3>
    {{RHints}}
    {{/description}}
    {{#footer}}
    <div class="footer">
      <p style="text-align: center; font-size: 10px;">&copy; Progressive Accessibility Solutions 2017</p>
    </div>
    {{/footer}}
  </body>
</html>
