{# resources/views/admin/users/form.twig #}
{% extends "layout/app.twig" %}
{% block page_title_block %}{{ __(page_title_key, page_title_params | default({})) }}{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
    <a href="{{ BASE_URL }}{{ routeParser.urlFor('admin.users.index') }}" class="text-blue-600 hover:text-blue-800 inline-flex items-center">
        <i class="fas fa-arrow-left mr-2"></i> {{ __('link.back_to_users') }}
    </a>
</div>
{% include 'partials/flash_messages.twig' %}

<div class="bg-white shadow-md rounded-lg p-6 md:p-8 max-w-2xl mx-auto">
    <form action="{{ form_action }}" method="POST">
        {% if is_edit %}<input type="hidden" name="_METHOD" value="PUT">{% endif %}
        
        <div class="space-y-6">
            <div>
                <label for="name" class="form-label">{{ __('label.name') }}*</label>
                <input type="text" name="name" id="name" value="{{ submitted_data.name | default('') }}" required class="form-input {% if errors.name %}border-red-500{% endif %}">
                {% if errors.name %}<p class="form-error">{{ errors.name }}</p>{% endif %}
            </div>

            <div>
                <label for="email" class="form-label">{{ __('label.email') }}*</label>
                <input type="email" name="email" id="email" value="{{ submitted_data.email | default('') }}" required class="form-input {% if errors.email %}border-red-500{% endif %}">
                {% if errors.email %}<p class="form-error">{{ errors.email }}</p>{% endif %}
            </div>

            <div>
                <label for="password" class="form-label">{{ __('label.password') }}{% if not is_edit %}*{% endif %}</label>
                <input type="password" name="password" id="password" class="form-input {% if errors.password %}border-red-500{% endif %}" 
                       placeholder="{{ is_edit ? __('placeholder.password_optional_on_edit') : __('placeholder.min_8_chars') }}" 
                       {{ not is_edit ? 'required' : '' }}>
                {% if errors.password %}<p class="form-error">{{ errors.password }}</p>{% endif %}
            </div>

            <div>
                <label for="role_id" class="form-label">{{ __('table_header.role') }}*</label>
                <select name="role_id" id="role_id" required class="form-select {% if errors.role_id %}border-red-500{% endif %}">
                    <option value="">{{ __('placeholder.select_role') }}</option>
                    {% for role in roles %}
                        <option value="{{ role.id }}" {{ (submitted_data.role_id | default('') == role.id) ? 'selected' : '' }}>
                            {{ role.name }}
                        </option>
                    {% endfor %}
                </select>
                 {% if errors.role_id %}<p class="form-error">{{ errors.role_id }}</p>{% endif %}
            </div>
            
            <div class="pt-2">
                 <label for="is_active" class="flex items-center">
                    <input type="checkbox" name="is_active" id="is_active" value="1" 
                           class="h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
                           {{ (submitted_data.is_active | default(1) == 1) ? 'checked' : '' }}>
                    <span class="ml-2 text-sm text-gray-700">{{ __('status.active_user') }}</span>
                </label>
            </div>
        </div>

        <div class="mt-8 pt-5 border-t border-gray-200 flex justify-end">
            <a href="{{ BASE_URL }}{{ routeParser.urlFor('admin.users.index') }}" class="btn-secondary mr-3">{{ __('button.cancel') }}</a>
            <button type="submit" class="btn-primary">{{ is_edit ? __('button.save_changes') : __('button.create_user') }}</button>
        </div>
    </form>
</div>
<style>.form-label{display:block; font-size:0.875rem; font-weight:500; color:#374151; margin-bottom:0.25rem;} .form-input, .form-select {display: block; width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #D1D5DB; border-radius: 0.375rem;} .form-input:focus, .form-select:focus {outline: 2px solid transparent; outline-offset: 2px; border-color: #4F46E5; box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.5);} .form-error{color: #EF4444; font-size: 0.75rem; margin-top: 0.25rem;} .btn-primary {padding: 0.5rem 1rem; background-color: #4F46E5; color: white; font-weight: 500; border-radius: 0.375rem;} .btn-primary:hover{background-color: #4338CA;} .btn-secondary{padding: 0.5rem 1rem; background-color: #E5E7EB; color: #1F2937; border-radius: 0.375rem; border:1px solid #D1D5DB;}</style>
{% endblock %}