{% extends 'base.html' %}

{% block title %}{{ 'Edit' if user else 'Create' }} User | Admin | {{ settings.site_name }}{% endblock %}

{% block content %}
<section class="section-light py-4">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ url_for('admin.users') }}">Users</a></li>
                <li class="breadcrumb-item active">{{ 'Edit' if user else 'Create' }}</li>
            </ol>
        </nav>
        <h1 class="h3 mb-0">{{ 'Edit User' if user else 'Create User' }}</h1>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        <form action="{{ url_for('admin.edit_user', id=user.id) if user else url_for('admin.add_user') }}" method="POST">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="name" class="form-label">Full Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="name" name="name" required
                                           value="{{ user.name if user else '' }}"
                                           placeholder="Enter full name">
                                </div>
                                
                                <div class="col-md-6">
                                    <label for="username" class="form-label">Username <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="username" name="username" required
                                           value="{{ user.username if user else '' }}"
                                           placeholder="Enter username">
                                </div>
                                
                                <div class="col-md-6">
                                    <label for="email" class="form-label">Email Address <span class="text-danger">*</span></label>
                                    <input type="email" class="form-control" id="email" name="email" required
                                           value="{{ user.email if user else '' }}"
                                           placeholder="Enter email address">
                                </div>
                                
                                <div class="col-md-6">
                                    <label for="password" class="form-label">
                                        Password 
                                        {% if not user %}<span class="text-danger">*</span>{% endif %}
                                    </label>
                                    <input type="password" class="form-control" id="password" name="password"
                                           {% if not user %}required{% endif %} minlength="8"
                                           placeholder="{{ 'Leave blank to keep current' if user else 'Enter password' }}">
                                    <div class="form-text">
                                        {% if user %}Leave blank to keep current password{% else %}Minimum 8 characters{% endif %}
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <label for="role" class="form-label">Role <span class="text-danger">*</span></label>
                                    <select class="form-select" id="role" name="role" required
                                            {% if user and user.id == current_user.id %}disabled{% endif %}>
                                        <option value="editor" {% if user and not user.is_admin %}selected{% endif %}>Editor</option>
                                        <option value="admin" {% if user and user.is_admin %}selected{% endif %}>Admin</option>
                                    </select>
                                    {% if user and user.id == current_user.id %}
                                    <div class="form-text text-warning">You cannot change your own role</div>
                                    <input type="hidden" name="role" value="{{ 'admin' if user.is_admin else 'editor' }}">
                                    {% endif %}
                                </div>
                                
                                <div class="col-12">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="is_active" name="is_active"
                                               {% if not user or user.is_active %}checked{% endif %}
                                               {% if user and user.id == current_user.id %}disabled{% endif %}>
                                        <label class="form-check-label" for="is_active">
                                            User is active
                                        </label>
                                        {% if user and user.id == current_user.id %}
                                        <input type="hidden" name="is_active" value="1">
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            
                            <hr class="my-4">
                            
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>{{ 'Update' if user else 'Create' }} User
                                </button>
                                <a href="{{ url_for('admin.users') }}" class="btn btn-outline-secondary">
                                    Cancel
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
                
                <!-- Role Descriptions -->
                <div class="card mt-4 border-0 bg-light">
                    <div class="card-body">
                        <h6 class="mb-3"><i class="fas fa-info-circle me-2"></i>Role Permissions</h6>
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="text-primary">Admin</h6>
                                <ul class="list-unstyled text-muted small mb-0">
                                    <li><i class="fas fa-check text-success me-2"></i>Manage all users</li>
                                    <li><i class="fas fa-check text-success me-2"></i>Manage journals and articles</li>
                                    <li><i class="fas fa-check text-success me-2"></i>Review submissions</li>
                                    <li><i class="fas fa-check text-success me-2"></i>Edit site settings</li>
                                    <li><i class="fas fa-check text-success me-2"></i>Manage content and images</li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-secondary">Editor</h6>
                                <ul class="list-unstyled text-muted small mb-0">
                                    <li><i class="fas fa-check text-success me-2"></i>Manage articles</li>
                                    <li><i class="fas fa-check text-success me-2"></i>Review submissions</li>
                                    <li><i class="fas fa-check text-success me-2"></i>Respond to messages</li>
                                    <li><i class="fas fa-times text-danger me-2"></i>Cannot manage users</li>
                                    <li><i class="fas fa-times text-danger me-2"></i>Cannot edit settings</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}