{% macro panel(base, v, csrf, what) %}
<section class="panel" id="variables">
  <h2>Variables</h2>
  <p class="small mute">{{ what }} Jobs get them in their environment under <code>FLOW_*</code> and the pipeline's own <code>env</code>; they are part of each job's receipt. Not for secrets: these are shown in full to everyone who can see this page.</p>
  {% if !v.inherited.is_empty() %}
  <h3>Inherited</h3>
  <div class="table"><table>
  <tr><th>Name</th><th>Value</th><th>From</th></tr>
  {% for i in v.inherited %}<tr{% if i.overridden %} class="mute"{% endif %}><td><code>{{ i.variable.name }}</code></td><td class="small"><code>{{ i.variable.value }}</code></td><td class="small">{{ i.from }}{% if i.overridden %} · <span title="A level below sets the same name">overridden</span>{% endif %}</td></tr>{% endfor %}
  </table></div>
  {% endif %}
  {% if v.own.is_empty() %}<p class="mute small">{% if v.inherited.is_empty() %}None.{% else %}None of its own.{% endif %}</p>{% else %}
  <div class="table"><table>
  <tr><th>Name</th><th>Value</th><th></th></tr>
  {% for o in v.own %}<tr><td><code>{{ o.variable.name }}</code></td><td class="small"><code>{{ o.variable.value }}</code></td>
  <td><form class="tiny" method="post" action="{{ base }}/variables"><input type="hidden" name="_csrf" value="{{ csrf }}"><input type="hidden" name="name" value="{{ o.variable.name }}"><button name="action" value="delete" class="danger-btn">remove</button></form></td></tr>{% endfor %}
  </table></div>{% endif %}
  <form class="card" method="post" action="{{ base }}/variables">
    <input type="hidden" name="_csrf" value="{{ csrf }}"><input type="hidden" name="action" value="set">
    <h3>Set a variable</h3>
    <label for="vname">Name</label><input type="text" id="vname" name="name" placeholder="RUSTFLAGS" required>
    <label for="vvalue">Value</label><textarea id="vvalue" name="value" rows="2"></textarea>
    <p class="small mute">An existing name takes the new value; a name set above is overridden here.</p>
    <button type="submit">SET</button>
  </form>
</section>
{% endmacro %}