{% extends "base.html" %}

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

{% block body %}

  <header class="controls">

    <form action="{{ url_for('image') }}" enctype="multipart/form-data" method="POST">
      <input name="img" type="file"/>
      <input type="submit"/>
    </form>

    <hr>

    <button id="button-svg">generate</button>
    <input class="get-input" style="width: 8rem;" id="text-input" type="text" value="{{params['chars']}}" data-name="chars" data-frame="svg-iframe"/>

    <label>width</label>
    <input class="get-input" type="range" min="40" max="320" step="20" value="{{params['width']}}" data-name="width" 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"/>

  </header>

  <div class="split-screen reload" id="main">
    <div class="f-image"><img src="{{img}}"></div>
    <iframe id="svg-iframe" class="f-double" src="/drawing-image/{{filename}}">
    </iframe>
  </div>

  <script src="/static/js/generate_interface.js"></script>

{% endblock %}