<form hx-post="{{ url_for('modules.berechnen', module_name='kabelzug') }}" 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-4-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>Abschnitt</h4></div>
      <div class="gl-grid-2">
        <div><label class="gl-label">Abschnitt von</label><input class="gl-input" name="abschnitt_von"></div>
        <div><label class="gl-label">Abschnitt bis</label><input class="gl-input" name="abschnitt_bis"></div>
      </div>
      <label class="gl-label" style="margin-top:8px">Abschnitt Länge (m)</label><input class="gl-input gl-input-sm" name="abschnitt_laenge" type="number" step="0.1">
      <label class="gl-toggle"><input type="checkbox" name="belegtes_rohr"><span class="toggle-track"></span><span class="toggle-label"> in belegtes Rohr</span></label>
      <div class="gl-subcard" style="margin-top:8px">
        <div style="font-weight:600;font-size:.78rem;margin-bottom:6px">Kabelschacht</div>
        <div class="gl-grid-2">
          <div><label class="gl-label">Anzahl Ksch öffnen</label><input class="gl-input" name="anz_ksch" type="number" step="1"></div>
          <div><label class="gl-label">Bezeichnung Ksch</label><input class="gl-input" name="bezeichnung_ksch"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="column is-12-tablet is-4-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>Medien Rohre</h4></div>
      <div class="gl-grid-2">
        <label class="gl-toggle"><input type="checkbox" name="rohr_3pipes"><span class="toggle-track"></span><span class="toggle-label"> 3 Pipes in MFR kl.</span></label>
        <label class="gl-toggle"><input type="checkbox" name="rohr_5pipes"><span class="toggle-track"></span><span class="toggle-label"> 5 Pipes in MFR gr.</span></label>
        <label class="gl-toggle"><input type="checkbox" name="rohr_7pipes"><span class="toggle-track"></span><span class="toggle-label"> 7 Pipes in DN 50</span></label>
        <label class="gl-toggle"><input type="checkbox" name="rohr_7x12"><span class="toggle-track"></span><span class="toggle-label"> SNRVe 7×12 einziehen</span></label>
        <label class="gl-toggle"><input type="checkbox" name="rohr_8x7"><span class="toggle-track"></span><span class="toggle-label"> SNRVe 8×7</span></label>
        <label class="gl-toggle"><input type="checkbox" name="rohr_22x7"><span class="toggle-track"></span><span class="toggle-label"> SNRVe 22×7</span></label>
      </div>
      <div style="margin-top:8px">
        <label class="gl-label">Verbandfarbe</label>
        <select class="gl-select" style="max-width:130px" name="verbandfarbe">
          <option value="or">or</option><option value="or/ws">or/ws</option><option value="or/sw">or/sw</option><option value="or/rt">or/rt</option>
        </select>
      </div>
      <div style="margin-top:8px">
        <label class="gl-label">Pipe Farbe</label>
        <select class="gl-select" style="max-width:130px" name="pipefarbe">
          <option value="">–</option><option value="rt">rt</option><option value="gn">gn</option><option value="bl">bl</option><option value="ge">ge</option><option value="ws">ws</option><option value="gr">gr</option><option value="br">br</option><option value="vi">vi</option><option value="tk">tk</option><option value="sw">sw</option><option value="or">or</option><option value="rs">rs</option>
        </select>
      </div>
    </div>
  </div>
  <div class="column is-12-tablet is-4-desktop">
    <div class="gl-card" style="background:linear-gradient(135deg,#edf7ed,#e6f3e6);border-color:rgba(39,174,96,.1)">
      <div class="gl-card-header"><span class="icon" style="background:rgba(39,174,96,.1)">??</span><h4>Medien Kabel</h4></div>
      <div class="gl-subcard">
        <div style="font-weight:600;font-size:.78rem;margin-bottom:6px">GF-Kabel</div>
        <div class="gl-grid-2">
          <label class="gl-toggle"><input type="checkbox" name="kabel_12gf"><span class="toggle-track"></span><span class="toggle-label"> 12 GF</span></label>
          <label class="gl-toggle"><input type="checkbox" name="kabel_24gf"><span class="toggle-track"></span><span class="toggle-label"> 24 GF</span></label>
          <label class="gl-toggle"><input type="checkbox" name="kabel_36gf"><span class="toggle-track"></span><span class="toggle-label"> 36 GF</span></label>
          <label class="gl-toggle"><input type="checkbox" name="kabel_48gf"><span class="toggle-track"></span><span class="toggle-label"> 48 GF</span></label>
          <label class="gl-toggle"><input type="checkbox" name="kabel_72gf"><span class="toggle-track"></span><span class="toggle-label"> 72 GF</span></label>
          <label class="gl-toggle"><input type="checkbox" name="kabel_96gf"><span class="toggle-track"></span><span class="toggle-label"> 96 GF</span></label>
        </div>
      </div>
      <div class="gl-grid-2">
        <label class="gl-toggle"><input type="checkbox" name="kabel_cu_kl"><span class="toggle-track"></span><span class="toggle-label"> 6–100 DA CU</span></label>
        <label class="gl-toggle"><input type="checkbox" name="kabel_cu_gr"><span class="toggle-track"></span><span class="toggle-label"> >100 DA CU</span></label>
      </div>
      
    </div>
  </div>
</div>
  {% include 'components/modul_actions.html' %}
</div>
</form>