{% extends 'base.html' %}

{% block title %} Stock Forecaster {% endblock %}

{% block head %}
 {{ super() }}
{% endblock %}

{% block body %}

<h3>Stock Forecaster</h3>

<br><h5>Model Desing
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Define the parameters of the LSTM Neural Network"><span class="fa fa-info-circle"></span></button>
    </h5>

<div class="container-fluid">
    <div class="row">
        
        <!-- INPUT FORM -->
        <div class="col col-4">
            <form method="post">
                
                <br><label>Window size
                        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="How often the pattern appears? For example use the last 20 days to predict the 21st day, if you think there is a pattern every 20 days."><span class="fa fa-info-circle"></span></button>
                </label>
                <input type="text" name="window" class="form-control" placeholder="20" required value={{request.form.window}}>
                
                <br><label>Days ahead to predict
                        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="How many days ahead you want to predict? The more the less precise it gets."><span class="fa fa-info-circle"></span></button>
                </label>
                <input type="text" name="ahead" class="form-control" placeholder="5" required value={{request.form.ahead}}>
                
                <br><label>Number of Neurons your A.I. shall use
                        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="The more the better but the longer it takes to perform the task."><span class="fa fa-info-circle"></span></button>
                </label>
                <input type="text" name="neurons" class="form-control" placeholder="50" required value={{request.form.neurons}}>
                
                <br><br><br><button type="submit" class="btn btn-primary" id="btnModel">Predict</button>

            </form>
            <script>
                $("form").submit(function() {
                    $("#btnModel").html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
                });
            </script>
        </div>
        
        <!-- PLOT OUTPUT-->
        <div class="col col-8" id="data-plot">
            <img src="{{img}}" class="img-fluid" alt="Responsive image" id="img-data-plot">
            <script>
                $("#img-data-plot").on("error", function(){
                    $(this).hide();
                    $("#data-plot").html('<img src="{{ url_for('static', filename='home2.gif') }}" class="img-fluid" alt="Responsive image">');
                });
            </script>
        </div>
          
    </div>
</div>

<!-- TABLE -->
{% if dtf is not none %}
<div class="container-fluid"><div class="row"><div class="col col-4">
    <table class="table">
        <thead><tr>
            <th scope="col">Day</th>
            <th scope="col">Prediction</th>
        </tr></thead>
        <tbody>
            {% for i, row in dtf.iterrows() %}
                <tr>
                    <th scope="row">{{i+1}}</th>
                    <td>{{row["pred"]}}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div></div></div>
{% endif %} 

{% endblock %}