<script setup lang="ts">
defineProps<{
  label: string
  hint?: string
}>()
</script>
<template>
  <div class="app-form-control">
    <label>
      {{ label }}
      <slot></slot>
    </label>
    <p
      v-if="hint"
      style="margin-top: 0.1rem; margin-bottom: 0"
      class="font-size-small text-muted"
    >
      {{ hint }}
    </p>
  </div>
</template>
<style lang="css">
.app-form-control {
  flex-grow: 1;
  margin: 0.5rem;
}

.app-form-control > label {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  font-weight: 700;
}

/* Styles for different form controls under here: */

.app-form-control > label input {
  font-size: 16px;
  font-family: 'OpenSans', sans-serif;
  padding: 0.25rem 0.5rem;
}

.app-form-control > label textarea {
  font-size: 16px;
  font-family: 'OpenSans', sans-serif;
  padding: 0.25rem 0.5rem;
}

.app-form-control > label select {
  font-size: 16px;
  font-family: 'OpenSans', sans-serif;
  padding: 0.25rem 0.5rem;
}

.app-form-control > label input[type='checkbox'] {
  align-self: flex-start;
}
</style>
