{% extends "layout.html" %}
{% set active_page = "trading" %}
{% block body %}
<style>
.card-deck .card{
    max-width: 230px;
}
</style>
<br>
<div class="card">
    <div class="card-header d-flex">
        <h1>
            <span class="float-left">
                <a href="{{ url_for('trading') }}">
                    <i class="fas fa-arrow-left"></i>
                </a>&nbsp
            </span>
        </h1>
        <div class="animated fadeIn img-fluid very-small-size">
            <img class="card-img-top" src="https://raw.githubusercontent.com/hyperdexapp/cryptocurrency-icons/master/128/icon/{{ symbol.split('/')[0].lower() }}.png" alt="Can't find image for {{ symbol.split('/')[0] }} :(">
            <div class="mask rgba-white-slight waves-effect waves-light"></div>
        </div>
        <div>
            <h1>&nbsp{{symbol}} on {{exchange}}: <strong>{{symbol_evaluation}}</strong></h1>
        </div>
    </div>
    <div class="card-body">
        <div class="text-center">
            Time frame
            <select class="selectpicker" data-live-search="true" data-width="auto" data-window-padding="25" id="time-frame-select">
                {% for time_frame in time_frames %}
                <option value={{time_frame.value}}>
                {{time_frame.value}}
                </option>
                {% endfor %}
            </select>
        </div>
        <br>
        <div class="card-body" id="symbol_graph" symbol="{{symbol}}" exchange="{{exchange}}" backtesting_mode="{{ backtesting_mode }}">
            <div class="card-body text-center" name="loadingSpinner">
                <h2>
                    <i class="fa fa-spinner fa-spin"></i>
                </h2>
            </div>
            <div id="graph-symbol-price"></div>
        </div>
    </div>
</div>
<br>
{% endblock %}

{% block additional_scripts %}
<script src="{{ url_for('static', filename='js/common/candlesticks.js') }}"></script>
<script src="{{ url_for('static', filename='js/components/market_status.js') }}"></script>
{% endblock additional_scripts %}
