{% extends "base.html" %}

{% block title %}User Details - {{ user.username }} - WorkFrame{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="../">
                    <i class="bi bi-arrow-left me-1"></i>Users
                </a>
            </li>
            <li class="breadcrumb-item active">{{ user.username }}</li>
        </ol>
    </nav>

    <div class="row">
        <!-- User Details Section -->
        <div class="col-12 col-lg-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-person me-2"></i>User Details
                        </h5>
                        <div class="btn-group btn-group-sm">
                            <a href="../{{ user.id }}/edit" class="btn btn-outline-primary">
                                <i class="bi bi-pencil"></i> Edit
                            </a>
                            <button type="button" 
                                    class="btn btn-outline-danger" 
                                    data-bs-toggle="modal" 
                                    data-bs-target="#deleteUserModal">
                                <i class="bi bi-trash"></i> Delete
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-sm-4"><strong>Username</strong></div>
                        <div class="col-sm-8">{{ user.username }}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-4"><strong>Email</strong></div>
                        <div class="col-sm-8">{{ user.email }}</div>
                    </div>
                    {% if user.first_name %}
                    <div class="row mb-3">
                        <div class="col-sm-4"><strong>First Name</strong></div>
                        <div class="col-sm-8">{{ user.first_name }}</div>
                    </div>
                    {% endif %}
                    {% if user.last_name %}
                    <div class="row mb-3">
                        <div class="col-sm-4"><strong>Last Name</strong></div>
                        <div class="col-sm-8">{{ user.last_name }}</div>
                    </div>
                    {% endif %}
                    <div class="row mb-3">
                        <div class="col-sm-4"><strong>Admin</strong></div>
                        <div class="col-sm-8">
                            {% if user.is_admin %}
                                <span class="badge bg-danger">
                                    <i class="bi bi-shield-fill-check me-1"></i>Administrator
                                </span>
                            {% else %}
                                <span class="badge bg-secondary">Regular User</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-4"><strong>Status</strong></div>
                        <div class="col-sm-8">
                            {% if user.is_active %}
                                <span class="badge bg-success">
                                    <i class="bi bi-check-circle me-1"></i>Active
                                </span>
                            {% else %}
                                <span class="badge bg-warning">
                                    <i class="bi bi-pause-circle me-1"></i>Inactive
                                </span>
                            {% endif %}
                        </div>
                    </div>
                    {% if user.created_at %}
                    <div class="row mb-3">
                        <div class="col-sm-4"><strong>Created</strong></div>
                        <div class="col-sm-8">
                            <small class="text-muted">
                                {{ user.created_at.strftime('%B %d, %Y at %I:%M %p') }}
                            </small>
                        </div>
                    </div>
                    {% endif %}
                    {% if user.last_login %}
                    <div class="row mb-0">
                        <div class="col-sm-4"><strong>Last Login</strong></div>
                        <div class="col-sm-8">
                            <small class="text-muted">
                                {{ user.last_login.strftime('%B %d, %Y at %I:%M %p') }}
                            </small>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Group Management Section -->
        <div class="col-12 col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-collection me-2"></i>Group Memberships
                    </h5>
                </div>
                <div class="card-body">
                    <!-- Current Groups -->
                    <div class="mb-4">
                        <h6 class="text-muted mb-3">Current Groups ({{ user_groups|length }})</h6>
                        {% if user_groups %}
                            {% for group in user_groups %}
                            <div class="d-flex justify-content-between align-items-center mb-2 p-2 border rounded">
                                <div>
                                    <strong>{{ group.name }}</strong>
                                    {% if group.description %}
                                    <br><small class="text-muted">{{ group.description }}</small>
                                    {% endif %}
                                </div>
                                <form method="POST" action="{{ user.id }}/remove-group/{{ group.id }}" class="d-inline" 
                                      onsubmit="return confirm('Remove {{ user.username }} from {{ group.name }}?')">
                                    <button type="submit" class="btn btn-outline-danger btn-sm">
                                        <i class="bi bi-x-lg"></i>
                                    </button>
                                </form>
                            </div>
                            {% endfor %}
                        {% else %}
                            <div class="text-center py-3">
                                <i class="bi bi-collection text-muted display-6"></i>
                                <p class="text-muted mb-0">Not a member of any groups</p>
                            </div>
                        {% endif %}
                    </div>

                    <!-- Add to Group -->
                    <div class="border-top pt-3">
                        <h6 class="text-muted mb-3">Add to Group</h6>
                        <form method="POST" action="{{ user.id }}/add-group">
                            <div class="input-group">
                                <select name="group_id" class="form-select" required>
                                    <option value="">Choose group...</option>
                                    {% for group in all_groups %}
                                        {% if group not in user_groups %}
                                        <option value="{{ group.id }}">{{ group.name }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                                <button type="submit" class="btn btn-success">
                                    <i class="bi bi-plus-lg me-1"></i>Add
                                </button>
                            </div>
                        </form>
                        
                        {% set has_available_groups = false %}
                        {% for group in all_groups %}
                            {% if group not in user_groups %}
                                {% set has_available_groups = true %}
                            {% endif %}
                        {% endfor %}
                        {% if not has_available_groups %}
                        <small class="text-muted d-block mt-2">
                            User is already a member of all available groups.
                        </small>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete User Modal -->
<div class="modal fade" id="deleteUserModal" tabindex="-1" aria-labelledby="deleteUserModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteUserModalLabel">
                    <i class="bi bi-exclamation-triangle text-danger me-2"></i>Delete User
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete user <strong>{{ user.username }}</strong>?</p>
                <p class="text-muted mb-0">This action cannot be undone. The user will be removed from all groups and lose access to the system.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form method="POST" action="../{{ user.id }}/delete" class="d-inline">
                    <button type="submit" class="btn btn-danger">
                        <i class="bi bi-trash me-1"></i>Delete User
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
/* Mobile optimizations */
@media (max-width: 576px) {
    .row.mb-3 {
        margin-bottom: 1rem !important;
    }
    
    .col-sm-4 {
        margin-bottom: 0.25rem;
    }
    
    .btn-group-sm .btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
}

/* Group membership styling */
.border {
    transition: all 0.2s ease;
}

.border:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

/* Badge styling */
.badge {
    font-size: 0.8rem;
}

.badge i {
    font-size: 0.75rem;
}

/* Input group styling */
.input-group .form-select {
    border-right: 0;
}

.input-group .btn {
    border-left: 0;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-hide success/error messages after 5 seconds
    const alerts = document.querySelectorAll('.alert');
    alerts.forEach(alert => {
        setTimeout(() => {
            alert.style.opacity = '0';
            setTimeout(() => alert.remove(), 300);
        }, 5000);
    });
});
</script>
{% endblock %}