{% extends 'tikz/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="/tikz/show/" role="button" class="btn btn-primary btn-sm">All Drawings</a>
    &nbsp; &nbsp;
    <a href="/tikz/show/{{ image.csr }}/" role="button"
    class="btn btn-secondary btn-sm">Images from {{ image.course }}</a>
    &nbsp;&nbsp;
    {% if tprev %}<a href='/tikz/show/{{ tprev.id }}/'
      role="button" class="btn btn-secondary btn-sm">Previous</a>
    &nbsp;&nbsp;{% endif %}
    {% if tnext %}
      <a href='/tikz/show/{{ tnext.id }}/'
      role="button" class="btn btn-secondary btn-sm">Next</a>{% endif %}
    </p>


    <p class='filename'>{{ image.filename }}, line {{ image.line }}</p>
    <p class='folder'>{{ image.folder }}
    <p class='source'>
      <pre id='src' onclick="copyToClipboard('src')">{{ image.source }}</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">{{ image.html }}</p>
  </div>
</div>

{% endblock content %}

{% block extrajs %}

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

{% endblock extrajs %}