{% extends "settings/layout.html" %}

{% block settings_content %}
<div class="ui-pane">
  {% if is_local_mode %}
  <h2 class="ui-section-title">Security</h2>
  <p class="ui-section-subtitle text-slate-500 dark:text-slate-400 mt-2">Authentication is automatic in local mode. No password is required.</p>
  {% else %}
  <h2 class="ui-section-title">Change Password</h2>
  <p class="ui-section-subtitle">Update your password to keep your account secure.</p>

  {% if error %}
    <div class="mt-4 ui-alert border-rose-300 dark:border-rose-500/60 bg-rose-50 dark:bg-rose-500/10 text-rose-600 dark:text-rose-200">
      {{ error }}
    </div>
  {% endif %}

  <form class="ui-form-scope mt-6 space-y-4" method="post" action="/settings/security">
    <div>
      <label class="ui-form-label" for="current_password">Current Password</label>
      <div class="relative mt-2">
        <input
          class="ui-form-input px-4 py-3 pr-11 w-full"
          type="password"
          name="current_password"
          id="current_password"
          placeholder="Enter your current password"
          required
        />
        <button type="button" onclick="togglePassword('current_password', this)"
                class="absolute inset-y-0 right-0 flex items-center px-3 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path class="eye-open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
            <path class="eye-open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
            <path class="eye-closed hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M13.875 18.825A10.05 10.05 0 0112 19c-4.477 0-8.268-2.943-9.542-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M3 3l18 18"/>
          </svg>
        </button>
      </div>
    </div>
    <div>
      <label class="ui-form-label" for="new_password">New Password</label>
      <div class="relative mt-2">
        <input
          class="ui-form-input px-4 py-3 pr-11 w-full"
          type="password"
          name="new_password"
          id="new_password"
          placeholder="Enter your new password (minimum 8 characters)"
          required
          minlength="8"
        />
        <button type="button" onclick="togglePassword('new_password', this)"
                class="absolute inset-y-0 right-0 flex items-center px-3 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path class="eye-open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
            <path class="eye-open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
            <path class="eye-closed hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M13.875 18.825A10.05 10.05 0 0112 19c-4.477 0-8.268-2.943-9.542-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M3 3l18 18"/>
          </svg>
        </button>
      </div>
    </div>
    <div>
      <label class="ui-form-label" for="confirm_password">Confirm New Password</label>
      <div class="relative mt-2">
        <input
          class="ui-form-input px-4 py-3 pr-11 w-full"
          type="password"
          name="confirm_password"
          id="confirm_password"
          placeholder="Confirm your new password"
          required
          minlength="8"
        />
        <button type="button" onclick="togglePassword('confirm_password', this)"
                class="absolute inset-y-0 right-0 flex items-center px-3 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path class="eye-open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
            <path class="eye-open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
            <path class="eye-closed hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M13.875 18.825A10.05 10.05 0 0112 19c-4.477 0-8.268-2.943-9.542-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M3 3l18 18"/>
          </svg>
        </button>
      </div>
    </div>
    <button
      class="mt-2 ui-btn-primary"
      type="submit"
    >
      Change Password
    </button>
  </form>
  {% endif %}
</div>

<script>
function togglePassword(fieldId, btn) {
  const input = document.getElementById(fieldId);
  const isHidden = input.type === 'password';
  input.type = isHidden ? 'text' : 'password';
  btn.querySelectorAll('.eye-open').forEach(el => el.classList.toggle('hidden', isHidden));
  btn.querySelectorAll('.eye-closed').forEach(el => el.classList.toggle('hidden', !isHidden));
}
</script>
{% endblock %}