{# Generic repeatable-row editor for a list[<BaseModel>] settings field.
   Driven entirely by field.sub_fields — no adapter-name branching.
   Vanilla IIFE JS, matching _region_picker.html. #}
{% set rows = (form_data[field.name] if form_data and field.name in form_data else field.current_value) or [] %}
{# Auto-detect a bbox row model (min/max lon+lat) to show a read-only map
   preview; non-bbox model_lists (StateConfig, TileCoord) render no map. #}
{% set _bbox_keys = ['min_lon', 'min_lat', 'max_lon', 'max_lat'] %}
{% set _ns = namespace(hits=0) %}
{% for sub in field.sub_fields %}{% if sub.name in _bbox_keys %}{% set _ns.hits = _ns.hits + 1 %}{% endif %}{% endfor %}
{% set is_bbox = _ns.hits == 4 %}
<div class="model-list" data-field="{{ field.name }}">
    <label>{{ field.label }}</label>
    {% if field.description %}<small>{{ field.description }}</small>{% endif %}
    {% if errors and errors[field.name] %}
    <small class="field-error">{{ errors[field.name] }}</small>
    {% endif %}

    {% if is_bbox %}{% include "_partials/bbox_map.html" %}{% endif %}

    <div class="table-wrap"><table class="model-list-table">
        <thead><tr>
            {% for sub in field.sub_fields %}<th>{{ sub.label }}</th>{% endfor %}<th></th>
        </tr></thead>
        <tbody class="model-list-body">
            {% for row in rows %}{% set ridx = loop.index0 %}
            <tr class="model-list-row">
                {% for sub in field.sub_fields %}
                <td>
                    {% if sub.widget == "select" %}
                    <select data-sub="{{ sub.name }}" name="{{ field.name }}-{{ ridx }}-{{ sub.name }}">
                        {% for opt in sub.options %}<option value="{{ opt }}" {% if row.get(sub.name)|string == opt %}selected{% endif %}>{{ opt }}</option>{% endfor %}
                    </select>
                    {% elif sub.widget == "number" %}
                    <input type="number" step="any" data-sub="{{ sub.name }}"
                           name="{{ field.name }}-{{ ridx }}-{{ sub.name }}"
                           value="{{ row.get(sub.name) if row.get(sub.name) is not none else '' }}">
                    {% else %}
                    <input type="text" data-sub="{{ sub.name }}"
                           name="{{ field.name }}-{{ ridx }}-{{ sub.name }}"
                           value="{{ row.get(sub.name) if row.get(sub.name) is not none else '' }}">
                    {% endif %}
                </td>
                {% endfor %}
                <td><button type="button" class="btn-outline model-list-del">Remove</button></td>
            </tr>
            {% endfor %}
        </tbody>
    </table></div>

    <button type="button" class="btn-secondary model-list-add">+ Add row</button>

    <template class="model-list-template"><tr class="model-list-row">
        {% for sub in field.sub_fields %}
        <td>
            {% if sub.widget == "select" %}
            <select data-sub="{{ sub.name }}">{% for opt in sub.options %}<option value="{{ opt }}">{{ opt }}</option>{% endfor %}</select>
            {% elif sub.widget == "number" %}
            <input type="number" step="any" data-sub="{{ sub.name }}">
            {% else %}
            <input type="text" data-sub="{{ sub.name }}">
            {% endif %}
        </td>
        {% endfor %}
        <td><button type="button" class="btn-outline model-list-del">Remove</button></td>
    </tr></template>
</div>

{% if quota %}
<div class="quota-panel flash {% if quota.blocked %}flash-error{% elif quota.warn %}flash-warn{% endif %}"
     data-field="{{ field.name }}"
     data-quota-cap="{{ quota.cap }}"
     data-quota-spm="{{ quota.seconds_per_month }}"
     data-quota-default="{{ quota.default_cadence_s }}">
    <strong>API quota:</strong> <span class="quota-detail">{{ quota.detail }}</span>
    <span class="quota-msg">{% if quota.blocked %}<br>⛔ Over free-tier cap — reduce calls before saving.{% elif quota.warn %}<br>⚠️ Approaching free-tier cap.{% endif %}</span>
</div>
{% endif %}

<script>
(function() {
    document.querySelectorAll('.model-list').forEach(function(container) {
        var field = container.dataset.field;
        var body = container.querySelector('.model-list-body');
        var tmpl = container.querySelector('.model-list-template');
        var addBtn = container.querySelector('.model-list-add');
        function renumber() {
            body.querySelectorAll('.model-list-row').forEach(function(row, i) {
                row.querySelectorAll('[data-sub]').forEach(function(el) {
                    el.name = field + '-' + i + '-' + el.dataset.sub;
                });
            });
        }
        function wireDelete(row) {
            var del = row.querySelector('.model-list-del');
            if (del) del.addEventListener('click', function() { row.remove(); renumber(); });
        }
        body.querySelectorAll('.model-list-row').forEach(wireDelete);
        addBtn.addEventListener('click', function() {
            var frag = tmpl.content.cloneNode(true);
            var row = frag.querySelector('.model-list-row');
            body.appendChild(frag);
            wireDelete(row);
            renumber();
        });
        renumber();
    });
})();
</script>

<script>
// v0.9.15: live client-side mirror of TomTomIncidentsAdapter.quota_estimate --
// recompute the est. monthly call count as the operator edits a cadence input
// or adds/removes a bbox row, without waiting for Save. Vanilla, self-contained,
// and a no-op when no quota panel is present (non-TomTom model_lists).
(function() {
    function init() {
        var panel = document.querySelector('.quota-panel[data-field]');
        if (!panel) return;
        var container = document.querySelector(
            '.model-list[data-field="' + panel.dataset.field + '"]');
        if (!container) return;
        var body = container.querySelector('.model-list-body');
        if (!body) return;
        var CAP = parseFloat(panel.dataset.quotaCap);
        var SPM = parseFloat(panel.dataset.quotaSpm);
        var DEF = parseFloat(panel.dataset.quotaDefault);
        var detailEl = panel.querySelector('.quota-detail');
        var msgEl = panel.querySelector('.quota-msg');

        // Server uses the adapter-level cadence as a floor:
        // effective = max(adapter_cadence, bbox_cadence || default).
        function adapterCadence() {
            var el = document.getElementById('cadence_s');
            var v = el ? parseFloat(el.value) : NaN;
            return isNaN(v) ? 0 : v;
        }
        function recompute() {
            var rows = body.querySelectorAll('.model-list-row');
            var floor = adapterCadence(), calls = 0;
            rows.forEach(function(row) {
                var el = row.querySelector('[data-sub="cadence_s"]');
                var bc = el ? parseFloat(el.value) : NaN;
                var eff = Math.max(floor, isNaN(bc) ? DEF : bc);
                if (eff > 0) calls += SPM / eff;
            });
            var cpm = Math.round(calls);
            var pct = CAP ? (cpm / CAP * 100) : 0;
            var warn = pct >= 80, blocked = pct >= 100;
            detailEl.textContent = cpm.toLocaleString() + ' est. calls/month across '
                + rows.length + ' bbox(es) vs ' + CAP.toLocaleString()
                + '/month free tier (' + Math.round(pct) + '%)';
            msgEl.innerHTML = blocked
                ? '<br>⛔ Over free-tier cap — reduce calls before saving.'
                : (warn ? '<br>⚠️ Approaching free-tier cap.' : '');
            panel.classList.toggle('flash-error', blocked);
            panel.classList.toggle('flash-warn', warn && !blocked);
        }
        body.addEventListener('input', recompute);
        var core = document.getElementById('cadence_s');
        if (core) core.addEventListener('input', recompute);
        new MutationObserver(recompute).observe(body, { childList: true });
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();
</script>