{% extends "base.html" %}
{% block title %}{{ "ویرایش حساب" if user else "افزودن حساب جدید" }} — {{ APP_NAME }}{% endblock %}
{% block content %}
<div class="page-header">
  <a class="btn btn-ghost back-btn" href="{{ url_for('accounts.index') }}">‹ بازگشت</a>
  <h1 class="title">{{ "ویرایش حساب کاربری" if user else "افزودن حساب جدید" }}</h1>
</div>

<div class="glass-panel" style="max-width:560px; padding:26px 30px;">
  <form method="post" style="display:flex; flex-direction:column; gap:12px;">
    {{ form.hidden_tag() }}

    <div class="filter-field">
      {{ form.username.label }}
      {{ form.username(disabled=(user is not none)) }}
      {% if user %}<input type="hidden" name="username" value="{{ user.username }}">{% endif %}
    </div>

    <div class="filter-field">
      {{ form.full_name.label }}
      {{ form.full_name() }}
    </div>

    <div class="filter-field">
      <label>{{ "رمز عبور جدید (خالی = بدون تغییر)" if user else "رمز عبور" }}</label>
      {{ form.password() }}
    </div>

    <div class="filter-field">
      {{ form.role.label }}
      {{ form.role(disabled=(is_self is defined and is_self), id="role-select") }}
      {% if is_self is defined and is_self %}<input type="hidden" name="role" value="{{ user.role }}">{% endif %}
    </div>

    <label style="display:flex; align-items:center; gap:8px; color:var(--text-primary); font-size:14px;">
      {{ form.is_active(disabled=(is_self is defined and is_self)) }} این حساب فعال است
    </label>
    {% if is_self is defined and is_self %}<input type="hidden" name="is_active" value="y">{% endif %}

    <div class="filter-field">
      <label>دسترسی به صفحات (برای مدیر خودکار کامل است):</label>
      <div id="permissions-box" style="display:flex; flex-direction:column; gap:6px;">
        {% for subfield in form.permissions %}
        <label style="display:flex; align-items:center; gap:8px; color:var(--text-primary); font-size:13px;">
          {{ subfield() }} {{ subfield.label.text }}
        </label>
        {% endfor %}
      </div>
    </div>

    <button type="submit" class="btn btn-gold" style="min-height:46px; margin-top:8px;">✓ ذخیره</button>
  </form>
</div>

<script>
(function () {
  var roleSelect = document.getElementById("role-select");
  if (!roleSelect) return;
  var checkboxes = document.querySelectorAll("#permissions-box input[type=checkbox]");
  function sync() {
    var isAdmin = roleSelect.value === "admin";
    checkboxes.forEach(function (cb) {
      if (isAdmin) cb.checked = true;
      cb.disabled = isAdmin;
    });
  }
  roleSelect.addEventListener("change", sync);
  sync();
})();
</script>
{% endblock %}