const view = document.createElement("template");
view.innerHTML = `
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style>

		:host([hidden]) {
            display: none
        }

		:host {
			--ui-input-number-form-background-color: transparent;
		}

        #container {
            background-color:var(--ui-input-number-background-color);
            padding:5%;
        }

    </style>

    <div class="row mb-5">

        <div id="nameInputContainer" class="col-12 my-2">
            <h4> Name:</h4>
            <input id="nameInput" class="col-12" type="text" placeholder="Add variable name"></input>
        </div>
        <div id="labelInputContainer" class="col-12 my-2">
            <h4> Label:</h4>
            <input id="labelInput" class="col-12" type="text" placeholder="Add a label here"></input>
        </div>
        <div id="placeholderInputContainer" class="col-12 my-2">
            <h4> Placeholder:</h4>
            <input id="placeholderInput" class="col-12" type="text" placeholder="Add the input placeholder here"></input>
        </div>
        <div id="requiredInputContainer" class="col-12 my-2">
            <h4> Required:</h4>
            <ui-switch id="requiredSwitch"></ui-switch>
        </div>

    </div>
`;

export default view;
