<template>
    <div class="container-add-client">
        <div class="container-form-add-client">
            <form action="" method="">
                <div class="container-form-input">
                    <div class="left-form-client">
                        <div class="container-form-add-client-entry">
                            <Entry height="3" width="15" type="text" placeholder="Nom du client" required="true"></Entry>
                        </div>
                        <div class="container-form-add-client-entry">
                            <Entry height="3" width="15" type="email" placeholder="Adresse mail" required="true"></Entry>
                        </div>
                        <div class="container-form-add-client-entry">
                            <Entry height="3" width="15" type="text" placeholder="Téléphone" required="true"></Entry>
                        </div>
                        <div class="container-form-add-client-entry">
                            <Checkbox text="Client VIP" id="vip"></Checkbox>
                        </div>
                    </div>
                    <div class="sperator-form-add-client">

                    </div>
                    <div class="right-form-client">
                        <div class="container-form-add-client-entry">
                            <Entry height="3" width="15" type="text" placeholder="Adresse" required="true"></Entry>
                        </div>
                        <div class="container-form-add-client-entry">
                            <Entry height="3" width="15" type="text" placeholder="Ville" required="true"></Entry>
                        </div>
                        <div class="container-form-add-client-entry">
                            <Entry height="3" width="15" type="text" placeholder="Code postal" required="true"></Entry>
                        </div>
                        <div class="container-form-add-client-entry">
                            <Checkbox text="Prospect" id="prospect"></Checkbox>
                        </div>
                    </div>
                </div>
                <ButtonCustom class="btn" text="AJOUTER"/>
            </form>
        </div>
    </div>
</template>

<script setup lang="ts">
import Entry from '@/components/Entry.vue';
import ButtonCustom from '@/components/ButtonCustom.vue';
import Checkbox from '@/components/checkbox.vue';

    
</script>

<style>
.sperator-form-add-client{
    border-right: 2px solid #2D4570;
}
.container-add-client {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}
.container-form-add-client {
    height: 80%;
    width: 60%;
    z-index: 0;
    background-color: #FFFFFF;
    border: 2px solid #FFFFFF;
    border-radius: 10px;
    -webkit-box-shadow: -3px 10px 11px -4px rgba(0,0,0,0.42); 
    box-shadow: -3px 10px 11px -4px rgba(0,0,0,0.42);
}
.container-form-input {
    display: flex;
    justify-content: space-around;
    margin-top: 5vh;
}
.container-form-add-client-entry{
    margin-bottom: 5vh;
}
form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    width: 100%;
}
form > .btn {
    display: flex;
    justify-content: center;
    margin-top: 10vh;
}
</style>