{% extends "flags/base.html" %}
{% load static flag_extras %}
{% block title %}Segment{% endblock %}
{% block content %}
<div class="page-head"><h1>{% if segment %}Segment <code>{{ segment.key }}</code>{% else %}New segment{% endif %}</h1></div>
<form method="post" style="max-width:820px">{% csrf_token %}
  <div class="card">
    <div class="field"><label>Key</label>{% if segment %}<code>{{ segment.key }}</code>{% else %}<input name="key" value="{{ state.key }}" required pattern="[-a-zA-Z0-9_]+">{% endif %}</div>
    <div class="field"><label>Name</label><input name="name" value="{{ state.name }}"></div>
    <div class="field"><label>Included keys</label><textarea name="included" rows="3" placeholder="context keys, one per line">{{ state.included|lines }}</textarea></div>
    <div class="field"><label>Excluded keys</label><textarea name="excluded" rows="3" placeholder="always excluded, even if a rule matches">{{ state.excluded|lines }}</textarea>
      <div class="hint">Excluded wins over included, included wins over rules.</div></div>
  </div>
  <div class="card"><h2>Rules</h2><div class="hint" style="margin-bottom:8px">A context is in the segment if any rule matches (clauses within a rule are AND-ed).</div>
    <div id="rules-mount"></div><input type="hidden" name="rules_json" id="rules_json"></div>
  <button class="btn primary">Save segment</button>
</form>
{{ editor|json_script:"editor-data" }}
{% endblock %}
{% block scripts %}<script type="module" src="{% static 'flags/editor.js' %}"></script>{% endblock %}