<template>
  <div class="form-base" :class="classes()">
        <label>{{ label }}</label><br>
        <slot></slot>
        <p :if="error">{{error}}</p>
  </div>
</template>

<script>
export default {
    props: [
        'label',
        'error',
        'off',
        'model',
        'placeholder'
    ],
    methods: {
        classes(){
            let classes = '';
            classes += this.error ? 'error ': '';
            classes += this.off ? 'disabled ': '';
            return classes;
        }
    }
}
</script>

<style scoped>

    .form-base {
        margin: 20px 4px;
        /* display: flex; */
    }

    .form-base  label {
        margin-top: 12px;
        font-weight: bold;
        font-size: 1.2rem;
        color: var(--grey-dark);
        width: 100%;
    }

    .form-base > input, .form-base > select {
        margin-top: 4px;
        padding: 6px;
        font-weight: bold;

        color: var(--grey-dark);
        /* background-color: var(--white-washed); */
        border: 1px solid var(--grey-light);
        border-radius: 4px;

        outline: none;
        width: calc(100% - 14px);
    }

    .form-base > select {
        width: 100%;
        font-weight: normal;
    }

    .form-base > input::placeholder, .form-base > select option:disabled {
        color: var(--grey);
    }

    .form-base > input:focus, .form-base > select:focus {
        border-color: var(--success);
        box-shadow: 0 0 4px var(--success);
    }

    .form-base.error > input, .form-base.error > select {
        border-color: var(--error);
        border-width: 2px;
    }

    .form-base.error > input:focus, .form-base.error > select:focus {
        box-shadow: 0 0 4px var(--error);
    }

    .form-base.error > p {
        margin-top: 6px;
        margin-left: 4px;
        color: var(--error);
        font-size: 1rem;
    }

    .form-base.disabled > input, .form-base.disabled > select{
        background-color: var(--grey-lightest);
        color: var(--grey);
        border-color: var(--grey-lightest);
        cursor: not-allowed;
    }

    .form-base.disabled > label {
        cursor: not-allowed;
    }

    .form-base.disabled > input::placeholder, .form-base.disabled > select option:disabled{
        color: #00000077;
    }


</style>