<form hx-post="{{ url_for('modules.berechnen', module_name='zw_rv') }}" hx-target="#modul-modal-body" hx-swap="innerHTML">

<div class="modal-modul mg">
<div class="columns is-multiline is-variable is-3">
  <div class="column is-12-tablet is-6-desktop">
    <div class="gl-card" style="background:linear-gradient(135deg,#eef2fa,#e8edf5);border-color:rgba(47,84,150,.1)">
      <div class="gl-card-header"><span class="icon" style="background:rgba(47,84,150,.1)">??</span><h4>Hausanschluss</h4></div>
      <label class="gl-label">Abschnitt</label><input class="gl-input" name="abschnitt">
      <div class="gl-subcard" style="margin-top:8px">
        <div style="font-weight:600;font-size:.78rem;margin-bottom:6px">Oberfläche</div>
        <div class="gl-grid-2">
          <div><label class="gl-toggle"><input type="checkbox" name="ob_vegetation"><span class="toggle-track"></span><span class="toggle-label"> Vegetation</span></label><input class="gl-input gl-input-sm" name="vegetation_m" type="number" step="0.1" placeholder="m"></div>
          <div><label class="gl-toggle"><input type="checkbox" name="ob_pflaster"><span class="toggle-track"></span><span class="toggle-label"> Pflaster</span></label><input class="gl-input gl-input-sm" name="pflaster_m" type="number" step="0.1" placeholder="m"></div>
          <div><label class="gl-toggle"><input type="checkbox" name="ob_asphalt"><span class="toggle-track"></span><span class="toggle-label"> Asphalt</span></label><input class="gl-input gl-input-sm" name="asphalt_m" type="number" step="0.1" placeholder="m"></div>
        </div>
      </div>
      <div class="gl-grid-auto">
        <label class="gl-toggle"><input type="checkbox" name="kopfloch_geb"><span class="toggle-track"></span><span class="toggle-label"> Kopfloch Gebäude</span></label>
        <label class="gl-toggle"><input type="checkbox" name="kopfloch_tr"><span class="toggle-track"></span><span class="toggle-label"> Kopfloch Haupttrasse</span></label>
      </div>
      <label class="gl-toggle"><input type="checkbox" name="koordinieren_ha"><span class="toggle-track"></span><span class="toggle-label"> Koordinieren Hausanschluss</span></label>
      <div class="gl-grid-auto" style="margin-top:6px">
        <label class="gl-toggle"><input type="checkbox" name="md1_ftth"><span class="toggle-track"></span><span class="toggle-label"> MD1-FttH</span></label>
        <label class="gl-toggle"><input type="checkbox" name="kernbohrung"><span class="toggle-track"></span><span class="toggle-label"> Kernbohrung</span></label>
      </div>
    </div>
  </div>
  <div class="column is-12-tablet is-6-desktop">
    
  </div>
</div>
  {% include 'components/modul_actions.html' %}
</div>
</form>