{% extends "layout.html" %}

{% block title %}
    Differentiation
{% endblock %}

{% block main %}
    <p>Function you would like to Derive: </p>
    <p>Type math here: <span id="math-field"></span></p>
    <form action="/differentiation" method="post">
        <div class = "form-group">
            <input autocomplete="off" autofocus class="form-control" name="function" placeholder="Function" type="hidden" id="function"   />
        </div>
        <p id="jp">Your Input Will Appear Here</p>
        <button class="btn btn-primary" type="submit" id="btn">Derive</button>
    </form>
    <script>
        let value = $("#function").val();
        $(document).ready(function(){
            $('#function').on('input', function() {
                let testvalue = $('#function').val();
                $('#jp').html("$f(x) = "+testvalue+"$");
                MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
            });
        })
    </script>

    <script>
    var mathFieldSpan = document.getElementById('math-field');
    var latexSpan = document.getElementById('latex');

    var MQ = MathQuill.getInterface(2); // for backcompat
    var mathField = MQ.MathField(mathFieldSpan, {
      spaceBehavesLikeTab: true, // configurable
      handlers: {
        edit: function() { // useful event handlers
          latexSpan.textContent = mathField.latex(); // simple API
        }
      }
    });

    var formInput = document.getElementById("function")
    $(document).ready(function(){
        $('#btn').click(function (evt) {
            document.getElementById("function").value = mathField.latex();
        })
    })
    </script>
{% endblock %}