{% extends "base.html" %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
{% endblock %}

{% block content %}

<div class="container-fluid">

     <!-- SIDEBAR CONTROLS -->
<div class="col-md-2" style='padding-top:30px'>
    <div class="row">
         <a href="#"><button id="generate_button" class="btn btn-default btn-xl">Generate Bases</button></a> 
    </div>
    <div class="row" id="content">
    </div>
</div>


<div class="col-md-10">
    <div class="row" style="padding-top:35px">
      {% include "terminal.html" %}
    </div>
    <div class="row">
       <div class="alert alert-info col-md-12" style="font-weight:800;font-style:uppercase;text-align:center" id="box">STATE IS IDLE</div>
    </div>
</div>

</div>
{% endblock %}

{% block scripts %}
    <script type="text/javascript">
          
        $("#generate_button").click(function(){

            var prompt = $('.prompt')
            var xhr = new XMLHttpRequest()
            xhr.open("GET", "/bases/update", true)

            $("#box").removeClass("alert-info") 
            $("#box").text("RUNNING") 
            $("#box").addClass("alert-warning")
 
            // On finish, reload page
            xhr.onloadend = function () {
                var prompt = $('.prompt')
                $("#box").removeClass("alert-warning") 
                $("#box").text("DONE") 
                $("#box").addClass("alert-success")
                setTimeout(function() {
                  document.location = "/recipe";
                }, 1000);
            }

            // First message to user
            prompt.typed({
                strings: ["Generating bases! Hang tight..."],
                typeSpeed: 1,
            })

            // Update user with dialog
            xhr.onprogress = function () {
                var message = "<span class='gray'>" + xhr.responseText.replace("\n", "<br>") + "</span>"
                //prompt.removeData();
                $('.typed-cursor').text('');
                $('.history').html('$ ' + message + '<br>');
                //history = history ? [history] : [];
                //history.push('$ ' + message + '<br>');
                prompt.html('');
                //$('.history').html(history.join('<br>'));
                $('section.terminal').scrollTop($('section.terminal').height());
            }
            xhr.send()
        })

    </script>
<script type="text/jsx">

      /*** @jsx React.DOM */

      var realPython = React.createClass({
        render: function() {
          return (<h2>Greetings, from Real Python!</h2>);
        }
      });

      ReactDOM.render(
        React.createElement(realPython, null),
        document.getElementById('content')
      );


</script>
{% endblock %}
