{% extends 'base.html' %}
{% block content %}
<div class="row g-3">
  <div class="col-xl-6">
    <div class="card"><div class="card-body">
      <h1 class="h4 mb-3">{{ t('preferences.title') }}</h1>
      <form method="post">{{ form.hidden_tag() }}
        <div class="row g-3">
          <div class="col-md-6"><label class="form-label">{{ t('preferences.language') }}</label>{{ form.language(class='form-select') }}</div>
          <div class="col-md-6"><label class="form-label">{{ t('preferences.theme') }}</label>{{ form.theme(class='form-select') }}</div>
          <div class="col-md-6"><label class="form-label">{{ t('preferences.reports') }}</label>{{ form.report_frequency(class='form-select', disabled=(not report_options_enabled)) }}</div>
          <div class="col-md-6"><label class="form-label">{{ t('preferences.currency') }}</label>{{ form.default_currency(class='form-select') }}</div>
        </div>
        {% if not report_options_enabled %}<div class="alert alert-secondary mt-3 mb-0">{{ t('preferences.reports_disabled') }}</div>{% endif %}
        <button class="btn btn-primary mt-3">{{ t('preferences.save') }}</button>
      </form>
    </div></div>
  </div>
  <div class="col-xl-6">
    <div class="card"><div class="card-body">
      <h2 class="h4 mb-3">{{ t('preferences.my_categories') }}</h2>
      <form method="post">{{ category_form.hidden_tag() }}
        <div class="row g-3">
          <div class="col-md-4"><label class="form-label">{{ t('preferences.category_key') }}</label>{{ category_form.key(class='form-control') }}</div>
          <div class="col-md-4"><label class="form-label">{{ t('preferences.category_name_pl') }}</label>{{ category_form.name_pl(class='form-control') }}</div>
          <div class="col-md-4"><label class="form-label">{{ t('preferences.category_name_en') }}</label>{{ category_form.name_en(class='form-control') }}</div>
          <div class="col-md-6"><label class="form-label">{{ t('preferences.category_color') }}</label>{{ category_form.color(class='form-select') }}</div>
        </div>
        <button class="btn btn-outline-primary mt-3">{{ t('common.save') }}</button>
      </form>
      <div class="mt-4 d-flex flex-wrap gap-2">{% for category in my_categories %}<span class="badge text-bg-{{ category.color }}">{{ category.localized_name(current_language) }}</span>{% else %}<span class="text-body-secondary">{{ t('common.no_data') }}</span>{% endfor %}</div>
    </div></div>
  </div>
</div>
{% endblock %}