{% extends "madga/studio/base.html" %}
{% load i18n madga_studio_tags %}

{% block breadcrumbs %}<span class="crumb is-current">Settings</span>{% endblock %}

{% block content %}
<div class="madga-page" style="max-width:880px;">
  <div class="madga-page-header">
    <div class="madga-page-title-block">
      <h1 class="madga-page-title">Settings</h1>
      <p class="madga-page-subtitle">Configuración global del sitio.</p>
    </div>
  </div>

  <div class="madga-settings-tabs">
    {% for tab in tabs %}
      <a href="?tab={{ tab.key }}" class="madga-settings-tab {% if current_tab == tab.key %}is-active{% endif %}">{{ tab.label }}</a>
    {% endfor %}
  </div>

  <form method="post" enctype="multipart/form-data" class="madga-card" style="padding:20px;">
    {% csrf_token %}
    <input type="hidden" name="active_tab" value="{{ current_tab }}">

    {% for tab in tabs %}
      <div class="madga-settings-pane" {% if current_tab != tab.key %}hidden{% endif %} data-tab="{{ tab.key }}">
        {% for fname in tab.fields %}
          {% with field=bound|get_item:fname %}
            {% if field %}
              <div class="madga-field">
                <label class="madga-field-label">{{ field.label }}</label>
                {{ field }}
                {% if field.help_text %}<span class="madga-field-help">{{ field.help_text }}</span>{% endif %}
                {% if field.errors %}<span class="madga-field-error">{{ field.errors }}</span>{% endif %}
              </div>
            {% endif %}
          {% endwith %}
        {% endfor %}
      </div>
    {% endfor %}

    <div style="display:flex; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border);">
      <button type="submit" class="madga-btn madga-btn--primary">{% trans "Guardar cambios" %}</button>
    </div>
  </form>

  {% if current_tab == 'integrations' and site %}
  <div class="madga-card" style="margin-top:18px;">
    <h3 style="font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-2); margin:0 0 10px;">API key</h3>
    <code style="display:block; padding:10px; background:var(--bg-input); border:1px solid var(--border-strong); border-radius:6px; font-size:12px; color:var(--fg-0); word-break:break-all; font-family:var(--font-mono);">{{ site.api_key }}</code>
    <span class="madga-field-help" style="display:block; margin-top:8px;">Usa esta clave en el header <code>Authorization: Bearer …</code> al consumir la API headless.</span>
  </div>
  {% endif %}
</div>

<style>
  /* Auto-style Django form widgets to match our madga-* classes. */
  form .madga-card input[type=text],
  form .madga-card input[type=email],
  form .madga-card input[type=url],
  form .madga-card input[type=number],
  form .madga-card select,
  form .madga-card textarea {
    width: 100%; box-sizing: border-box;
    background: var(--bg-input); border: 1px solid var(--border-strong);
    color: var(--fg-0); border-radius: 6px; padding: 8px 10px;
    font-family: inherit; font-size: 13px;
  }
  form .madga-card input[type=color] {
    width: 56px; height: 32px; padding: 0;
    border: 1px solid var(--border-strong); border-radius: 6px;
    background: var(--bg-input);
  }
</style>
{% endblock %}