<div class="panel panel-default">
  <div class="panel-heading">Formula</div>
  <div class="panel-body">
    <div class="input-group">
        <input type="text" class="form-control" aria-label="Formula" placeholder="Formula" id="formula">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default" aria-label="Help">
                <span class="glyphicon glyphicon-ok"></span>
            </button>
        </div>
    </div>
    </div>
</div>


<div class="panel panel-default">
  <div class="panel-heading">Trace</div>
  <div class="panel-body">

    <label for="trace">enter a trace :</label>
    <div class="input-group">
        <input type="text" class="form-control" aria-label="Trace" placeholder="Trace" id="trace">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default" aria-label="Help">
                <span class="glyphicon glyphicon-ok"></span>
            </button>
        </div>
    </div>
    </br>
    <label for="trace_selector">or select a trace provider :</label>
    <select class="form-control" id="trace_selector">
        <option></option>
        {% for x in args.sandbox_trace_providers %}
            <option value="{{ x }}">{{ x }}</option>
        {% endfor %}
    </select>
  </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">Result</div>
    <div class="panel-body">
        <button type="button" class="btn btn-default" aria-label="Check" id="check" onclick="check_formula()">
             <span class="glyphicon glyphicon-ok"></span> Check
        </button>
        <button id="result" class="btn btn-primary" type="button"> Result </button>
    </div>
</div>


<script type="application/javascript">

function check_formula() {
    var strace = $('#trace_selector').val();
    var trace = (strace === "")? $('#trace').val() : strace;
    $.ajax({
        dataType: 'text',
        type:'POST',
        url: '{% url 'plugin' 'Sandbox' %}',
        data: {
            action: 'monitor',
            formula: $("#formula").val(),
            trace: trace
        },
        success: function(response){
            if(response.indexOf("?") > -1)
                $('#result').removeClass("btn-danger btn-success").addClass("btn-default");
            else if(response.indexOf("⊥") > -1)
                $('#result').removeClass("btn-default btn-success").addClass("btn-danger");
            else if(response.indexOf("⊤") > -1)
                $('#result').removeClass("btn-default btn-danger").addClass("btn-success");

            $('#result').empty().append(response)
        }
    });
}
</script>
