{% extends 'main/base.html' %}
{% load i18n %}

{% block title %}{% trans "Account Details" %} - ODEON{% endblock %}

{% block top_icon %}
    <a href="/personal/" id="menu-button" style="width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: transparent; border: 2px solid rgba(255,255,255,0.2); color: var(--text-muted); font-size: 1.4rem; text-decoration: none;">👤</a>
{% endblock %}

{% block content %}
    <div class="content-card section-inner" style="max-width: 500px; margin: 0 auto; position: relative;">
        {% include 'main/_subheader.html' with title=_("Account Details") back="/personal/" %}

        <!-- Filter -->
        <form method="get" style="margin-bottom: 1.25rem;">
            <select name="kind" onchange="this.form.submit()"
                    style="background: transparent; border: none; color: #3b82f6; font-weight: 700; font-size: 1rem; cursor: pointer;">
                <option value="" {% if not selected_kind %}selected{% endif %} style="background:var(--bg-card);">{% trans "Wallet" %} ▼</option>
                {% for value, label in kind_choices %}
                <option value="{{ value }}" {% if selected_kind == value %}selected{% endif %} style="background:var(--bg-card);">{{ label }}</option>
                {% endfor %}
            </select>
        </form>

        <!-- Transactions -->
        {% for t in transactions %}
        <div style="padding: 1rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: flex-start;">
            <p style="margin: 0; color: var(--text-main); font-weight: 600;">{{ t.label }}</p>
            <div style="text-align: right;">
                <p style="margin: 0 0 0.25rem; font-weight: 700; color: {% if t.is_debit %}#34d399{% else %}#f59e0b{% endif %};">€{{ t.amount }}</p>
                <p style="margin: 0; color: var(--text-muted); font-size: 0.8rem;">{{ t.created_at|date:"Y-m-d H:i:s" }}</p>
            </div>
        </div>
        {% empty %}
        <div style="text-align: center; padding: 3rem 1rem; color: var(--text-muted);">
            <div style="font-size: 2.5rem; margin-bottom: 0.75rem;">🧾</div>
            <p style="margin: 0;">{% trans "No transactions yet." %}</p>
        </div>
        {% endfor %}
    </div>
{% endblock %}