{% if button_action_labels %}
<section class="card" style="margin-top: 20px;">
  <h2 class="card-title">Button actions</h2>
  <p class="sub">What the frame's physical NEXT/BACK buttons do to this
    widget. Every widget on the frame runs its own binding when a
    button is pressed -- this only affects this one.</p>
  <form id="button-actions-form">
    <label>Next button
      <select id="next_button_action">
        <option value="" {% if not next_button_action %}selected{% endif %}>(none)</option>
        {% for action, label in button_action_labels.items() %}
          <option value="{{ action }}" {% if next_button_action == action %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </label>
    <label>Back button
      <select id="back_button_action">
        <option value="" {% if not back_button_action %}selected{% endif %}>(none)</option>
        {% for action, label in button_action_labels.items() %}
          <option value="{{ action }}" {% if back_button_action == action %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </label>
    <button type="submit">Save</button>
  </form>
</section>
{% endif %}