{% extends "flags/base.html" %}
{% block title %}{% if flag %}Settings - {{ flag.key }}{% else %}New flag{% endif %}{% endblock %}
{% block content %}
<div class="page-head"><h1>{% if flag %}Settings for <code>{{ flag.key }}</code>{% else %}New flag{% endif %}</h1></div>
<div class="card" style="max-width:640px">
<form method="post">{% csrf_token %}
  <div class="field"><label>Key</label>
    {% if flag %}<code>{{ flag.key }}</code>{% else %}<input name="key" value="{{ form.key }}" required pattern="[-a-zA-Z0-9_]+">{% endif %}</div>
  <div class="field"><label>Name</label><input name="name" value="{{ form.name }}"></div>
  <div class="field"><label>Description</label><textarea name="description" rows="2">{{ form.description }}</textarea></div>
  <div class="field"><label>Type</label>
    {% if flag %}<span class="badge">{{ flag.type }}</span>{% else %}
    <select name="type">{% for value, text in types %}<option value="{{ value }}" {% if form.type == value %}selected{% endif %}>{{ text }}</option>{% endfor %}</select>{% endif %}</div>
  <div class="field"><label>Variations</label>
    <textarea name="variations" rows="4" placeholder="One per line. Leave empty for a boolean flag (true / false).">{{ form.variations }}</textarea>
    <div class="hint">Index 0 is the control for experiments. Strings are taken literally; numbers and JSON must be valid JSON.</div></div>
  <div class="field"><label><input type="checkbox" name="is_experiment" {% if form.is_experiment %}checked{% endif %}> This flag is an experiment</label></div>
  <div class="field"><label>Metric key</label><input name="metric_key" value="{{ form.metric_key }}" placeholder="e.g. checkout_completed">
    <div class="hint">Conversion events with this key are attributed to the exposed variation.</div></div>
  <button class="btn primary">{% if flag %}Save settings{% else %}Create flag{% endif %}</button>
</form>
{% if flag %}
<hr>
<form method="post" action="{% url 'flag_delete' project.key env.key flag.key %}" onsubmit="return confirm('Delete {{ flag.key }} in every environment?')">{% csrf_token %}
  <button class="btn danger">Delete flag</button></form>
{% endif %}
</div>
{% endblock %}