{% extends 'mpl/base.html' %}

{% block extrastyle %}
pre {font-size:10px;}
.folder, .filename, .info {font-family: "avenir";}
.filename {font-size: 18px; font-weight: bold;}
.info {font-size: 12px; font-style: italic; color: #0a2; text-align: center;}
.padded {padding-left: 20px; padding-top:20px;}
p.center { text-align: center;}
{% endblock extrastyle %}
{% block content %}

<div class="row">
  <div class="col-lg-6 col-md-6 col-sm-6">
    <p class="padded">
    <a href="/mpl/graphs/" role="button" class="btn btn-primary btn-sm">All Drawings</a>
    &nbsp; &nbsp;
    {% if gprev %}<a href='/mpl/graph/{{ gprev.id }}/'
      role="button" class="btn btn-secondary btn-sm">Previous</a>
    &nbsp;&nbsp;{% endif %}
    {% if gnext %}
      <a href='/mpl/graph/{{ gnext.id }}/'
      role="button" class="btn btn-secondary btn-sm">Next</a>{% endif %}
    </p>

    <p class='source'>
      <pre id='src' onclick="copyToClipboard('src')">{{ graph.code }}</pre>
    </p>
    <p class='info'>Click on the code block to copy to the clipboard</p>
  </div>
  <div class="col-lg-5 col-lg-offset-1 col-md-5 col-sm-6">
    &nbsp;<br />

    <p class="center">{{ graph.html }}</p>
  </div>
</div>

{% endblock content %}

{% block extrajs %}

function copyToClipboard(elementId) {
    var txt = document.getElementById(elementId).innerText;
    navigator.clipboard.writeText(txt);
}

{% endblock extrajs %}