{% extends 'base.html' %}

{% block title %}{{ _('Configuración') }}{% endblock %}

{% block content %}
<div class="container d-flex justify-content-center mt-5">
  <div class="card shadow p-4" style="max-width: 500px; width: 100%;">
    <h4 class="mb-4 text-center">
      <i class="bi bi-gear-fill me-2"></i>{{ _('Configuración del Usuario') }}
    </h4>
    <form method="POST" action="{{ url_for('user_settings') }}">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

      <div class="mb-3">
        <label for="contracts_per_trade" class="form-label">{{ _('Contratos por operación') }}</label>
        <input type="number" name="contracts_per_trade" id="contracts_per_trade" class="form-control"
            value="{{ current_user.contracts_per_trade }}">
      </div>
      <div class="mb-3">
        <label for="commission_per_leg" class="form-label">{{ _('Comisión por pata') }}</label>
        <input type="number" step="0.01" name="commission_per_leg" id="commission_per_leg" class="form-control"
            value="{{ current_user.commission_per_leg }}">
      </div>
      <div class="mb-3">
        <label for="preferred_language" class="form-label">{{ _('Idioma') }}</label>
        <select name="preferred_language" id="preferred_language" class="form-select">
          <option value="en" {% if current_user.preferred_language=='en' %}selected{% endif %}>English</option>
          <option value="es" {% if current_user.preferred_language=='es' %}selected{% endif %}>Español</option>
        </select>
      </div>
      <div class="mb-4">
        <label for="theme_mode" class="form-label">{{ _('Modo visual') }}</label>
        <select name="theme_mode" id="theme_mode" class="form-select">
          <option value="light" {% if current_user.theme_mode=='light' %}selected{% endif %}>Light</option>
          <option value="dark" {% if current_user.theme_mode=='dark' %}selected{% endif %}>Dark</option>
        </select>
      </div>
      <div class="d-grid">
        <button type="submit" class="btn btn-primary">
          <i class="bi bi-save me-1"></i>{{ _('Guardar Cambios') }}
        </button>
      </div>
    </form>
  </div>
</div>
{% endblock %}


{% block scripts %}
{{ super() }}

<script>
  document.addEventListener('DOMContentLoaded', () => {
    initThemeToggle();

  });
</script>
{% endblock %}