{% extends 'base.html' %}

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

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

{% block body %}

<h3>Stock Forecaster</h3>

<br><h5>Select Data
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Data are downloaded from Yahoo Finance"><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>Yahoo Finance Symbol 
                        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="suggestion?">
                            <a href="https://finance.yahoo.com/trending-tickers/" target="_blank"><span class="fa fa-yahoo"></span></a>
                        </button>
                </label>
                <input type="text" name="symbol" class="form-control" placeholder="AAPL" required value={{request.form.symbol}}>
                
                <br><label>From date</label>
                <input type="text" name="from" class="form-control" placeholder="YYYY-MM-DD" required value={{request.form.from}}>
                
                <br><label>To date</label>
                <input type="text" name="to" class="form-control" placeholder="YYYY-MM-DD or if empty it's up to today" value={{request.form.to}}>
                
                <br><label>Variable to predict</label>
                <select class="form-control" required name="variable" value={{request.form.variable}}>
                    <option>Open</option>
                    <option>High</option>
                    <option>Low</option>
                    <option>Close</option>
                    <option>Volume</option>
                </select>
                
                <br><br><br><button type="submit" class="btn btn-primary" id="btnData">Get data</button>

            </form>
            <script>
                $("form").submit(function() {
                    $("#btnData").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="{{ url_for('static', filename='home.gif') }}" class="img-fluid" alt="Responsive image">
        </div>
          
    </div>
</div>

{% endblock %}