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

{% block title %}{{ user_obj.username }} - Benutzerverwaltung - 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-user me-2"></i>{{ user_obj.username }}
                    {% if user_obj.is_superuser %}
                    <span class="badge bg-danger ms-2">Superuser</span>
                    {% endif %}
                    {% if user_obj.is_staff %}
                    <span class="badge bg-warning ms-2">Staff</span>
                    {% endif %}
                    {% if not user_obj.is_active %}
                    <span class="badge bg-danger ms-2">Inaktiv</span>
                    {% endif %}
                </h1>
                <div>
                    <a href="{% url 'stiftung:user_edit' user_obj.pk %}" class="btn btn-primary">
                        <i class="fas fa-edit me-1"></i>Bearbeiten
                    </a>
                    <a href="{% url 'stiftung:user_management' %}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-1"></i>Zurück zur Übersicht
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Benutzerinformationen -->
        <div class="col-lg-8">
            <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>Benutzerinformationen
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="fw-bold">Benutzername:</td>
                                    <td>{{ user_obj.username }}</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">E-Mail:</td>
                                    <td>
                                        {% if user_obj.email %}
                                        <a href="mailto:{{ user_obj.email }}">{{ user_obj.email }}</a>
                                        {% else %}
                                        <span class="text-muted">Keine E-Mail angegeben</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Vollständiger Name:</td>
                                    <td>
                                        {% if user_obj.first_name or user_obj.last_name %}
                                        {{ user_obj.first_name }} {{ user_obj.last_name }}
                                        {% else %}
                                        <span class="text-muted">Kein Name angegeben</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="fw-bold">Status:</td>
                                    <td>
                                        {% if user_obj.is_active %}
                                        <span class="badge bg-success">Aktiv</span>
                                        {% else %}
                                        <span class="badge bg-danger">Inaktiv</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Letzte Anmeldung:</td>
                                    <td>
                                        {% if user_obj.last_login %}
                                        {{ user_obj.last_login|date:"d.m.Y H:i" }}
                                        <br><small class="text-muted">{{ user_obj.last_login|naturaltime }}</small>
                                        {% else %}
                                        <span class="text-muted">Nie angemeldet</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="fw-bold">Mitglied seit:</td>
                                    <td>
                                        {{ user_obj.date_joined|date:"d.m.Y H:i" }}
                                        <br><small class="text-muted">{{ user_obj.date_joined|naturaltime }}</small>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Berechtigungen -->
            <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-shield-alt me-2"></i>Berechtigungen
                        {% if stiftung_permissions %}
                        <span class="badge bg-primary ms-2">{{ stiftung_permissions|length }}</span>
                        {% endif %}
                    </h6>
                    <a href="{% url 'stiftung:user_permissions' user_obj.pk %}" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-edit me-1"></i>Berechtigungen verwalten
                    </a>
                </div>
                <div class="card-body">
                    {% if stiftung_permissions %}
                        <div class="row">
                            {% for permission in stiftung_permissions %}
                            <div class="col-md-6 mb-2">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-check-circle text-success me-2"></i>
                                    <span>{{ permission|slice:"9:" }}</span>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fas fa-shield-alt fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">Keine Berechtigungen zugewiesen</h5>
                            <p class="text-muted">Diesem Benutzer wurden noch keine Berechtigungen zugewiesen.</p>
                            <a href="{% url 'stiftung:user_permissions' user_obj.pk %}" class="btn btn-primary">
                                <i class="fas fa-plus me-1"></i>Berechtigungen zuweisen
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Aktivitätsverlauf -->
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-history me-2"></i>Letzte Aktivitäten
                        {% if recent_activity %}
                        <span class="badge bg-primary ms-2">{{ recent_activity|length }}</span>
                        {% endif %}
                    </h6>
                </div>
                <div class="card-body">
                    {% if recent_activity %}
                        <div class="timeline">
                            {% for activity in recent_activity %}
                            <div class="d-flex mb-3">
                                <div class="flex-shrink-0">
                                    <div class="bg-{% if activity.action == 'create' %}success{% elif activity.action == 'update' %}warning{% elif activity.action == 'delete' %}danger{% elif activity.action == 'login' %}info{% else %}secondary{% endif %} rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                        <i class="fas fa-{% if activity.action == 'create' %}plus{% elif activity.action == 'update' %}edit{% elif activity.action == 'delete' %}trash{% elif activity.action == 'login' %}sign-in-alt{% elif activity.action == 'logout' %}sign-out-alt{% else %}circle{% endif %} text-white"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <div class="fw-bold">{{ activity.get_action_display }}</div>
                                    <div class="text-muted small">{{ activity.description }}</div>
                                    <div class="text-muted small">
                                        <i class="fas fa-clock me-1"></i>{{ activity.timestamp|naturaltime }}
                                        {% if activity.ip_address %}
                                        • <i class="fas fa-map-marker-alt me-1"></i>{{ activity.ip_address }}
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fas fa-history fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">Keine Aktivitäten</h5>
                            <p class="text-muted">Für diesen Benutzer sind noch keine Aktivitäten aufgezeichnet.</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Aktionen -->
        <div class="col-lg-4">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-tools me-2"></i>Aktionen
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{% url 'stiftung:user_edit' user_obj.pk %}" class="btn btn-outline-primary">
                            <i class="fas fa-edit me-2"></i>Benutzer bearbeiten
                        </a>
                        <a href="{% url 'stiftung:user_change_password' user_obj.pk %}" class="btn btn-outline-warning">
                            <i class="fas fa-key me-2"></i>Passwort ändern
                        </a>
                        <a href="{% url 'stiftung:user_permissions' user_obj.pk %}" class="btn btn-outline-info">
                            <i class="fas fa-shield-alt me-2"></i>Berechtigungen verwalten
                        </a>
                        <hr>
                        {% if user_obj != request.user %}
                        <a href="{% url 'stiftung:user_delete' user_obj.pk %}" class="btn btn-outline-danger" onclick="return confirm('Sind Sie sicher, dass Sie diesen Benutzer löschen möchten?')">
                            <i class="fas fa-trash me-2"></i>Benutzer löschen
                        </a>
                        {% else %}
                        <button class="btn btn-outline-danger" disabled title="Sie können sich nicht selbst löschen">
                            <i class="fas fa-trash me-2"></i>Benutzer löschen
                        </button>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
