{% extends 'base.html' %}

{% block main %}
    <h1>Curie Generate</h1>
    <p>The model {{expName}} has been trained for {{epochs}} epochs using the {{optimizer}} optimization algorithm. Option for finetuning coming soon.</p>
    <form action="{{ url_for('generate') }}" method="post" enctype="multipart/form-data">
        {% include 'flash_messages.html' %}
        {{ form.csrf_token }}
        <div class="form-row">
                {{ form.n.label }}
                {{ form.n(class="form-control")}}
        </div>
        <!--<div class="form-row">
            {\{ form.modelSelection.label }}
            {\{ form.modelSelection(class="form-control")}}
        </div>-->
        <br>
        <div class="form-row">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </form>

    {% if result %}
        </b>Generated Compounds</b>
        <script src="https://unpkg.com/smiles-drawer@1.0.10/dist/smiles-drawer.min.js"></script>
        <script>
            let options = {};
            let smilesDrawer = new SmilesDrawer.Drawer(options);
        </script>
        {% for x in range(result|length) %}
        <!--<i>{\{result}}</i>-->
        <p>{{result[x]}}</p>
        <canvas id="canvas-{{x}}" width="500" height="500"></canvas>
        <script>
            SmilesDrawer.parse('{{result[0]}}', function(tree) {
                smilesDrawer.draw(tree, "canvas-{{x}}", "dark", false);
                console.log(smilesDrawer.draw(tree, "canvas-{{x}}", "dark", false))
              });
          </script>
        {% endfor %}
    {% endif %}

{% endblock %}