<script lang="ts">

	import HelpLabel from "#components/labels/HelpLabel.svelte";
	import Inputlabel from "#components/labels/InputLabel.svelte";
	import { BenutzerClient } from "./types.js";

	export let user: BenutzerClient;

</script>

<div id="ansprechpartner" class="bereich-box grid 
grid-cols-1 gap-x-4 gap-y-8
sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
">

<!-- Anrede *  -->
<!-- 
<div class="input-standard order-3 md:order-3 xl:order-3">
	<Inputlabel title="Anrede *"></Inputlabel>

    <select name="anrede" bind:value={user.anrede}>
        <option disabled selected>bitte auswählen</option>
        <option value="Herr">Herr</option>
        <option value="Frau">Frau</option>
    </select>
</div> -->


<!-- Vorname * -->

<div class="input-standard order-1 md:order-1 xl:order-1">
	<Inputlabel title="Vorname *"></Inputlabel>

    <input
    name="vorname"
    type="text"
    bind:value={user.vorname}
    required
/>

		<div class="help-label">
				<HelpLabel>
					Bitte Geben Sie hier den Vornamen des Ansprechpartners&nbsp;ein.
				</HelpLabel>
			</div>
</div>


<!-- Nachname * -->

<div class="input-standard order-2 md:order-2 xl:order-2">
	<Inputlabel title="Nachname *"></Inputlabel>

    <input
    name="name"
    type="text"
    bind:value={user.name}
    required
/>

		<div class="help-label">
				<HelpLabel>
					Bitte Geben Sie hier den Nachnamen des Ansprechpartners&nbsp;ein.
				</HelpLabel>
			</div>
</div>

<!-- Telefon & Email * -->

<div class="input-standard order-3 md:order-3 xl:order-3">
	<Inputlabel title="Telefonnummer *"></Inputlabel>

    <input
    name="telefon"
    bind:value={user.telefon}
    type="text"
/>

		<div class="help-label">
				<HelpLabel>
					Bitte Geben Sie hier die Telefonnummer des Ansprechpartners&nbsp;ein.
				</HelpLabel>
			</div>
</div>





</div>