{% extends 'base.html' %}
{% from '_icons.html' import icon %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <div><h1 class="page-title mb-1">{{ 'Kullanıcı Düzenle' if user.id else 'Yeni Kullanıcı' }}</h1><div class="text-secondary">Personel hesabı ve ekran erişimlerini yönetin</div></div>
  <a class="btn btn-outline-secondary" href="{{ url_for('main.users') }}">{{ icon('back', 18) }} Listeye Dön</a>
</div>
<form method="post" id="userForm">
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
  <div class="card p-4 mb-3">
    <div class="form-section-title"><span class="section-icon">{{ icon('users', 19) }}</span><div>Hesap Bilgileri<small class="d-block text-secondary fw-normal mt-1">Kullanıcının giriş yapacağı temel bilgiler</small></div></div>
    <div class="row g-3">
      <div class="col-md-4"><label class="form-label required">Ad soyad</label><input class="form-control" name="full_name" value="{{ user.full_name or '' }}" placeholder="Personelin ad ve soyadı" required></div>
      <div class="col-md-4"><label class="form-label required">Kullanıcı adı</label><input class="form-control" name="username" value="{{ user.username or '' }}" autocomplete="off" placeholder="Örn. ahmet.yilmaz" required></div>
      <div class="col-md-4"><label class="form-label {{ 'required' if not user.id else '' }}">Parola</label><input class="form-control" type="password" name="password" minlength="8" autocomplete="new-password" {% if not user.id %}required{% endif %} placeholder="{{ 'Değiştirmiyorsanız boş bırakın' if user.id else 'En az 8 karakter' }}"><div class="form-hint">{{ icon('shield', 14) }} En az 8 karakter kullanın.</div></div>
      <div class="col-md-6">
        <label class="option-card" for="active">
          <input class="form-check-input" type="checkbox" name="is_active" value="1" id="active" {% if user.is_active %}checked{% endif %}>
          <span><strong>Aktif kullanıcı</strong><small>Hesaba giriş yapabilir.</small></span>
        </label>
      </div>
      <div class="col-md-6">
        <label class="option-card" for="admin">
          <input class="form-check-input" type="checkbox" name="is_admin" value="1" id="admin" {% if user.is_admin %}checked{% endif %}>
          <span><strong>Tam yönetici</strong><small>Tüm ekran ve işlemlere erişir.</small></span>
        </label>
      </div>
    </div>
  </div>

  <div class="card p-4 mb-3" id="permissionPanel">
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
      <div class="form-section-title mb-0"><span class="section-icon">{{ icon('shield', 19) }}</span><div>Ekran ve İşlem Yetkileri<small class="d-block text-secondary fw-normal mt-1">Standart kullanıcı için en az bir yetki seçilmelidir</small></div></div>
      <div class="btn-group btn-group-sm" role="group" aria-label="Hızlı yetki seçimi">
        <button type="button" class="btn btn-outline-secondary permission-preset" data-preset="basic">Temel Kullanım</button>
        <button type="button" class="btn btn-outline-secondary permission-preset" data-preset="all">Tümünü Seç</button>
        <button type="button" class="btn btn-outline-secondary permission-preset" data-preset="none">Temizle</button>
      </div>
    </div>
    <div class="row g-2">
      {% for code, label in permissions.items() %}
      <div class="col-md-6 col-xl-4">
        <label class="permission-card" for="p{{ loop.index }}">
          <input class="form-check-input permission-input" type="checkbox" name="perm_{{ code }}" value="1" data-code="{{ code }}" id="p{{ loop.index }}" {% if code in user.permission_set() %}checked{% endif %}>
          <span>{{ label }}</span>
        </label>
      </div>
      {% endfor %}
    </div>
  </div>
  <div class="d-flex gap-2"><button class="btn btn-brand">{{ icon('save', 18) }} Kullanıcıyı Kaydet</button><a class="btn btn-light" href="{{ url_for('main.users') }}">Vazgeç</a></div>
</form>
{% endblock %}
{% block scripts %}
<script>
const adminToggle=document.getElementById('admin');
const permissionPanel=document.getElementById('permissionPanel');
const permissionInputs=[...document.querySelectorAll('.permission-input')];
const basicPermissions=new Set(['dashboard.view','institutions.view','invoices.view','payments.view','reports.view']);
function syncAdminState(){permissionPanel.classList.toggle('permission-panel-disabled',adminToggle.checked);}
adminToggle.addEventListener('change',syncAdminState);syncAdminState();
document.querySelectorAll('.permission-preset').forEach(button=>button.addEventListener('click',()=>{
  const preset=button.dataset.preset;
  permissionInputs.forEach(input=>input.checked=preset==='all'||(preset==='basic'&&basicPermissions.has(input.dataset.code)));
}));
</script>
{% endblock %}