{# Structure + ramp/divider picker. Expects `structure` and `links`. #}
<div class="layout-fields">
  <div class="form-group">
    <label>Structure</label>
    <div style="display:flex;gap:.5rem;margin-top:.25rem">
      {% for key, glyph, title, hint in [
           ('single', '▬', 'Single', 'One open space'),
           ('double', '▬<br>▬', 'Double', 'Top + Bottom'),
           ('triple', '▬<br>▬<br>▬', 'Triple', 'Top + Mid + Bottom')] %}
        <label style="flex:1">
          <input type="radio" name="structure" value="{{ key }}"
                 {% if structure == key %}checked{% endif %} style="display:none">
          <div class="preset-btn" onclick="selectStructure(this)">
            <div style="font-size:1.1rem">{{ glyph | safe }}</div>
            <div>{{ title }}</div>
            <div style="font-size:.7rem;color:var(--subtext0)">{{ hint }}</div>
          </div>
        </label>
      {% endfor %}
    </div>
  </div>

  <div class="form-group">
    <label>Floors</label>
    <div class="floor-plan">
      <div class="floor-single" style="color:var(--subtext0);font-size:.8rem;padding:.4rem 0">
        No floors — rabbits share one open space.
      </div>
      {% for floor, gap in [('Top', 0), ('Middle', 1), ('Bottom', none)] %}
        <div class="floor-slot" data-floor="{{ floor }}">
          <span class="badge badge-mauve" style="min-width:62px;text-align:center">{{ floor }}</span>
        </div>
        {% if gap is not none %}
          <div class="floor-gap" data-gap="{{ gap }}">
            <label class="gap-opt">
              <input type="radio" name="link_{{ gap }}" value="divider"
                     {% if not links[gap] %}checked{% endif %}> Divider
            </label>
            <label class="gap-opt">
              <input type="radio" name="link_{{ gap }}" value="ramp"
                     {% if links[gap] %}checked{% endif %}> Ramp
            </label>
          </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</div>

<style>
.preset-btn {
  padding:.6rem .5rem;
  border:2px solid var(--surface1);
  border-radius:8px;
  text-align:center;
  cursor:pointer;
  font-size:.85rem;
  font-weight:500;
  transition:border-color .15s,background .15s;
  user-select:none;
  line-height:1.4;
}
.preset-btn:hover { border-color:var(--pink); }
.preset-btn.active { border-color:var(--pink); background:rgba(245,194,231,0.1); color:var(--pink); }
.floor-plan { margin-top:.25rem; }
.floor-plan [hidden] { display:none !important; }
.floor-slot { padding:.35rem 0; }
.floor-gap { display:flex; gap:.75rem; padding:.15rem 0 .15rem .35rem; border-left:2px dashed var(--surface1); margin-left:1.8rem; }
.gap-opt { display:flex; align-items:center; gap:.3rem; font-size:.75rem; color:var(--subtext0); cursor:pointer; }
.gap-opt input { margin:0; }
</style>
<script>
function applyStructure(root) {
  var checked = root.querySelector('input[name=structure]:checked');
  var value = checked ? checked.value : 'triple';
  root.querySelectorAll('.preset-btn').forEach(function (btn) {
    var radio = btn.closest('label').querySelector('input[type=radio]');
    btn.classList.toggle('active', radio.value === value);
  });
  root.querySelectorAll('.floor-slot, .floor-gap').forEach(function (el) {
    var middle = el.dataset.floor === 'Middle' || el.dataset.gap === '1';
    el.hidden = value === 'single' || (middle && value === 'double');
  });
  root.querySelector('.floor-single').hidden = value !== 'single';
}
function selectStructure(el) {
  el.closest('label').querySelector('input[type=radio]').checked = true;
  applyStructure(el.closest('.layout-fields'));
}
(function () {
  // The most recently inserted picker is the one this script arrived with.
  var roots = document.querySelectorAll('.layout-fields');
  if (roots.length) applyStructure(roots[roots.length - 1]);
})();
</script>