<script setup lang="ts">
import BaseDiv from "@components/baseComponents/BaseDiv.vue";
import BaseButton from "@components/baseComponents/BaseButton.vue";
</script>

<template>
    <div class="container text-center">
        <h1 class="display-1 fw-normal">Main Page</h1>
        <div class="row justify-content-center">
            <div class="col">These are the palettes for this site:</div>
        </div>
        <div class="row justify-content-center align-items-center">
            <div class="col">Primary:</div>
        </div>
        <div class="row justify-content-center">
            <BaseDiv class="col-md-1 primary">Main</BaseDiv>
            <BaseDiv class="col-md-1 primary hover">Hover</BaseDiv>
            <BaseDiv class="col-md-1 primary active">Active</BaseDiv>
            <BaseDiv class="col-md-1 primary disabled">Disabled</BaseDiv>
        </div>
        <div class="row justify-content-center">
            <BaseDiv class="col">Secondary:</BaseDiv>
        </div>
        <div class="row justify-content-center">
            <BaseDiv class="col-md-1 secondary">Main</BaseDiv>
            <BaseDiv class="col-md-1 secondary hover">Hover</BaseDiv>
            <BaseDiv class="col-md-1 secondary active">Active</BaseDiv>
            <BaseDiv class="col-md-1 secondary disabled">Disabled</BaseDiv>
        </div>
        <div class="row justify-content-center">
            <BaseDiv class="col">Buttons:</BaseDiv>
        </div>
        <div class="row justify-content-center">
            <div class="col">
                <div class="btn-group">
                    <BaseButton class="btn btn-primary">Primary Button</BaseButton>
                    <BaseButton class="btn btn-secondary">Secondary Button</BaseButton>
                    <BaseButton class="btn btn-submit">Submit Button</BaseButton>
                    <BaseButton class="btn btn-danger">Danger Button</BaseButton>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.row {
    padding-top: 0.5rem;
}

.col-md-1 {
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    align-content: center;
    padding: 0.5rem;
    margin-right: 0.5rem;
    height: 100px;
}

.col-md-1.primary {
    background-color: var(--color-primary);

}

.col-md-1.primary.hover {
    background-color: var(--color-primary-hover);
}

.col-md-1.primary.active {
    background-color: var(--color-primary-active);
}

.col-md-1.primary.disabled {
    background-color: var(--color-primary-disabled);
}

.col-md-1.secondary {
    background-color: var(--color-secondary);
}

.col-md-1.secondary.hover {
    background-color: var(--color-secondary-hover);
}

.col-md-1.secondary.active {
    background-color: var(--color-secondary-active);
}

.col-md-1.secondary.disabled {
    background-color: var(--color-secondary-disabled);
}
</style>