{% extends "layout.html" %}

{% block title %}
    Expense Tracker
{% endblock %}

{% block main %}
    <!-- Register the specifics of a new expense -->
    <form action="/tracker" method="post">
        <div class="form-group">
            <label for="comment"><b>Specify the expense</b> (optional)</label><br>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-cart-check" viewBox="0 0 16 16">
              <path d="M11.354 6.354a.5.5 0 0 0-.708-.708L8 8.293 6.854 7.146a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z"/>
              <path d="M.5 1a.5.5 0 0 0 0 1h1.11l.401 1.607 1.498 7.985A.5.5 0 0 0 4 12h1a2 2 0 1 0 0 4 2 2 0 0 0 0-4h7a2 2 0 1 0 0 4 2 2 0 0 0 0-4h1a.5.5 0 0 0 .491-.408l1.5-8A.5.5 0 0 0 14.5 3H2.89l-.405-1.621A.5.5 0 0 0 2 1H.5zm3.915 10L3.102 4h10.796l-1.313 7h-8.17zM6 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
            </svg>
            <input autocomplete="off" autofocus class="form-control" name="comment" placeholder="Unspecified" type="text">
        </div>
        <br>

        <div class="form-group">
            <label for="amount"><b>Amount</b></label><br>
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-coin" viewBox="0 0 16 16">
                <path d="M5.5 9.511c.076.954.83 1.697 2.182 1.785V12h.6v-.709c1.4-.098 2.218-.846 2.218-1.932 0-.987-.626-1.496-1.745-1.76l-.473-.112V5.57c.6.068.982.396 1.074.85h1.052c-.076-.919-.864-1.638-2.126-1.716V4h-.6v.719c-1.195.117-2.01.836-2.01 1.853 0 .9.606 1.472 1.613 1.707l.397.098v2.034c-.615-.093-1.022-.43-1.114-.9H5.5zm2.177-2.166c-.59-.137-.91-.416-.91-.836 0-.47.345-.822.915-.925v1.76h-.005zm.692 1.193c.717.166 1.048.435 1.048.91 0 .542-.412.914-1.135.982V8.518l.087.02z"/>
                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                <path d="M8 13.5a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11zm0 .5A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/>
            </svg>
            <input autocomplete="off" class="form-control" name="amount" placeholder="1.00" type="number" min="1.00" step="0.01" required><br>
            <p class="footnote">* Must be at least $1.00</p>
        </div>
        <br>

        <div class="form-group">
            <label for="date"><b>Date</b></label><br>
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-calendar3" viewBox="0 0 16 16">
              <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
              <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
            </svg>
            <input type="date" name="date" required>
        </div>
        <br>

        <div class="form-group">
            <!-- "name" must be identical for group if only one option should be selectable; different names = all selecatble! -->
            <label for="category"><b>Category</b></label><br>
                <input type="radio" id="rent" name="category" value="&#x1F3E0; Rent">
                <label for="rent"><span class="text">&#x1F3E0; Rent & Bills</span></label><br>

                <input type="radio" id="maintenance" name="category" value="&#x1F6E0; Maintenance">
                <label for="maintenance"><span class="text">&#x1F6E0; Maintenance</span></label><br>

                <input type="radio" id="food" name="category" value="&#x1F96A; Food">
                <label for="food"><span class="text">&#x1F96A; Food</span></label><br>

                <input type="radio" id="family" name="category" value="&#x1F46A; Family">
                <label for="family"><span class="text">&#x1F46A; Family</span></label><br>

                <input type="radio" id="pets" name="category" value="&#x1F407; Pets">
                <label for="pets"><span class="text">&#x1F407; Pets</span></label><br>

                <input type="radio" id="clothes" name="category" value="&#x1F455; Clothes">
                <label for="clothes"><span class="text">&#x1F455; Clothes</span></label><br>

                <input type="radio" id="hobbies" name="category" value="&#127944; Hobbies">
                <label for="hobbies"><span class="text">&#127944; Hobbies & Entertainment</span></label><br>

                <input type="radio" id="investing" name="category" value="&#x1F4C8; Investing">
                <label for="investing"><span class="text">&#x1F4C8; Investing</span></label><br>

                <input type="radio" id="other" name="category" value="&#x2753; Other" checked>
                <label for="other"><span class="text">&#x2753; Other/Unspecified</span></label><br>
        </div><br>
        <button class="btn btn-success" type="submit">Submit</button>
    </form>
{% endblock %}