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

<div class="modal-modul mg">
<div class="columns is-multiline is-variable is-2">
  <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" style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px">
        <span style="display:flex;align-items:center;gap:6px"><span class="icon" style="background:rgba(47,84,150,.1)">🏠</span><h4 style="margin:0">Hausanschluss</h4></span>
        <label class="gl-toggle" style="font-size:0.7rem"><input type="checkbox" name="ha_herstellen" value="an"><span class="toggle-track"></span><span class="toggle-label"> HA Herstellen</span></label>
      </div>
      <label class="gl-label" style="margin-top:6px">Scan Name</label><input class="gl-input" name="scan_name_ha">
      <div class="gl-grid-2" style="margin-top:8px">
        <div><label class="gl-label">Trassenmeter</label><input class="gl-input gl-input-sm" name="trassenmeter" type="number" step="0.1"></div>
        <div><label class="gl-label">Kabelsichern (m)</label><input class="gl-input gl-input-sm" name="kabelmeter_ha" type="number" step="0.1"></div>
        <div><label class="gl-label">Anzahl Q-Kabel/Rohre</label><input class="gl-input gl-input-sm" name="anz_qkr" type="number" step="1"></div>
        <div><label class="gl-label">Anzahl Querungsstellen</label><input class="gl-input gl-input-sm" name="anz_qst" type="number" step="1"></div>
        <div><label class="gl-label">Straßenquerung (m)</label><input class="gl-input gl-input-sm" name="strqm" type="number" step="0.1"></div>
        <div><label class="gl-label">Anzahl Suchgrube</label><input class="gl-input gl-input-sm" name="anz_suchgrube_ha" type="number" step="1"></div>
      </div>
      <label class="gl-toggle"><input type="checkbox" name="einzug_10er" value="an"><span class="toggle-track"></span><span class="toggle-label"> Einzug 10er Pipes</span></label>
    </div>
  </div>
  <div class="column is-12-tablet is-6-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>Tiefbau</h4></div>
      <div><label class="gl-label">Scan Name</label><input class="gl-input" name="scan_name_tb" style="width:100%"></div>
      <div style="display:flex;align-items:flex-end;gap:10px;margin-top:8px;flex-wrap:wrap">
        <label class="gl-toggle" style="font-size:0.8rem;white-space:nowrap"><input type="checkbox" name="tb_unbefestigt" value="an"><span class="toggle-track"></span><span class="toggle-label"> unbefestigt (Wiese, Kies)</span></label>
        <label class="gl-toggle" style="font-size:0.8rem;white-space:nowrap"><input type="checkbox" name="tb_befestigt" value="an"><span class="toggle-track"></span><span class="toggle-label"> befestigt (Pflaster, Asphalt)</span></label>
        <div style="flex:1;min-width:80px"><label class="gl-label">Länge (m)</label><input class="gl-input gl-input-sm" name="tb_laenge" type="number" step="0.1" style="width:100%"></div>
        <div style="flex:1;min-width:80px"><label class="gl-label">Tiefe (m)</label><input class="gl-input gl-input-sm" name="tb_tiefe" type="number" step="0.1" style="width:100%"></div>
      </div>
      <div class="gl-subcard" style="margin-top:8px;padding:8px;background:rgba(255,255,255,.5);border-radius:8px">
        <div style="font-weight:600;font-size:.78rem;margin-bottom:6px">Rohre & Suchgrube</div>
        <div style="display:flex;gap:10px">
          <div style="flex:1"><label class="gl-label" style="font-size:0.7rem;white-space:nowrap">Anzahl Rohre 12×10</label><input class="gl-input gl-input-sm" name="tb_anz_12x10" type="number" step="1" style="width:100%"></div>
          <div style="flex:1"><label class="gl-label" style="font-size:0.7rem;white-space:nowrap">Anzahl Rohre 4×12</label><input class="gl-input gl-input-sm" name="tb_anz_4x12" type="number" step="1" style="width:100%"></div>
          <div style="flex:1"><label class="gl-label" style="font-size:0.7rem;white-space:nowrap">Anzahl Suchgrube</label><input class="gl-input gl-input-sm" name="tb_anz_suchgrube" type="number" step="1" style="width:100%"></div>
        </div>
      </div>
      <div class="gl-subcard" style="margin-top:8px;padding:8px;background:rgba(255,255,255,.5);border-radius:8px">
        <div style="font-weight:600;font-size:.78rem;margin-bottom:6px">Kabel & Querungen</div>
        <div style="display:flex;gap:10px">
          <div style="flex:1"><label class="gl-label" style="font-size:0.7rem;white-space:nowrap">Anzahl Q-Kabel/Rohre</label><input class="gl-input gl-input-sm" name="tb_anz_qk" type="number" step="1" style="width:100%"></div>
          <div style="flex:1"><label class="gl-label" style="font-size:0.7rem;white-space:nowrap">Anzahl Querungsst.</label><input class="gl-input gl-input-sm" name="tb_anz_qs" type="number" step="1" style="width:100%"></div>
          <div style="flex:1"><label class="gl-label" style="font-size:0.7rem;white-space:nowrap">Kabelsichern (m)</label><input class="gl-input gl-input-sm" name="tb_kabelmeter" type="number" step="0.1" style="width:100%"></div>
        </div>
      </div>
      <div style="display:flex;gap:12px;margin-top:8px;flex-wrap:wrap">
        <label class="gl-toggle"><input type="checkbox" name="tb_kg2" value="an"><span class="toggle-track"></span><span class="toggle-label"> Kabelgraben 2</span></label>
        <label class="gl-toggle"><input type="checkbox" name="tb_kg4" value="an"><span class="toggle-track"></span><span class="toggle-label"> Kabelgraben 4</span></label>
        <label class="gl-toggle"><input type="checkbox" name="tb_kg6" value="an"><span class="toggle-track"></span><span class="toggle-label"> Kabelgraben 6</span></label>
      </div>
    </div>
  </div>
</div>
{% include 'components/modul_actions.html' %}
</div>
</form>