{% extends "flags/base.html" %}
{% load static flag_extras %}
{% block title %}{{ flag.key }} - {{ env.name }}{% endblock %}
{% block content %}
<div class="page-head">
  <h1>{{ flag.name }}</h1><code>{{ flag.key }}</code>
  <span class="badge">{{ flag.type }}</span>
  {% if flag.is_experiment %}<span class="badge exp">experiment</span>{% endif %}
  <span class="spacer"></span>
  {% if flag.is_experiment %}<a class="btn" href="{% url 'flag_results' project.key env.key flag.key %}">Results</a>{% endif %}
  <a class="btn" href="{% url 'flag_audit' project.key env.key flag.key %}">Audit log</a>
  <a class="btn" href="{% url 'flag_settings' project.key env.key flag.key %}">Settings</a>
</div>
{% if flag.description %}<p class="muted">{{ flag.description }}</p>{% endif %}
<div class="grid">
<form method="post" id="config-form">{% csrf_token %}
  <div class="card">
    <h2>Targeting in {{ env.name }}</h2>
    <label><input type="checkbox" name="enabled" {% if state.enabled %}checked{% endif %}> Targeting enabled</label>
    <div class="hint">When disabled, everyone gets the off variation.</div>
  </div>
  <div class="card"><h2>Prerequisites</h2>
    <div class="hint" style="margin-bottom:8px">This flag is only evaluated if every prerequisite flag serves the stated variation.</div>
    <div id="prereq-mount"></div><input type="hidden" name="prerequisites_json" id="prerequisites_json"></div>
  <div class="card"><h2>Individual targets</h2>
    <div class="targets">
    {% for row in variation_rows %}
      <div class="field"><label>{{ row.value|pretty }} <span class="muted">(variation {{ row.index }})</span></label>
      <textarea name="targets_{{ row.index }}" placeholder="context keys, one per line">{{ row.targets }}</textarea></div>
    {% endfor %}
    </div>
  </div>
  <div class="card"><h2>Rules</h2>
    <div class="hint" style="margin-bottom:8px">Evaluated top to bottom; the first rule whose clauses all match wins.</div>
    <div id="rules-mount"></div><input type="hidden" name="rules_json" id="rules_json"></div>
  <div class="card"><h2>Default rule (fallthrough)</h2>
    <div id="fallthrough-mount"></div><input type="hidden" name="fallthrough_json" id="fallthrough_json"></div>
  <div class="card"><h2>When targeting is off</h2>
    <select name="off_variation">
      <option value="" {% if state.off_variation is None %}selected{% endif %}>No value (SDK default)</option>
      {% for row in variation_rows %}<option value="{{ row.index }}" {% if state.off_variation == row.index %}selected{% endif %}>Serve {{ row.value|pretty }}</option>{% endfor %}
    </select></div>
  <button class="btn primary">Save changes</button>
</form>
<aside>
  <div class="card"><h2>Test a context</h2>
    <form id="test-form" action="{% url 'flag_test' project.key env.key flag.key %}">{% csrf_token %}
      <textarea id="test-context" rows="7">{{ test_context }}</textarea>
      <p><button class="btn">Evaluate</button></p>
      <div id="test-result" class="test-result"></div>
    </form>
    <div class="hint">Uses the saved configuration, not unsaved edits.</div>
  </div>
  <div class="card"><h2>Variations</h2>
    {% for row in variation_rows %}<div><span class="muted">{{ row.index }}</span> <code>{{ row.value|pretty }}</code></div>{% endfor %}
  </div>
</aside>
</div>
{{ editor|json_script:"editor-data" }}
{% endblock %}
{% block scripts %}<script type="module" src="{% static 'flags/editor.js' %}"></script>{% endblock %}