{% extends "layout.html" %} {% block title %}Vanguard Prices{% endblock %} {% block content %}
<h1>Vanguard Australia Fund Prices</h1>

<div class="card bg-secondary">
    <div class="card-header"></div>
    <div class="card-body">
        <div>
            <span>Example fund list: "<span id="fundSuggestion">8123,8146,8148,8147</span>"</span>
            <a id="useSuggestion" class="btn btn-outline-primary" href="#">Use this</a>
        </div>
        <form>
            <div class="form-group">
                <label for="funds">Enter funds (comma-separated):</label>
                <input id="funds" type="text" name="funds" class="form-control" 
                    {% if funds %}value="{{ funds }}" {% endif %} />
            </div>
            <div class="text-center">
                <button type="submit" class="btn btn-primary">OK</button>
            </div>
        </form>

    </div>
</div>

{% if prices %}
<table class="table table-bordered mt-4">
    <thead class="thead-dark">
        <th>Id</th>
        <th>Date</th>
        <th>Price</th>
        <th>Name</th>
        <th>Morningstar Id</th>
    </thead>
    <tbody>
        {% for price in prices recursive %}
        <tr>
            <td>{{ price.identifier }}</td>
            <td>{{ price.date }}</td>
            <td>{{ price.value }}</td>
            <td>{{ price.name }}</td>
            <td>{{ price.mstar_id }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endif %} {% endblock %}
{% block scripts %}
<script type="text/javascript">
$(function() {
    $("#useSuggestion").click(function() {
        var suggestions = $("#fundSuggestion").text();
        $("#funds").val(suggestions);
        $("form").submit();
    });
});
</script>
{% endblock %}