{% extends "mockingbird/base.html" %}
{% block content %}
<div class="row"><a class="btn" href="{% url 'route_new' api.slug %}">New route</a>
<form class="inline right" method="post" action="{% url 'mock_delete' api.slug %}" onsubmit="return confirm('Delete this mock API?')">{% csrf_token %}<button class="bad">Delete mock API</button></form></div>
<h2>Routes</h2>
<table><tr><th>Method</th><th>Pattern</th><th>Name</th><th>Match</th><th>Variants</th><th>Calls</th><th></th></tr>
{% for r in routes %}<tr class="{% if not r.enabled %}dim{% endif %}">
<td><span class="badge m-{{ r.method }}">{{ r.method }}</span></td><td><code>{{ r.pattern }}</code> {% if r.priority %}<span class="badge">prio {{ r.priority }}</span>{% endif %}</td>
<td>{{ r.name|default:"-" }}</td>
<td>{% if r.required_state %}<span class="pill">needs {{ r.required_state }}</span> {% endif %}{% if r.next_state %}<span class="pill">&rarr; {{ r.next_state }}</span> {% endif %}{% if r.matchers %}<span class="badge">{{ r.matchers|length }} matcher{{ r.matchers|length|pluralize }}</span>{% endif %}</td>
<td>{% for v in r.variants.all %}<span class="badge s{{ v.status|stringformat:'d'|slice:':1' }}">{{ v.status }}</span> {% endfor %}<span class="muted">{{ r.variant_mode }}</span></td>
<td>{{ r.call_count }}</td>
<td class="row"><a href="{% url 'route_edit' api.slug r.id %}">edit</a>
<form class="inline" method="post" action="{% url 'route_toggle' api.slug r.id %}">{% csrf_token %}<button class="sec">{% if r.enabled %}disable{% else %}enable{% endif %}</button></form>
<form class="inline" method="post" action="{% url 'route_delete' api.slug r.id %}" onsubmit="return confirm('Delete route?')">{% csrf_token %}<button class="sec">delete</button></form></td></tr>
{% empty %}<tr><td colspan="7" class="muted">No routes yet.</td></tr>{% endfor %}</table>

<h2>Explain a request</h2>
<form id="explain-form" class="card">{% csrf_token %}
<div class="grid"><div class="field"><label>Method</label><input type="text" name="method" value="GET"></div>
<div class="field"><label>Path (relative to base)</label><input type="text" name="path" value="/"></div>
<div class="field"><label>State override</label><input type="text" name="state" placeholder="{{ api.scenario_state }}"></div></div>
<div class="field"><label>Query (a=1&amp;b=2)</label><input type="text" name="query"></div>
<div class="field"><label>Headers (JSON)</label><input type="text" name="headers" value="{}"></div>
<div class="field"><label>Body</label><textarea name="body" rows="3" class="mono"></textarea></div>
<button type="submit">Explain</button></form>
<div id="explain-out"></div>
{% endblock %}
{% block scripts %}
<script>
const form = document.getElementById('explain-form'), out = document.getElementById('explain-out');
form.addEventListener('submit', async e => {
  e.preventDefault();
  const f = new FormData(form), spec = {method: f.get('method'), path: f.get('path'), body: f.get('body')};
  try { spec.headers = JSON.parse(f.get('headers') || '{}'); } catch (err) { out.textContent = 'Headers must be JSON'; return; }
  spec.query = Object.fromEntries(new URLSearchParams(f.get('query')));
  if (f.get('state')) spec.state = f.get('state');
  const r = await fetch("{% url 'explain' api.slug %}", {method: 'POST', body: JSON.stringify(spec), headers: {'X-CSRFToken': f.get('csrfmiddlewaretoken') || ''}});
  const data = await r.json();
  out.replaceChildren();
  (data.routes || []).forEach(x => {
    const d = document.createElement('div'); d.className = 'card';
    const h = document.createElement('strong'); h.textContent = (x.id === data.winner ? 'WINNER  ' : x.matched ? 'matched  ' : 'no match  ') + x.route;
    const ul = document.createElement('ul'); ul.className = 'reasons';
    x.reasons.forEach(t => { const li = document.createElement('li'); li.textContent = t; li.className = t.startsWith('FAILED') || t.includes('!=') || t.includes('does not') || t.includes('requires') ? 'fail' : 'ok'; ul.append(li); });
    d.append(h, ul); out.append(d);
  });
  if (!data.routes || !data.routes.length) out.textContent = data.error || 'No routes.';
});
</script>
{% endblock %}