[[!Calculate?
    &Calcs=`gauge`
    &Dims=`hShoulder,wShoulder`
    &show=`gauge_len_w,gauge_qty_w,gauge_len_h,gauge_qty_h,hShoulder_len,wShoulder_len`
]]

[[!+jkv.error_message:is=``:then=``:else=`
    <div class="alert custom-alert-3 alert-danger alert-dismissible fade show m-3" role="alert">
        <i class="bi bi-exclamation-triangle-fill fs-xxlarge"></i>
        <div class="alert-text"><h5>Da stimmt was nicht!</h5>[[!+jkv.error_message]]</div>
        <button class="btn btn-close position-relative p-1 ms-auto" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
`]]
<div id="prt-[[*alias]]" class="card shadow-sm mb-5">
    <div class="card-body">
        <div class="print-ad mb-5"><p>Diese Berechnung wurde erstellt mit <a href="https://justknit.de/strickrechner/" >JustKnit</a> - Stricken was wirklich passt. </p></div>
        <div class="calc-header pb-3">
            <h3 class="text-center">[[*longtitle]]</h3>
            [[!+product.product_name:is=`Klassik`:then=`
            <span class="printview  ms-2" data-html2canvas-ignore><button id="prtBtn" type="reset" class="btn btn-primary d-flex align-items-center justify-content-center"><i id="iPrint" class="bi bi-printer"></i><i id="iWeb" class="bi bi-globe" hidden></i></button></span>
            `]]
        </div>
    
        <fieldset>
            <legend>1. Miss deine Maschenprobe</legend> 
            <div class="row">
                <div class="col">[[+jk.gauge_len_w]]</div>
                <div class="col">[[+jk.gauge_qty_w]]</div>
            </div>
            <div class="row">
                <div class="col">[[+jk.gauge_len_h]]</div>
                <div class="col">[[+jk.gauge_qty_h]]</div>
            </div>
        </fieldset>
        <fieldset>
            <legend>2. Die Maße von deiner Schulterschräge?</legend>
            [[+jk.hShoulder_len]]
            [[+jk.wShoulder_len]]
        </fieldset>
        <fieldset hidden>
            [[+jk.hiddenflds]]
            cid: <input type="hidden" class="form-control inVal" id="cid" name="cid" value="[[+jkv.cid]]">
        </fieldset> 
            <fieldset>
                <legend>3. Deine Anleitung</legend>
                <div class="row fs-xxsmall">
<svg id="Shoulder-[[*id]]" class="svg" version="1.1" viewBox="10 0 152.64 70.56" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g id="wShoulder">
 <marker id="wShoulder-ms" overflow="visible" orient="auto">
  <path id="wShoulder-msp" transform="scale(.8)" d="m0 5.65v-11.3" fill="none" stroke="#f0c"/>
 </marker>
 <marker id="wShoulder-me" overflow="visible" orient="auto">
  <path id="wShoulder-mep" transform="scale(.8)" d="m0 5.65v-11.3" fill="none" stroke="#f0c"/>
 </marker>
  <path id="wShoulder-p" d="m35.324 16.021h81.986" fill="none" marker-end="url(#wShoulder-me)" marker-start="url(#wShoulder-ms)" stroke="#f0c"/>
  <text id="wShoulder-t" y="-4" fill="#ff00cc"><textPath id="wShoulder-tp" startOffset="50%" xlink:href="#wShoulder-p"><tspan id="wShoulder-s" class="shown" text-align="center" text-anchor="middle">[[+jkv.wShoulder_len]]</tspan></textPath></text>
 </g>
 <g id="hShoulder">
 <marker id="hShoulder-ms" overflow="visible" orient="auto">
  <path id="hShoulder-msp" transform="scale(.8)" d="m0 5.65v-11.3" fill="none" stroke="#f0c"/>
 </marker>
 <marker id="hShoulder-me" overflow="visible" orient="auto">
  <path id="hShoulder-mep" transform="scale(.8)" d="m0 5.65v-11.3" fill="none" stroke="#f0c"/>
 </marker>
  <path id="hShoulder-p" d="m22.03 44.021v-16.823" fill="none" marker-end="url(#hShoulder-me)" marker-start="url(#hShoulder-ms)" stroke="#f0c"/>
  <text id="hShoulder-t" y="-4" fill="#ff00cc"><textPath id="hShoulder-tp" startOffset="50%" xlink:href="#hShoulder-p"><tspan id="hShoulder-s" class="shown" text-align="center" text-anchor="middle">[[+jkv.hShoulder_len]]</tspan></textPath></text>
 </g>
 <path id="neckRoundFront" d="m117.31 28c7e-3 18.555 15.719 36.858 35.708 37.038" opacity=".3" fill="none" stroke="#000"/>
 <path id="neckRoundBack" d="m153.31 40.151c-21.119 0-28.877-0.16224-35.706-12.13" opacity=".3" fill="none" stroke="#000"/>
 <path id="shoulderSlopeSlim" d="m117.7 28.202-82.376 17.009v16.467" fill="none"  stroke="#000"/>
</svg>

            </div>
            </fieldset>        
        <fieldset>
            <div class="item  py-1">
                <p class="result inVal resultP" id="result">[[+jkv.gauge_results]]</p>
                <div id="error" class="alert custom-alert-3 alert-info fade" role="alert" data-html2canvas-ignore>
                    <i class="bi bi-info-circle fs-xxlarge"></i>
                    <div class="alert-text"><h5>Da stimmt was nicht!</h5><span id="calcError"></span></div>
                    <button class="btn btn-close position-relative p-1 ms-auto" type="button" onclick="this.parentElement.classList.remove('show')" aria-label="Close"></button>
                </div>
            </div>     
        </fieldset>
    </div>
    <div class="print-ad mb-5"><p>&copy; Iris Hammer [[!+nowdate:default=`now`:strtotime:date=`%Y`]] &dash; <a href="https://justknit.de/strickrechner/" >JustKnit</a> Stricken was wirklich passt. </p></div>
</div>
<!-- Modal: Hilfe -->                
<div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Hilfe für [[*pagetitle]]</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <fieldset hidden>
                    <p hidden>Hier kommt der geamte Hilfetext für das jeweilige Formular rein. </p>
                    <p>longtitle: [[*longtitle]]</p>
                    <p>description: [[*description]]</p>
                    <p>introtext: [[*introtext]]</p>
                </fieldset>
 
    <p>Die Höhe der Schulterschräge ist in der Schneiderei etwa 2 cm. Das gilt aber nur, wenn die 
    Schulterschräge am Halsansatz anfängt und am Schulterpunkt endet.</p>
    <p>Die Höhe kannst du in der Regel nicht messen. Sie ergibt sich aus der Differenz zwischen Beginn Armloch 
    bis zum Halsansatz und Beginn Armloch bis zum Schulterpunkt. </p>
    <p>Bei überschnittenen Schulter möchtest du vielleicht eine breitere und damit auch höhere Schulterschräge. </p>
    <p></p>
    <p></p>
    <p><b>Hinweis:</b> Die Berechnung stimmt zwar mathematisch, sie entbindet dich aber nicht
      davon, deine Maße genau zu kontrollieren. </p>
    <p>Jedes Maß beeinflusst die Passform. Gibst du unsinnige Maße ein, dann
      kann auch dein Pullover nicht passen.</p>
      </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
            </div>
        </div>
    </div>
</div>
<!-- END Modal Hilfe -->