// <![CDATA[

function getStylesDialogElements(columnitem, customerAttribs) {
	"use strict";
	let n = customerAttribs.length;  // Anzahl der Elemente, Attribute Zeilen
	let s='';
	s += '  <style type="text/css"  id="internalStyle" >'+"\n";

	s += '#wrapperdialog {'+"\n";
	s += ' display: grid;'+"\n";
	s += ' grid-template-columns: ' + columnitem +';'+"\n";
	s += ' grid-template-rows: ';
	// je nach Anzahl die Reihen definieren
	for (let i=0; i<n; i++) {
		s +='auto ';
	}
	s +=";\n";

	s += ' grid-column-gap:70px;'+"\n";
	s += ' grid-row-gap:10px;'+"\n";
	s += ' background-color:#EEEEEE;'+"\n";
	s += '}'+"\n";
	s += ' '+"\n";
	s += '.column1 {'+"\n";
	s += ' margin-right:10px;'+"\n";
	s += '}'+"\n";
	s += ' '+"\n";
	s += '.column2 {'+"\n";
	s += ' margin-right:10px;'+"\n";
	s += '}'+"\n\n";

	s += 'fieldset {'+"\n";
	s += '  border: 2px solid #C5D8E1;'+"\n";
	s += '  border-radius: 10px;'+"\n";
	s += '  background: white;'+"\n";
	s += '  margin: 0;'+"\n";
	s += '  width:25rem;'+"\n";
	s += ' }'+"\n";
	s += ' '+"\n";
	s += 'legend { '+"\n";
	s += '  color:blue;'+"\n";
	s += ' } '+"\n";

	s += 'input:required {'+"\n";
	s += ' border: solid 2px green;'+"\n";
	s += '}'+"\n";
	s += 'input:invalid {'+"\n";
	s += ' border: solid 4px red;'+"\n";
	s += '}'+"\n";
	s += '  </style>'+"\n";
	return s;
}








function getDialogElements(allreadonly, customer, patternlist) {
	"use strict";

	let s='';
	s+=' <div id="wrapperdialog">'+"\n";

	let captions = Object.keys(customer);
	// dialoge
	let readonly='';
	if (allreadonly) {
		readonly=' readonly="readonly" ';
	}
	let index=0;
	for(var j in customer){
		let caption = captions[index];  // in caption steht der Name des Attributs lastname
		let pat ;
		for (let p of patternlist) {
			//alert('caption: '+caption+"   p.uikey: "+p.uikey);
			if (caption==p.uikey) {
				//alert('gefunden');
				pat = p;
				break;
			}
		}
		s+=' <label class="column1" for="ui' + index + 'Id">'+pat.caption+'</label>'+"\n";

		if (pat.uityp=='number') {
			s+=' <input type="number" class="column2" min="'+pat.minval+'"  max="'+pat.maxval+'"  name="' +caption+ '" id="ui' +index+ 'Id" '+readonly+' value="'+customer[j]+'"  required="required"  />'+"\n";
		}
		else if (pat.uityp=='text') {
			s+=' <input type="text" class="column2" name="' +caption+ '" id="ui' +index+ 'Id" '+readonly
			+'  pattern="'+pat.uipattern+'" '
			+'  value="'+customer[j]+'" size="12" required="required" />'+"\n";
		}
		else if (pat.uityp=='-') {
			s+=' <input type="text" class="column2" name="' +caption+ '" id="ui' +index+ 'Id" value="'+customer[j]+'" size="12" readonly="readonly" />'+"\n";
		}
		if (pat.uityp=='date') {
			s+=' <input type="date" class="column2" name="' +caption+ '" id="ui' +index+ 'Id" '+readonly+'    value="'+customer[j]+'" size="12" required="required" />'+"\n";
		}
		if (pat.uityp=='checkbox') {
			s+=' <input type="checkbox" class="column2" name="' +caption+ '" id="ui' +index+ 'Id" '+readonly+'  value="'+customer[j]+'" size="12"  />'+"\n";
		}

		if (pat.uityp=='color') {
			s+=' <input type="color" class="column2" name="' +caption+ '" id="ui' +index+ 'Id" '+readonly+'  value="'+customer[j]+'" size="12" required="required"  />'+"\n";
		}
		if (pat.uityp=='datetime') {
			s+=' <input type="datetime" class="column2" name="' +caption+ '" id="ui' +index+ 'Id" '+readonly+'  value="'+customer[j]+'" size="12"  required="required" />'+"\n";
		}
		if (pat.uityp=='email') {
			s+=' <input type="email" class="column2" name="' +caption+ '" id="ui' +index+ 'Id" '+readonly+'  value="'+customer[j]+'" size="12" required="required" />'+"\n";
		}
		if (pat.uityp=='month') {
			s+=' <input type="month" class="column2" name="' +caption+ '" id="ui' +index+ 'Id" '+readonly+'  value="'+customer[j]+'" size="12" required="required" />'+"\n";
		}
		if (pat.uityp=='time') {
			s+=' <input type="time" class="column2" name="' +caption+ '" id="ui' +index+ 'Id" '+readonly+'  value="'+customer[j]+'" size="12" required="required"  />'+"\n";
		}
		if (pat.uityp=='week') {
			s+=' <input type="week" class="column2" name="' +caption+ '" id="ui' +index+ 'Id" '+readonly+'  value="'+customer[j]+'" size="12" required="required" />'+"\n";
		}
		if (pat.uityp=='password') {
			s+=' <input type="password" class="column2" name="' +caption+ '" id="ui' +index+ 'Id" '+readonly+'  value="'+customer[j]+'" size="12" required="required" />'+"\n";
		}
		index++;
	}  // for
	s+=' </div>'+"\n";  // wrapperDialog
	return s;
}






// columnitem = auto 1fr

function createCompleteDialogElements(caption, captionlegend, allreadonly, columnitem,  clickyes, clickno, customer, uipatternliste) {
	"use strict";
	let str_dialogStyles = getStylesDialogElements(columnitem, customer);
	let str_Dialog = getDialogElements(allreadonly, customer, uipatternliste);

	let s='';
	s += str_dialogStyles+"\n";  // wrapper

	s += '<h1>'+caption+'</h1>'+"\n";
	s += '<form method="get" >'+"\n";
	s += '<fieldset>'+"\n";
	s += '<legend>'+captionlegend+'</legend>'+"\n";

	s+=str_Dialog+"\n";
	s+='</fieldset>'+"\n";
	s+='<br />'+"\n";
	// onclick="'+clickyes+'(this.form)"
	s+='<input type="button" value="Yes" onclick="'+clickyes+'(this.form)" />'+"\n";
	s+='<input type="button" value="No" onclick="'+clickno+'(this.form)" />'+"\n";
	s+='<input type="reset" value="Reset"   />'+"\n";
	s+='</form>'+"\n";
	s+='<br />'+"\n";
	s+='<br />'+"\n";

	return s;
}






// ]]>