{% extends 'base.html' %}
{% load humanize %}

{% block title %}{{ konto.kontoname }} - van Hees-Theyssen-Vogel'sche Stiftung{% endblock %}

{% block content %}

    <div class="row">
        <div class="col-12">
            <div class="d-sm-flex align-items-center justify-content-between mb-4">
                <h1 class="h3 mb-0 text-gray-800">
                    <i class="fas fa-university me-2"></i>{{ konto.kontoname }}
                    <small class="text-muted">{{ konto.bank_name }}</small>
                </h1>
                <div class="btn-group" role="group">
                    <a href="{% url 'stiftung:konto_list' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-1"></i>Zurück zur Liste
                    </a>
                    <a href="{% url 'stiftung:konto_edit' konto.pk %}" class="btn btn-outline-warning">
                        <i class="fas fa-edit me-1"></i>Bearbeiten
                    </a>
                    <a href="#" class="btn btn-primary">
                        <i class="fas fa-upload me-1"></i>Transaktionen importieren
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Kontodetails -->
        <div class="col-xl-4 col-lg-5">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-info-circle me-2"></i>Kontodetails
                    </h6>
                </div>
                <div class="card-body">
                    <table class="table table-borderless table-sm">
                        <tr>
                            <td><strong>Kontoname:</strong></td>
                            <td>{{ konto.kontoname }}</td>
                        </tr>
                        <tr>
                            <td><strong>Bank:</strong></td>
                            <td>{{ konto.bank_name }}</td>
                        </tr>
                        <tr>
                            <td><strong>IBAN:</strong></td>
                            <td><code>{{ konto.iban|default:"-" }}</code></td>
                        </tr>
                        <tr>
                            <td><strong>BIC:</strong></td>
                            <td><code>{{ konto.bic|default:"-" }}</code></td>
                        </tr>
                        <tr>
                            <td><strong>Kontotyp:</strong></td>
                            <td>
                                <span class="badge bg-secondary">{{ konto.get_konto_typ_display }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>Status:</strong></td>
                            <td>
                                {% if konto.aktiv %}
                                    <span class="badge bg-success">Aktiv</span>
                                {% else %}
                                    <span class="badge bg-secondary">Inaktiv</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% if konto.zinssatz %}
                        <tr>
                            <td><strong>Zinssatz:</strong></td>
                            <td>{{ konto.zinssatz }}%</td>
                        </tr>
                        {% endif %}
                        {% if konto.laufzeit_bis %}
                        <tr>
                            <td><strong>Laufzeit bis:</strong></td>
                            <td>{{ konto.laufzeit_bis|date:"d.m.Y" }}</td>
                        </tr>
                        {% endif %}
                    </table>
                    
                    {% if konto.notizen %}
                    <div class="mt-3">
                        <h6 class="text-muted">Notizen:</h6>
                        <div class="small text-muted">
                            {{ konto.notizen|linebreaks }}
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Saldo und Statistiken -->
        <div class="col-xl-8 col-lg-7">
            <!-- Aktueller Saldo -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-euro-sign me-2"></i>Aktueller Saldo
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <div class="text-muted small">Buchsaldo</div>
                                <h3 class="{% if konto.saldo < 0 %}text-danger{% elif konto.saldo > 1000 %}text-success{% endif %}">
                                    €{{ konto.saldo|floatformat:2 }}
                                </h3>
                                {% if konto.saldo_datum %}
                                <small class="text-muted">Stand: {{ konto.saldo_datum|date:"d.m.Y" }}</small>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <div class="text-muted small">Transaktionen</div>
                                <h3 class="text-info">{{ transaction_stats.total_count|default:0 }}</h3>
                                {% if transaction_stats.last_transaction_date %}
                                <small class="text-muted">Letzte: {{ transaction_stats.last_transaction_date|date:"d.m.Y" }}</small>
                                {% else %}
                                <small class="text-muted">Keine Transaktionen</small>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <div class="text-muted small">Umsatz</div>
                                <div class="small">
                                    <div class="text-success">
                                        <i class="fas fa-arrow-up me-1"></i>
                                        €{{ transaction_stats.total_eingang|default:0|floatformat:2 }}
                                    </div>
                                    <div class="text-danger">
                                        <i class="fas fa-arrow-down me-1"></i>
                                        €{{ transaction_stats.total_ausgang|default:0|floatformat:2 }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Letzte Transaktionen -->
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-list me-2"></i>Letzte Transaktionen
                    </h6>
                    {% if recent_transactions %}
                    <a href="#" class="btn btn-sm btn-outline-primary">
                        <i class="fas fa-eye me-1"></i>Alle anzeigen
                    </a>
                    {% endif %}
                </div>
                <div class="card-body">
                    {% if recent_transactions %}
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Datum</th>
                                        <th>Verwendungszweck</th>
                                        <th>Empfänger/Zahlungspflichtiger</th>
                                        <th class="text-end">Betrag</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for transaction in recent_transactions %}
                                    <tr>
                                        <td>
                                            <small>{{ transaction.datum|date:"d.m.Y" }}</small>
                                        </td>
                                        <td>
                                            <div class="text-truncate" style="max-width: 200px;">
                                                {{ transaction.verwendungszweck|truncatechars:50 }}
                                            </div>
                                        </td>
                                        <td>
                                            <small>{{ transaction.empfaenger_zahlungspflichtiger|truncatechars:30|default:"-" }}</small>
                                        </td>
                                        <td class="text-end">
                                            <span class="{% if transaction.betrag > 0 %}text-success{% else %}text-danger{% endif %}">
                                                {% if transaction.betrag > 0 %}+{% endif %}€{{ transaction.betrag|floatformat:2 }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge 
                                                {% if transaction.status == 'imported' %}bg-secondary
                                                {% elif transaction.status == 'verified' %}bg-info
                                                {% elif transaction.status == 'assigned' %}bg-success
                                                {% elif transaction.status == 'ignored' %}bg-warning
                                                {% else %}bg-dark{% endif %}">
                                                {{ transaction.get_status_display }}
                                            </span>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fas fa-file-invoice fa-2x text-muted mb-3"></i>
                            <p class="text-muted">Noch keine Transaktionen vorhanden.</p>
                            <a href="#" class="btn btn-primary">
                                <i class="fas fa-upload me-1"></i>Erste Transaktionen importieren
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

{% endblock %}