<form hx-post="{{ url_for('modules.berechnen', module_name='planung') }}" 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>Planung FTTH/NBG</h4></div>
      <div class="gl-subcard">
        <label class="gl-toggle"><input type="checkbox" name="proj_struk_mtb"><span class="toggle-track"></span><span class="toggle-label"> Projektierung n. Strukturplanung mit TB bis 100m</span></label>
        <div><label class="gl-label">m Zulage ab 101m</label><input class="gl-input gl-input-sm" name="zulage_struk_mtb" type="number" step="0.1"></div>
      </div>
      <div class="gl-subcard">
        <label class="gl-toggle"><input type="checkbox" name="proj_struk_otb"><span class="toggle-track"></span><span class="toggle-label"> Projektierung n. Strukturplanung ohne TB bis 100m</span></label>
        <div><label class="gl-label">m Zulage ab 101m</label><input class="gl-input gl-input-sm" name="zulage_struk_otb" type="number" step="0.1"></div>
      </div>
      <div class="gl-subcard">
        <label class="gl-toggle"><input type="checkbox" name="mpp_gfk_nvt_ap"><span class="toggle-track"></span><span class="toggle-label"> MP-Proj. FTTH-Gf-Kabel v. NVT ? GF-AP</span></label>
        <label class="gl-label">m MP-Proj. Gf-Kabel im ZN-Netz</label><input class="gl-input gl-input-sm" name="mpp_gfk_zn" type="number" step="0.1">
      </div>
      <div class="gl-grid-2">
        <div><label class="gl-toggle"><input type="checkbox" name="mpp_gfap"><span class="toggle-track"></span><span class="toggle-label"> MP-Proj. GF-AP</span></label></div>
        <div><label class="gl-label">m MP-Proj. KR-Anlagen</label><input class="gl-input gl-input-sm" name="mpp_kr" type="number" step="0.1"></div>
        <div><label class="gl-label">m MP-Proj.</label><input class="gl-input gl-input-sm" name="mpp_snrv" type="number" step="0.1"></div>
      </div>
    </div>
  </div>
  <div class="column is-12-tablet is-6-desktop">
    <div class="gl-card" style="background:linear-gradient(135deg,#fef9e7,#fdf3d0);border-color:rgba(243,156,18,.1)">
      <div class="gl-card-header"><span class="icon" style="background:rgba(243,156,18,.1)">??</span><h4>Planung M/L & S</h4></div>
      <div class="gl-subcard">
        <div style="font-weight:600;font-size:.78rem;margin-bottom:6px">Planung M/L</div>
        <label class="gl-toggle"><input type="checkbox" name="ap_sgs"><span class="toggle-track"></span><span class="toggle-label"> GF-AP + Patchfeld</span></label>
        <div class="gl-grid-2" style="margin-top:6px">
          <div><label class="gl-label">m GF-Kabel einbl./verlegen</label><input class="gl-input gl-input-sm" name="gf_minik" type="number" step="0.1"></div>
          <div><label class="gl-label">m IVK</label><input class="gl-input gl-input-sm" name="ivk_m" type="number" step="0.1"></div>
          <div><label class="gl-toggle"><input type="checkbox" name="proj_kl_baum"><span class="toggle-track"></span><span class="toggle-label"> Proj. kl. Baumaßnahme</span></label></div>
          <div><label class="gl-label">m Zulage kl. Baumaßnahme</label><input class="gl-input gl-input-sm" name="zulage_kl_baum" type="number" step="0.1"></div>
        </div>
      </div>
      <div class="gl-subcard">
        <div style="font-weight:600;font-size:.78rem;margin-bottom:6px">Planung S</div>
        <label class="gl-toggle"><input type="checkbox" name="s_planung_05"><span class="toggle-track"></span><span class="toggle-label"> S-Planung 0,5</span></label>
        <label class="gl-label" style="margin-top:4px">S-Liste (eine Position pro Zeile)</label>
        <textarea class="gl-input" name="s_liste" rows="3" placeholder="Position 1&#10;Position 2&#10;…"></textarea>
      </div>
      
    </div>
  </div>
</div>
  {% include 'components/modul_actions.html' %}
</div>
</form>