{% extends "layout.html" %}

{% block title %}
    Spending History
{% endblock %}

{% block main %}
    <!-- Option to search & filter the table -->
    <div class="mb-4">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16" style="margin-right: 5px;">
          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
        </svg>
        <input type="text" id="search_history" onkeyup="filter()" placeholder="Filter for:">

        <input type="radio" id="expense" name="select" value="0" checked>
        <label for="expense">Expense</label>
        <input type="radio" id="category" name="select" value="1">
        <label for="category">Category</label>
        <input type="radio" id="amount" name="select" value="2">
        <label for="amount">Amount</label>
        <input type="radio" id="date" name="select" value="3">
        <label for="date">Date</label><br>
    </div>

    <!-- Table displaying details of all user-submitted expenses, sorted by date -->
    <div class="table-responsive">
        <table class="table table-success table-striped table-hover" id="history">
            <thead class="table-dark">
                <tr>
                    <th>Expense</th>
                    <th>Category</th>
                    <th>Amount</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                {% for item in record %}
                <tr>
                    <td>{{ item.comment }}</td>
                    <td>{{ item.category }}</td>
                    <td><strong>- {{ item.amount | usd }}</strong></td>
                    <td>{{ item.date }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Implements search & filters -->
    <script src="/static/filter.js"></script>
{% endblock %}