{% extends "base.html" %}

{% block content %}

<div class="container-fluid">

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>

            <h2 class="fw-bold">
                <i class="bi bi-person-gear text-primary"></i>
                {{ title }}
            </h2>

            <p class="text-muted mb-0">
                {{ "Create a new user" if not user else "Edit user details" }}
            </p>

        </div>

        <a href="/users" class="btn btn-secondary">

            <i class="bi bi-arrow-left"></i>

            Back

        </a>

    </div>

    <!-- Form -->
    <div class="card shadow-sm">

        <div class="card-header bg-primary text-white">

            <i class="bi bi-person"></i>

            User Information

        </div>

        <div class="card-body">

            <form method="post" action="{{ '/users/new' if not user else '/users/' + user.id|string + '/edit' }}">

                <div class="row">

                    <div class="col-md-6 mb-3">

                        <label class="form-label">Username *</label>

                        <input type="text" name="username" class="form-control" value="{{ user.username if user else '' }}" required>

                    </div>

                    <div class="col-md-6 mb-3">

                        <label class="form-label">Full Name</label>

                        <input type="text" name="full_name" class="form-control" value="{{ user.full_name if user else '' }}">

                    </div>

                    <div class="col-md-6 mb-3">

                        <label class="form-label">Email *</label>

                        <input type="email" name="email" class="form-control" value="{{ user.email if user else '' }}" required>

                    </div>

                    <div class="col-md-6 mb-3">

                        <label class="form-label">Password {% if user %}(Leave blank to keep current){% else %}*{% endif %}</label>

                        <input type="password" name="password" class="form-control" {% if not user %}required{% endif %}>

                    </div>

                    <div class="col-md-6 mb-3">

                        <label class="form-label">Role *</label>

                        <select name="role" class="form-select" required>

                            <option value="user" {% if user and user.role == 'user' %}selected{% endif %}>User</option>

                            <option value="Admin" {% if user and user.role == 'Admin' %}selected{% endif %}>Admin</option>

                            <option value="Director" {% if user and user.role == 'Director' %}selected{% endif %}>Director</option>

                            <option value="Engineer" {% if user and user.role == 'Engineer' %}selected{% endif %}>Engineer</option>

                            <option value="Procurement" {% if user and user.role == 'Procurement' %}selected{% endif %}>Procurement</option>

                            <option value="Accounts" {% if user and user.role == 'Accounts' %}selected{% endif %}>Accounts</option>

                            <option value="HR" {% if user and user.role == 'HR' %}selected{% endif %}>HR</option>

                            <option value="Workshop" {% if user and user.role == 'Workshop' %}selected{% endif %}>Workshop</option>

                        </select>

                    </div>

                    <div class="col-md-6 mb-3">

                        <label class="form-label">Department</label>

                        <input type="text" name="department" class="form-control" value="{{ user.department if user else '' }}">

                    </div>

                    <div class="col-md-12 mb-3">

                        <div class="form-check">

                            <input type="checkbox" name="is_active" class="form-check-input" value="true" {% if not user or user.is_active %}checked{% endif %}>

                            <label class="form-check-label">Active</label>

                        </div>

                    </div>

                </div>

                <div class="text-end">

                    <a href="/users" class="btn btn-secondary">Cancel</a>

                    <button type="submit" class="btn btn-primary">

                        <i class="bi bi-save"></i>

                        Save User

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>

{% endblock %}