{% extends "base.html" %}
{% block title %}Settings | BancaNet{% endblock %}
{% block content %}
<div class="ajustes-kia">
  <h1 class="ajustes-kia__title">{{ t('settings.title') }}</h1>

  <section class="ajustes-kia__card">
    <h2>{{ t('settings.language') }}</h2>
    <p class="ajustes-kia__hint">{{ t('settings.language_hint') }}</p>
    <form method="post" action="{{ url_for('user.set_language') }}" class="ajustes-kia__langs">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <input type="hidden" name="next" value="{{ url_for('user.about') }}">
      <button type="submit" name="lang" value="es" class="{{ 'is-on' if lang == 'es' else '' }}">{{ t('settings.lang.es') }}</button>
      <button type="submit" name="lang" value="en" class="{{ 'is-on' if lang == 'en' else '' }}">{{ t('settings.lang.en') }}</button>
    </form>
  </section>

  <section class="ajustes-kia__card">
    <h2>{{ t('settings.my_info') }}</h2>
    <dl class="ajustes-kia__info">
      <div><dt>{{ t('settings.phone') }}</dt><dd>{{ user.phone }}</dd></div>
      <div><dt>{{ t('settings.id') }}</dt><dd>#{{ user.id }}</dd></div>
      <div><dt>{{ t('settings.invite') }}</dt><dd>{{ user.referral_code or '—' }}</dd></div>
      <div><dt>{{ t('settings.member_since') }}</dt><dd>{{ user.created_at.strftime('%d/%m/%Y') if user.created_at else '—' }}</dd></div>
    </dl>
  </section>

  <section class="ajustes-kia__card">
    <div class="ajustes-kia__row">
      <h2>{{ t('settings.recent') }}</h2>
      <a href="{{ url_for('user.reports') }}">{{ t('settings.see_all') }}</a>
    </div>
    {% if recent_activity %}
    <ul class="ajustes-kia__activity">
      {% for item in recent_activity %}
      <li>
        <span class="ajustes-kia__act-label">{{ item.label }}</span>
        <strong class="ajustes-kia__act-amount">MX$ {{ "%.2f"|format(item.amount) }}</strong>
        <small>{{ item.at.strftime('%d/%m %H:%M') if item.at else '' }}{% if item.status %} · {{ item.status }}{% endif %}</small>
      </li>
      {% endfor %}
    </ul>
    {% else %}
    <p class="ajustes-kia__empty">{{ t('settings.recent_empty') }}</p>
    {% endif %}
  </section>

  <section class="ajustes-kia__card">
    <button type="button" class="ajustes-kia__about-btn" id="ajustes-about-toggle" aria-expanded="false" aria-controls="ajustes-about-panel">
      {{ t('settings.about_btn') }}
    </button>
    <div class="ajustes-kia__about-panel" id="ajustes-about-panel" hidden>
      <p>{{ t('settings.about_body') }}</p>
    </div>
  </section>

  <section class="ajustes-kia__links">
    <a href="{{ url_for('security.change_password') }}">{{ t('settings.password') }}</a>
    <a href="{{ url_for('user.contact') }}">{{ t('settings.contact') }}</a>
  </section>
</div>
{% endblock %}
{% block scripts %}
<script>
(function () {
  var btn = document.getElementById('ajustes-about-toggle');
  var panel = document.getElementById('ajustes-about-panel');
  if (!btn || !panel) return;
  btn.addEventListener('click', function () {
    var open = panel.hasAttribute('hidden');
    if (open) panel.removeAttribute('hidden');
    else panel.setAttribute('hidden', '');
    btn.setAttribute('aria-expanded', open ? 'true' : 'false');
  });
})();
</script>
{% endblock %}