{% extends "base.html" %}

{% block title %}{{ action }} User - SEREACT Web Client{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-user"></i> {{ action }} User
                </h5>
            </div>
            <div class="card-body">
                <form method="POST">
                    <div class="mb-3">
                        <label for="name" class="form-label">
                            <i class="fas fa-user"></i> Full Name *
                        </label>
                        <input type="text" class="form-control" id="name" name="name" 
                               value="{{ user.name if user else '' }}" 
                               placeholder="Enter full name" required>
                    </div>

                    <div class="mb-3">
                        <label for="email" class="form-label">
                            <i class="fas fa-envelope"></i> Email Address *
                        </label>
                        <input type="email" class="form-control" id="email" name="email" 
                               value="{{ user.email if user else '' }}" 
                               placeholder="Enter email address" required>
                    </div>

                    {% if action == 'Create' %}
                    <div class="mb-3">
                        <label for="team_id" class="form-label">
                            <i class="fas fa-users"></i> Team
                        </label>
                        <select class="form-select" id="team_id" name="team_id">
                            <option value="">Select a team (optional)</option>
                            {% for team in teams %}
                            <option value="{{ team.id }}">{{ team.name }}</option>
                            {% endfor %}
                        </select>
                        <div class="form-text">
                            Leave empty to assign to current user's team
                        </div>
                    </div>
                    {% endif %}

                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_admin" name="is_admin"
                                   {{ 'checked' if user and user.is_admin else '' }}>
                            <label class="form-check-label" for="is_admin">
                                <i class="fas fa-crown text-warning"></i> Administrator
                            </label>
                            <div class="form-text">
                                Administrators have full access to all system features
                            </div>
                        </div>
                    </div>

                    {% if user %}
                    <div class="mb-3">
                        <label class="form-label">
                            <i class="fas fa-info-circle"></i> User Information
                        </label>
                        <div class="card bg-light">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <small class="text-muted">
                                            <i class="fas fa-fingerprint"></i> ID: {{ user.id }}
                                        </small>
                                    </div>
                                    <div class="col-md-6">
                                        <small class="text-muted">
                                            <i class="fas fa-users"></i> Team ID: {{ user.team_id }}
                                        </small>
                                    </div>
                                </div>
                                <div class="row mt-2">
                                    <div class="col-md-6">
                                        <small class="text-muted">
                                            <i class="fas fa-calendar"></i> Created: 
                                            {{ user.created_at.strftime('%Y-%m-%d %H:%M') if user.created_at else 'Unknown' }}
                                        </small>
                                    </div>
                                    <div class="col-md-6">
                                        <small class="text-muted">
                                            <i class="fas fa-circle {{ 'text-success' if user.is_active else 'text-danger' }}"></i>
                                            {{ 'Active' if user.is_active else 'Inactive' }}
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{{ url_for('users') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to Users
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> {{ action }} User
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {% if action == 'Edit' %}
        <div class="card mt-4">
            <div class="card-header bg-danger text-white">
                <h6 class="mb-0">
                    <i class="fas fa-exclamation-triangle"></i> Danger Zone
                </h6>
            </div>
            <div class="card-body">
                <p class="text-muted">
                    Deleting a user is permanent and cannot be undone. All user data and associated content will be affected.
                </p>
                <button type="button" class="btn btn-outline-danger" 
                        onclick="confirmDelete('{{ user.name }}', '{{ user.email }}', '{{ url_for('delete_user', user_id=user.id) }}')">
                    <i class="fas fa-trash"></i> Delete User
                </button>
            </div>
        </div>

        <!-- Delete Confirmation Modal -->
        <div class="modal fade" id="deleteModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <i class="fas fa-exclamation-triangle text-warning"></i> Confirm Delete
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure you want to delete the user:</p>
                        <div class="alert alert-info">
                            <strong><span id="deleteUserName"></span></strong><br>
                            <small><span id="deleteUserEmail"></span></small>
                        </div>
                        <div class="alert alert-warning" role="alert">
                            <i class="fas fa-exclamation-triangle"></i>
                            <strong>Warning:</strong> This action cannot be undone.
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times"></i> Cancel
                        </button>
                        <form id="deleteForm" method="POST" style="display: inline;">
                            <button type="submit" class="btn btn-danger">
                                <i class="fas fa-trash"></i> Delete User
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
{% if action == 'Edit' %}
<script>
function confirmDelete(userName, userEmail, deleteUrl) {
    document.getElementById('deleteUserName').textContent = userName;
    document.getElementById('deleteUserEmail').textContent = userEmail;
    document.getElementById('deleteForm').action = deleteUrl;
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}
</script>
{% endif %}
{% endblock %}