jast/core/templates/home.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JAST</title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>

    <nav class="navbar">
        <a href="{% url 'home' %}" class="navbar-brand">JAST</a>
        <div class="navbar-actions">
            <a href="{% url 'stats' %}" class="btn btn-stats">View Statistics 📊</a>
            <form action="{% url 'logout' %}" method="POST" style="display:inline;" onsubmit="return confirm('Are you sure you want to log out?');">
                {% csrf_token %}
                <button type="submit" class="btn btn-logout">Logout</button>
            </form>
        </div>
    </nav>

    <div class="header-section">
        <h1>Hello, {% if user.first_name %}{{ user.first_name }} {{ user.last_name }}{% else %}{{ user.username }}{% endif %}!</h1>
        <p class="balance-text">Total Balance: <strong>{{ total_balance|floatformat:2 }} kr</strong></p>
    </div>

    <div class="card">
        <h3>Add Transaction</h3>
        <form method="POST">
            {% csrf_token %}
            {{ form.as_p }}
            <button type="submit">Save Transaction</button>
        </form>
    </div>

    <table>
        <thead>
            <tr>
                <th>Date</th>
                <th>Title</th>
                <th>Category</th>
                <th>Amount</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for t in transactions %}
            <tr>
                <td>{{ t.date }}</td>
                <td>{{ t.title }}</td>
                <td>{{ t.category.name|default:"-" }}</td>
                <td class="{% if t.is_income %}income{% else %}expense{% endif %}">
                    {{ t.amount }} kr
                </td>
                <td>
                    <a href="{% url 'edit_transaction' t.pk %}" class="btn-edit">Edit</a>
                    <form action="{% url 'delete_transaction' t.pk %}" method="POST" style="display:inline;" onsubmit="return confirm('Are you sure you want to delete this transaction?');">
                        {% csrf_token %}
                        <button type="submit" class="btn-delete">Delete</button>
                    </form>
                </td>
            </tr>
            {% empty %}
            <tr><td colspan="5">No transactions yet. Start spending!</td></tr>
            {% endfor %}
        </tbody>
    </table>

</body>
</html>