{% 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 %}