{{ define "content" }}
    <div class="w3-row w3-padding-small">
        <div class=" w3-container w3-twothird">
            <h3 id="wg-h3">{{.Translation.Header}}</h3>
        </div>
        <div class="w3-container w3-third w3-margin-top w3-right-align">
            <p class="w3-dropdown-hover w3-white  w3-right-align no-print">{{.Translation.Country}}
                <i class="fa fa-caret-down"></i>
                <span class="w3-dropdown-content w3-bar" style="right:0">
                    <a href="#" onclick="updateLanguage(1)" class="w3-bar-item w3-button language-a">DE</a>
                    <a href="#" onclick="updateLanguage(2)" class="w3-bar-item w3-button language-a">EN</a>
                    <a href="#" onclick="updateLanguage(3)" class="w3-bar-item w3-button language-a">ES</a>
                    <a href="#" onclick="updateLanguage(4)" class="w3-bar-item w3-button language-a">SE</a>
                    <a href="#" onclick="updateLanguage(5)" class="w3-bar-item w3-button language-a">DA</a>
                    <a href="#" onclick="updateLanguage(6)" class="w3-bar-item w3-button language-a">NL</a>
                    <a href="#" onclick="updateLanguage(7)" class="w3-bar-item w3-button language-a">IT</a>
                    <a href="#" onclick="updateLanguage(8)" class="w3-bar-item w3-button language-a">FR</a>
                    <a href="#" onclick="updateLanguage(9)" class="w3-bar-item w3-button language-a">FI</a>
                    <a href="#" onclick="updateLanguage(10)" class="w3-bar-item w3-button language-a">NO</a>
                    <a href="#" onclick="updateLanguage(11)" class="w3-bar-item w3-button language-a">PT</a>
                    <a href="#" onclick="updateLanguage(12)" class="w3-bar-item w3-button language-a">HU</a>
                    <a href="#" onclick="updateLanguage(13)" class="w3-bar-item w3-button language-a">TR</a>
                    <a href="#" onclick="updateLanguage(14)" class="w3-bar-item w3-button language-a">EL</a>
                    <a href="#" onclick="updateLanguage(15)" class="w3-bar-item w3-button language-a">PL</a>
                    <a href="#" onclick="updateLanguage(16)" class="w3-bar-item w3-button language-a">CS</a>
                    <a href="#" onclick="updateLanguage(17)" class="w3-bar-item w3-button language-a">RU</a>
                    <a href="#" onclick="updateLanguage(20)" class="w3-bar-item w3-button language-a">SR</a>
                    <a href="#" onclick="updateLanguage(25)" class="w3-bar-item w3-button language-a">BG</a>
                    <a href="#" onclick="updateLanguage(26)" class="w3-bar-item w3-button language-a">HR</a>
                </span>
            </p>
        </div>
    </div>
    <div id="wg-ev-header"></div>
    <div id="wg-ev-logo"></div>
    <form class="w3-container w3-row-padding" method="POST" action="?">
        <!-- first row -->
        <div class="w3-row">
            <div class="w3-container w3-third w3-padding-small">
                <label>{{.Translation.OrderNumber}}:<span class="wow-required">*</span></label>
                <input class="w3-input" type="text" name="order_number" value="{{.Formular.OrderNumber}}">
            </div>
            <div class="w3-container w3-third w3-padding-small">
                <label>{{.Translation.Make}}:<span class="wow-required">*</span></label>
                <input class="w3-input" type="text" name="make" value="{{.Formular.Make}}" disabled>
            </div>
            <div class="w3-container w3-third w3-padding-small">
                <label>{{.Translation.Model}}:<span class="wow-required">*</span></label>
                <input class="w3-input" type="text" name="model" value="{{.Formular.Model}}" disabled>
            </div>
        </div>
        <!-- second row -->
        <div class="w3-row">
            <div class="w3-container w3-third w3-padding-small">
                <label>{{.Translation.Vin}}:<span class="wow-required">*</span></label>
                <input class="w3-input" type="text" name="vin" value="{{.Formular.Vin}}">
            </div>
            <div class="w3-container w3-third w3-padding-small">
                <label>{{.Translation.FirstRegistration}}:<span class="wow-required">*</span></label>
                <input class="w3-input" name="first_registration" pattern="\d{1,2}.\d{4}" placeholder="MM.JJJJ" value="{{.Formular.FirstRegistration}}" oninput="this.reportValidity()">
            </div>
            <div class="w3-container w3-third w3-padding-small">
                <label>{{.Translation.Mileage}}:<span class="wow-required">*</span></label>
                <input class="w3-input" type="number" name="mileage" value="{{.Formular.Mileage}}">
            </div>
        </div>
        <!-- 3rd row -->
        <div class="w3-row">
            <div class="w3-container w3-third w3-padding-small">
                <label>{{.Translation.DateTime}}:<span class="wow-required">*</span></label>
                <input class="w3-input" name="dateTime" value="{{.Formular.DateTime}}">
            </div>
            <div class="w3-container w3-third w3-padding-small">
                <label>{{.Translation.Name}}:<span class="wow-required">*</span></label>
                <input class="w3-input" name="name" value="{{.Formular.Name}}">
            </div>
            <div class="w3-container w3-third w3-padding-small">
                <label>{{.Translation.RegistrationPlate}}:</label>
                <input class="w3-input" name="registration_plate" value="{{.Formular.RegistrationPlate}}">
            </div>
        </div>
        <!-- Yes-No Area -->
        <div class="w3-row">
            <div class="w3-container w3-threequarter w3-padding-small">
                <label>{{.Translation.Field9}}</label>
            </div>
            <div class="w3-container w3-quarter w3-padding-small">
                <div class="w3-container w3-quarter w3-padding-small">
                    <label>{{.Translation.Yes}}</label>
                </div>
                <div class="w3-container w3-quarter w3-padding-small">
                    <label>{{.Translation.No}}</label>
                </div>
            </div>
        </div>
        <div class="w3-row">
            <div class="w3-container w3-threequarter w3-padding-small">
                <label>{{.Translation.Field10}}</label>
            </div>
            <div class="w3-container w3-quarter w3-padding-small">
                <div class="w3-container w3-quarter w3-padding-small">
                    <input type="checkbox" name="field10_1" value="1" {{ if eq .Formular.Field101 "true"}}checked{{ end }}>
                </div>
                <div class="w3-container w3-quarter w3-padding-small">
                    <input type="checkbox" name="field10_2" value="1" {{ if eq .Formular.Field102 "true"}}checked{{ end }}>
                </div>
            </div>
        </div>
        <div class="w3-row">
            <div class="w3-container w3-threequarter w3-padding-small">
                <label>{{.Translation.Field11}}</label>
            </div>
            <div class="w3-container w3-quarter w3-padding-small">
                <div class="w3-container w3-quarter w3-padding-small">
                    <input type="checkbox" name="field11_1" value="11" {{ if eq .Formular.Field111 "true"}}checked{{ end }}>
                </div>
                <div class="w3-container w3-quarter w3-padding-small">
                    <input type="checkbox" name="field11_2" value="11" {{ if eq .Formular.Field112 "true"}}checked{{ end }}>
                </div>
            </div>
        </div>
        <div class="w3-row">
            <div class="w3-container w3-threequarter w3-padding-small">
                <label>{{.Translation.Field13}}</label>
            </div>
        </div>
        <div class="w3-row">
            <div class="w3-container w3-threequarter" style="padding-left:50px">
                <label>{{.Translation.Unlocked}}</label>
            </div>
            <div class="w3-container w3-quarter w3-padding-small">
                <div class="w3-container w3-quarter w3-padding-small">
                    <input type="checkbox" name="field14_1" value="14" {{ if eq .Formular.Field141 "true"}}checked{{ end }}>
                </div>
                <div class="w3-container w3-quarter w3-padding-small">
                    <input type="checkbox" name="field14_2" value="14" {{ if eq .Formular.Field142 "true"}}checked{{ end }}>
                </div>
            </div>
        </div>
        <div class="w3-row">
            <div class="w3-container w3-threequarter" style="padding-left:50px">
                <label>{{.Translation.Field15}}</label>
            </div>
            <div class="w3-container w3-quarter w3-padding-small">
                <div class="w3-container w3-quarter w3-padding-small">
                    <input type="checkbox" name="field15_1" value="15" {{ if eq .Formular.Field151 "true"}}checked{{ end }}>
                </div>
                <div class="w3-container w3-quarter w3-padding-small">
                    <input type="checkbox" name="field15_2" value="15" {{ if eq .Formular.Field152 "true"}}checked{{ end }}>
                </div>
            </div>
        </div>
        <div class="w3-row">     
            <div class="w3-container w3-threequarter" style="padding-left:50px">
                <label>{{.Translation.Field16}}</label>
            </div>
            <div class="w3-container w3-quarter w3-padding-small">
                <div class="w3-container w3-quarter w3-padding-small">
                    <input type="checkbox" name="field16_1" value="16" {{ if eq .Formular.Field161 "true"}}checked{{ end }}>
                </div>
                <div class="w3-container w3-quarter w3-padding-small">
                    <input type="checkbox" name="field16_2" value="16" {{ if eq .Formular.Field162 "true"}}checked{{ end }}>
                </div>
            </div>
        </div>
        <div class="w3-row">
            <div class="w3-container w3-threequarter w3-padding-small">
                <label>{{.Translation.Field12}}</label>
            </div>
            <div class="w3-container w3-quarter w3-padding-small">
                <div class="w3-container w3-quarter w3-padding-small">
                    <input type="checkbox" name="field12_1" value="12" {{ if eq .Formular.Field121 "true"}}checked{{ end }}>
                </div>
                <div class="w3-container w3-quarter w3-padding-small">
                    <input type="checkbox" name="field12_2" value="12" {{ if eq .Formular.Field122 "true"}}checked{{ end }}>
                </div>
            </div>
        </div>
        <div class="w3-row">
            <div class="w3-container w3-threequarter w3-padding-small">
                <label>{{.Translation.Field17}}</label>
            </div>
            <div class="w3-container w3-quarter w3-padding-small">
                <div class="w3-container w3-quarter w3-padding-small">
                    <input type="checkbox" name="field17_1" value="17" {{ if eq .Formular.Field171 "true"}}checked{{ end }}>
                </div>
                <div class="w3-container w3-quarter w3-padding-small">
                    <input type="checkbox" name="field17_2" value="17" {{ if eq .Formular.Field172 "true"}}checked{{ end }}>
                </div>
            </div>
        </div>
        <div class="w3-row">
            <div class="w3-container w3-half w3-padding-small">
                <label>{{.Translation.Mechanic}}:<span class="wow-required">*</span></label>
            </div>
            <div class="w3-container w3-half w3-padding-small">
                <label>{{.Translation.Signature}}:</label>
            </div>
        </div>
        <div class="w3-row">
            <div class="w3-container w3-half w3-padding-small">
                <select class="w3-select" name="mechanic_selection" id="mechanic_selection">
                    <option/>
                    {{ $op_id := .Formular.MechanicSelection}}
                    {{range $index, $element := .Formular.Mechanic}}   
                    <option value="{{$index}}" {{ if eq $index $op_id}}selected{{ end }}>{{$element}}</option>
                    {{end}}
                </select>
            </div>
            <div class="w3-container w3-half w3-padding-small">
                <input id="signature" class="w3-input" disabled>
            </div>
        </div>
        <div class="w3-row">
            <label class="no-print"><span class="wow-required">*</span>{{.Translation.MandatoryFields}}</label>
        </div>
    </form>
    <div id="wg-ev-footer"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // the selector will match all input controls of type :checkbox
        // and attach a click event handler 
        $("input:checkbox").on('click', function() {
        // in the handler, 'this' refers to the box clicked on
        var $box = $(this);
        if ($box.is(":checked")) {
            // the name of the box is retrieved using the .attr() method
            // as it is assumed and expected to be immutable
            var group = "input:checkbox[value='" + $box.attr("value") + "']";
            // the checked state of the group/box on the other hand will change
            // and the current value is retrieved using .prop() method
            $(group).prop("checked", false);
            $box.prop("checked", true);
        } else {
            $box.prop("checked", false);
        }
        });
    </script>
    <script>
        function updateLanguage(languageId) {
            var url = new URL (window.location.href)
            console.log(languageId)
            const FormFields = document.querySelector('form');
            for (var pair of FormFields) {
                console.log(pair.name + ': ' + pair.value);
                if (pair.type === 'checkbox') {
                    url.searchParams.set(pair.name, pair.checked)
                } else {
                    url.searchParams.set(pair.name, pair.value);
                }
            }
            url.searchParams.set('language', languageId)
            //url.toString();
            location.href = url.toString();
        }
        function isEmpty(str) {
            return (!str || str.length === 0 );
        }
    </script>
{{end}}