<template>
  <div class="row">
    <div class="col-md-4">
      <w-color-input v-model="$gc.theme.main['bgColor']" :label="$t('theme.main.bgColor')" class="p-1" dense outlined restore></w-color-input>
    </div>
    <div class="col-md-4">
      <w-color-input v-model="$gc.theme.main['containerBgColor']" :label="$t('theme.main.containerBgColor')" class="p-1" dense outlined restore></w-color-input>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <q-input
        v-model.number="$gc.theme.main['paddingTop']"
        type="number"
        :label="$t('theme.main.paddingTop')"
        :suffix="$t('pixel')"
        dense
        outlined
        class="p-1"
      />
    </div>
    <div class="col-md-4">
      <q-input
        v-model.number="$gc.theme.main['containerPaddingTop']"
        type="number"
        :label="$t('theme.main.containerPaddingTop')"
        :suffix="$t('pixel')"
        dense
        outlined
        class="p-1"
      />
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <q-input
        v-model.number="$gc.theme.main['paddingRight']"
        type="number"
        :label="$t('theme.main.paddingRight')"
        :suffix="$t('pixel')"
        dense
        outlined
        class="p-1"
      />
    </div>
    <div class="col-md-4">
      <q-input
        v-model.number="$gc.theme.main['containerPaddingRight']"
        type="number"
        :label="$t('theme.main.containerPaddingRight')"
        :suffix="$t('pixel')"
        dense
        outlined
        class="p-1"
      />
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <q-input
        v-model.number="$gc.theme.main['paddingBottom']"
        type="number"
        :label="$t('theme.main.paddingBottom')"
        :suffix="$t('pixel')"
        dense
        outlined
        class="p-1"
      />
    </div>
    <div class="col-md-4">
      <q-input
        v-model.number="$gc.theme.main['containerPaddingBottom']"
        type="number"
        :label="$t('theme.main.containerPaddingBottom')"
        :suffix="$t('pixel')"
        dense
        outlined
        class="p-1"
      />
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <q-input
        v-model.number="$gc.theme.main['paddingLeft']"
        type="number"
        :label="$t('theme.main.paddingLeft')"
        :suffix="$t('pixel')"
        dense
        outlined
        class="p-1"
      />
    </div>
    <div class="col-md-4">
      <q-input
        v-model.number="$gc.theme.main['containerPaddingLeft']"
        type="number"
        :label="$t('theme.main.containerPaddingLeft')"
        :suffix="$t('pixel')"
        dense
        outlined
        class="p-1"
      />
    </div>
  </div>
</template>

<script setup lang="ts"></script>
