{% extends 'admin/base.html.twig' %}

{% block title %}{{ user ? 'Kullanici Duzenle' : 'Yeni Kullanici' }}{% endblock %}
{% block page_title %}{{ user ? 'Kullanici Duzenle: ' ~ (user.fullName|default(user.username)) : 'Yeni Kullanici Olustur' }}{% endblock %}

{% block body %}
    {# Limit Warning Banner #}
    {% if userLimit is defined and userLimit.max > 0 %}
        <div class="mb-4 rounded-xl border p-4 {{ userLimit.percentUsed >= 100 ? 'bg-red-50 border-red-200' : (userLimit.percentUsed >= 80 ? 'bg-amber-50 border-amber-200' : 'bg-blue-50 border-blue-200') }}">
            <div class="flex items-center gap-3">
                <div class="w-8 h-8 rounded-lg {{ userLimit.percentUsed >= 100 ? 'bg-red-100' : (userLimit.percentUsed >= 80 ? 'bg-amber-100' : 'bg-blue-100') }} flex items-center justify-center flex-shrink-0">
                    <i class="fas {{ userLimit.percentUsed >= 100 ? 'fa-exclamation-circle text-red-500' : (userLimit.percentUsed >= 80 ? 'fa-exclamation-triangle text-amber-500' : 'fa-users text-blue-500') }} text-sm"></i>
                </div>
                <div class="flex-1">
                    <p class="text-sm font-medium {{ userLimit.percentUsed >= 100 ? 'text-red-700' : (userLimit.percentUsed >= 80 ? 'text-amber-700' : 'text-blue-700') }}">
                        {{ userLimit.message }}
                    </p>
                </div>
                <div class="flex-shrink-0">
                    <div class="w-24 bg-gray-200 rounded-full h-2 overflow-hidden">
                        <div class="h-2 rounded-full {{ userLimit.percentUsed >= 100 ? 'bg-red-500' : (userLimit.percentUsed >= 80 ? 'bg-amber-500' : 'bg-blue-500') }}"
                             style="width: {{ userLimit.percentUsed > 100 ? 100 : userLimit.percentUsed }}%"></div>
                    </div>
                    <p class="text-[10px] text-gray-500 mt-0.5 text-right">%{{ userLimit.percentUsed|round(0) }}</p>
                </div>
            </div>
        </div>
    {% endif %}

    <form method="post" action="{{ user ? path('admin_user_edit', {id: user.id}) : path('admin_user_create') }}">
        <input type="hidden" name="_token" value="{{ csrf_token('user_form') }}">

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
            {# Left column (8/12) #}
            <div class="lg:col-span-8 space-y-6">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Kullanici Bilgileri</h3>
                    </div>
                    <div class="card-body space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="username" class="form-label">Kullanici Adi <span class="text-red-500">*</span></label>
                                <input type="text" id="username" name="username" required
                                       value="{{ user ? user.username : '' }}"
                                       class="form-input w-full"
                                       placeholder="kullaniciadi">
                            </div>
                            <div>
                                <label for="email" class="form-label">E-posta <span class="text-red-500">*</span></label>
                                <input type="email" id="email" name="email" required
                                       value="{{ user ? user.email : '' }}"
                                       class="form-input w-full"
                                       placeholder="kullanici@ornek.com">
                            </div>
                        </div>
                        <div>
                            <label for="full_name" class="form-label">Ad Soyad</label>
                            <input type="text" id="full_name" name="full_name"
                                   value="{{ user ? user.fullName : '' }}"
                                   class="form-input w-full"
                                   placeholder="Ad Soyad">
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="password" class="form-label">
                                    Sifre
                                    {% if not user %}<span class="text-red-500">*</span>{% endif %}
                                </label>
                                <input type="password" id="password" name="password"
                                       {{ not user ? 'required' : '' }}
                                       class="form-input w-full"
                                       placeholder="{{ user ? 'Degistirmek icin girin' : 'Sifre' }}">
                                {% if user %}
                                    <p class="text-xs text-gray-500 mt-1">Bos birakirsaniz mevcut sifre korunur.</p>
                                {% endif %}
                            </div>
                            <div>
                                <label for="password_confirm" class="form-label">
                                    Sifre Tekrar
                                    {% if not user %}<span class="text-red-500">*</span>{% endif %}
                                </label>
                                <input type="password" id="password_confirm" name="password_confirm"
                                       {{ not user ? 'required' : '' }}
                                       class="form-input w-full"
                                       placeholder="Sifre tekrar">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {# Right column (4/12) #}
            <div class="lg:col-span-4 space-y-6">
                {# Role & Status #}
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Rol ve Durum</h3>
                    </div>
                    <div class="card-body space-y-4">
                        <div>
                            <label for="role" class="form-label">Rol</label>
                            <select id="role" name="role" class="form-input w-full">
                                {% set roleVal = user ? user.role : 'contributor' %}
                                <option value="admin" {{ roleVal == 'admin' ? 'selected' : '' }}>Admin</option>
                                <option value="editor" {{ roleVal == 'editor' ? 'selected' : '' }}>Editor</option>
                                <option value="author" {{ roleVal == 'author' ? 'selected' : '' }}>Yazar</option>
                                <option value="contributor" {{ roleVal == 'contributor' ? 'selected' : '' }}>Katilimci</option>
                            </select>
                        </div>
                        <div>
                            <label for="avatar" class="form-label">Avatar URL</label>
                            <input type="text" id="avatar" name="avatar"
                                   value="{{ user ? user.avatar : '' }}"
                                   class="form-input w-full"
                                   placeholder="https://ornek.com/avatar.jpg">
                        </div>
                        <div>
                            <label class="flex items-center gap-3 cursor-pointer">
                                <input type="checkbox" name="is_active" value="1"
                                       {{ (user and user.isActive) or not user ? 'checked' : '' }}
                                       class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                <span class="form-label mb-0">Aktif</span>
                            </label>
                        </div>
                    </div>
                </div>

                {# Permissions #}
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Izinler</h3>
                    </div>
                    <div class="card-body space-y-3">
                        {% set userPerms = user ? user.permissions|default([]) : [] %}
                        {% set availablePerms = [
                            {key: 'news_create', label: 'Haber Olustur'},
                            {key: 'news_edit', label: 'Haber Duzenle'},
                            {key: 'news_delete', label: 'Haber Sil'},
                            {key: 'news_publish', label: 'Haber Yayinla'},
                            {key: 'category_manage', label: 'Kategori Yonet'},
                            {key: 'media_manage', label: 'Medya Yonet'},
                            {key: 'comment_manage', label: 'Yorum Yonet'},
                            {key: 'user_manage', label: 'Kullanici Yonet'},
                            {key: 'settings_manage', label: 'Ayar Yonet'},
                            {key: 'module_manage', label: 'Modul Yonet'},
                        ] %}
                        {% for perm in availablePerms %}
                            <label class="flex items-center gap-3 cursor-pointer">
                                <input type="checkbox" name="permissions[]" value="{{ perm.key }}"
                                       {{ perm.key in userPerms ? 'checked' : '' }}
                                       class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                <span class="text-sm text-gray-700">{{ perm.label }}</span>
                            </label>
                        {% endfor %}
                    </div>
                </div>

                {# Action Buttons #}
                <div class="flex flex-col gap-3">
                    <button type="submit" class="btn-primary w-full justify-center">
                        <i class="fas fa-save mr-2"></i>
                        {{ user ? 'Guncelle' : 'Kaydet' }}
                    </button>
                    <a href="{{ path('admin_users') }}" class="btn-outline w-full justify-center">
                        <i class="fas fa-arrow-left mr-2"></i> Geri Don
                    </a>
                </div>
            </div>
        </div>
    </form>
{% endblock %}
