<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}ECO-CODES{% endblock %}</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: system-ui, sans-serif; background: #f5f5f5; color: #222; }
    .container { max-width: 960px; margin: auto; padding: 1.5rem; }

    /* ── Shared language-toggle (segmented control) ─────────────────────── */
    .lang-toggle { display: inline-flex; border: 1px solid #cbd5e1;
                   border-radius: .4rem; overflow: hidden; }
    .lang-btn    { background: #fff; border: none; padding: .3rem .65rem;
                   font-size: .75rem; font-weight: 700; color: #64748b;
                   cursor: pointer; transition: background .15s, color .15s; }
    .lang-btn:hover           { background: #f1f5f9; }
    .lang-btn.active          { background: #2563eb; color: #fff; }
    /* Dark-card variant used by the mobile capture page */
    .card .lang-toggle        { border-color: #444; }
    .card .lang-btn           { background: #2a2a2a; color: #aaa; }
    .card .lang-btn:hover     { background: #333; }
    .card .lang-btn.active    { background: #2563eb; color: #fff; }
  </style>
  {% block head %}{% endblock %}
</head>
<body>
  {% block content %}{% endblock %}

  <!-- ── Shared i18n runtime ─────────────────────────────────────────────
       Each page defines its own translation dict and calls initI18n(dict)
       on DOMContentLoaded. Elements declare their key via:
         <span data-i18n="some.key">English fallback</span>
       Attributes (title, placeholder, etc.) use data-i18n-attr:
         <button data-i18n-attr="title:tooltip.help">…</button>
       Param interpolation: t('msg.count', { n: 5 }) for "{n} items".
  ──────────────────────────────────────────────────────────────────────-->
  <script>
    const __I18N = { dict: null };

    function getLang() { return localStorage.getItem('lang') || 'es'; }

    function setLang(lang) {
      if (lang !== 'en' && lang !== 'es') return;
      localStorage.setItem('lang', lang);
      document.documentElement.lang = lang;
      if (__I18N.dict) applyI18n(__I18N.dict);
      document.querySelectorAll('.lang-btn').forEach(b => {
        b.classList.toggle('active', b.dataset.lang === lang);
      });
    }

    function t(key, params) {
      const d = __I18N.dict;
      if (!d) return key;
      const lang = getLang();
      const raw  = (d[lang] && d[lang][key])
                || (d.en   && d.en[key])
                || key;
      if (!params) return raw;
      return raw.replace(/\{(\w+)\}/g, (_, k) => (params[k] ?? ''));
    }

    function applyI18n(dict) {
      __I18N.dict = dict;
      const lang = getLang();
      document.documentElement.lang = lang;

      document.querySelectorAll('[data-i18n]').forEach(el => {
        el.textContent = t(el.dataset.i18n);
      });
      document.querySelectorAll('[data-i18n-attr]').forEach(el => {
        // format: "attr:key,attr2:key2"
        el.dataset.i18nAttr.split(',').forEach(pair => {
          const [attr, key] = pair.split(':').map(s => s.trim());
          if (attr && key) el.setAttribute(attr, t(key));
        });
      });
      if (dict[lang] && dict[lang]['page.title']) {
        document.title = t('page.title');
      }
      // Pages with interpolated labels (e.g. "{n} pending") can't use
      // data-i18n alone — they listen for this event to re-run their own
      // render functions whenever the active language changes.
      window.dispatchEvent(new CustomEvent('langchange', { detail: { lang } }));
    }

    function initI18n(dict) {
      applyI18n(dict);
      document.querySelectorAll('.lang-btn').forEach(b => {
        b.classList.toggle('active', b.dataset.lang === getLang());
        b.addEventListener('click', () => setLang(b.dataset.lang));
      });
    }
  </script>
</body>
</html>