{% extends "mockingbird/base.html" %}
{% block content %}
<h2>{% if route.pk %}Edit route{% else %}New route{% endif %}</h2>
<form method="post" id="route-form">{% csrf_token %}
<div class="card"><div class="grid">
{% for f in form %}{% if f.name != 'matchers_text' %}<div class="field">{{ f.label_tag }}{{ f }}{{ f.errors }}</div>{% endif %}{% endfor %}</div>
<div class="help">Patterns: <code>/users/{id}</code>, <code>/users/{id:int}</code>, <code>/files/*</code>. Static segments beat params, params beat wildcards, then priority.</div>
<div class="field" style="margin-top:12px">{{ form.matchers_text.label_tag }}{{ form.matchers_text }}<div class="help">{{ form.matchers_text.help_text }}</div>{{ form.matchers_text.errors }}</div></div>

<h2>Response variants</h2>
{{ formset.management_form }}{{ formset.non_form_errors }}
<div id="variants">{% for vf in formset %}{% include "mockingbird/_variant.html" with vf=vf %}{% endfor %}</div>
<template id="variant-template">{% include "mockingbird/_variant.html" with vf=formset.empty_form %}</template>
<div class="row"><button type="button" class="sec" id="add-variant">Add variant</button><span class="help">Weighted mode picks randomly by weight; sequence modes use variants in order (first call, second call...).</span></div>

<h2>Preview against a sample request</h2>
<div class="card"><div class="grid">
<div class="field"><label>Variant #</label><input type="number" id="pv-index" value="1" min="1"></div>
<div class="field"><label>Method</label><input type="text" id="pv-method" value="GET"></div>
<div class="field"><label>Path</label><input type="text" id="pv-path" value="/"></div></div>
<div class="field"><label>Query</label><input type="text" id="pv-query" placeholder="page=2"></div>
<div class="field"><label>Headers (JSON)</label><input type="text" id="pv-headers" value="{}"></div>
<div class="field"><label>Body</label><textarea id="pv-body" rows="3" class="mono"></textarea></div>
<button type="button" id="pv-run" class="sec">Render preview</button><pre id="pv-out" style="margin-top:12px">(nothing rendered yet)</pre></div>
<div class="row"><button type="submit">Save route</button><a class="btn sec" href="{% url 'routes' api.slug %}">Cancel</a></div>
</form>
{% endblock %}
{% block scripts %}
<script>
const total = document.getElementById('id_variants-TOTAL_FORMS'), box = document.getElementById('variants');
document.getElementById('add-variant').onclick = () => {
  const html = document.getElementById('variant-template').innerHTML.replaceAll('__prefix__', total.value);
  box.insertAdjacentHTML('beforeend', html); total.value = +total.value + 1;
};
const val = (n, name) => (document.querySelector(`[name="variants-${n}-${name}"]`) || {}).value || '';
document.getElementById('pv-run').onclick = async () => {
  const out = document.getElementById('pv-out'), n = +document.getElementById('pv-index').value - 1;
  let headers; try { headers = JSON.parse(document.getElementById('pv-headers').value || '{}'); } catch (e) { out.textContent = 'Sample headers must be JSON'; return; }
  const sample = {method: document.getElementById('pv-method').value, path: document.getElementById('pv-path').value, body: document.getElementById('pv-body').value, headers,
    query: Object.fromEntries(new URLSearchParams(document.getElementById('pv-query').value))};
  const r = await fetch("{% url 'preview' api.slug %}", {method: 'POST', headers: {'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value},
    body: JSON.stringify({request: sample, pattern: document.getElementById('id_pattern').value, status: val(n, 'status'), headers: val(n, 'headers'), body: val(n, 'body')})});
  const d = await r.json();
  out.textContent = d.error ? 'ERROR: ' + d.error : `HTTP ${d.status}\n${Object.entries(d.headers).map(([k, v]) => k + ': ' + v).join('\n')}\n\n${d.body}`;
};
</script>
{% endblock %}