{% extends "base.html" %}

{% block body_class %}image{% endblock %}

{% block body %}

  <header class="controls">
    <button id="button-image">import image</button>

    <hr>

    <button id="button-svg">generate</button>

    <input class="get-input" id="text-input" type="text" value=" ()/\|'-._=+" data-name="t" data-frame="svg-iframe"/>

    <label>weight</label>
    <input class="get-input" type="range" min="1" max="8" value="{{params['weight']}}" data-name="w" data-frame="svg-iframe"/>

    <label  class="text-label" for="text-checkbox"
            title="display the remaining text in the svg output in red">
            output text</label>
    <input  id="text-checkbox" type="checkbox" class="get-input"
            class="body-class-check" value="check-text" data-name="t" data-frame="svg-iframe" checked/>

  </header>

  <div class="font">
    <iframe class="f-ascii" id="pad-iframe" src="{{params['pad-full']}}">
    </iframe>
    <div class="f-svg">
        <iframe id="svg-iframe" src="/drawing/{{params['pad']}}">
        </iframe>
    </div>
  </div>

{% endblock %}