<template>
  <BaseContainer>
    <ContentContainer title="Content Container" buttons="true">
      <template #buttons>
        <button>Button Bar</button>
        <button class="action">Button Bar</button>
      </template>
      <template #content>
        <h1>Buttons</h1>
        <div>
          <button>Default</button>
          <button disabled>Default</button>
        
          <button class="generic">Generic</button>
          <button class="generic" disabled>Generic</button>
        
          <button class="action">Action</button>
          <button class="action" disabled>Action</button>
          

          <button class="outlined">Default</button>
          <button class="outlined" disabled>Default</button>
        
          <button class="generic outlined">Generic</button>
          <button class="generic outlined" disabled>Generic</button>
        
          <button class="action outlined">Action</button>
          <button class="action outlined" disabled>Action</button>

        </div>

        <h1>Form Elements</h1>
        <div>
          <FormText placeholder="Input Text" label="Field Label" :model="text"/>
          <FormText placeholder="Input Text" label="Field with Error" error="An error message" :model="text"/>
          <FormText placeholder="Input Text" label="Field Label" off="true"/>
          <FormNumber placeholder="A Number" label="Field Label" />
          <FormNumber placeholder="A Number" label="Field Label" error="An Error"/>
          <FormNumber placeholder="A Number" label="Field Label" off="true"/>
          <FormSelect placeholder="Placeholder" label="Select">
            <option value="optionA">Option A</option>
            <option value="optionB">Option B</option>
            <option value="optionC">Option C</option>
            <option value="optionD">Option D</option>
          </FormSelect>
          <FormSelect placeholder="Placeholder" label="Select" off="true">
            <option value="optionA">Option A</option>
            <option value="optionB">Option B</option>
            <option value="optionC">Option C</option>
            <option value="optionD">Option D</option>
          </FormSelect>
          <FormCheckbox label="Checkbox"/>
          <FormCheckbox label="Checkbox" error="An Error Message"/>
          <FormCheckbox label="Checkbox" off="true"/>
        </div>
        <h2>Toasts</h2>
        <div>
          <Toast type="info">An Information!</Toast>
          <Toast type="warn">A Warning!</Toast>
          <Toast type="error">An Error!</Toast>
          <Toast type="success">Success!</Toast>
          <Toast auto_close="5000">Autoclose</Toast>
        </div>
      </template>
    </ContentContainer>
  </BaseContainer>


</template>

<script>

import BaseContainer from './components/layout/BaseContainer';
import ContentContainer from './components/layout/ContentContainer';

import FormText from './components/form/FormText';
import FormNumber from './components/form/FormNumber';
import FormSelect from './components/form/FormSelect';
import FormCheckbox from './components/form/FormCheckbox';

import Toast from './components/Toast'

export default {
  components: {
    BaseContainer,
    ContentContainer,

    FormText,
    FormNumber,
    FormSelect,
    FormCheckbox,

    Toast
  },
  data(){
    return {
      text: '',
      number: 0
    }
  }
}
</script>

<style>

@import './assets/styles/main.css';
@import './assets/styles/buttons.css';



#test {
  margin: 40px;
  padding: 24px;
  background-color: var(--white-normal);
}

</style>