<template>
  <properties-card title="Color">
    <v-container>
      <v-row>
        <p class="p-h">Background Color</p>
        <v-spacer class="pa-1" />
        <color-selector
          :color="widgetStyle.backgroundColor"
          @color="widgetStyle.backgroundColor = $event"
        />
      </v-row>
    </v-container>
  </properties-card>
  <!--  <div style="padding-bottom: 10px">-->

  <!--    <div class="container">-->
  <!--      &lt;!&ndash;      <div class="row">&ndash;&gt;-->
  <!--      &lt;!&ndash;        <div class="col-md-6">&ndash;&gt;-->
  <!--      &lt;!&ndash;          <span class="font-12">Image Link</span>&ndash;&gt;-->
  <!--      &lt;!&ndash;        </div>&ndash;&gt;-->
  <!--      &lt;!&ndash;      </div>&ndash;&gt;-->
  <!--      <div class="row">-->
  <!--        <div class="col-md-6" v-if="widgetStyle.textcolor">-->
  <!--          <div>-->
  <!--            <span class="font-12 right-45">Text Color</span>-->
  <!--          </div>-->
  <!--          <ColorPicker-->
  <!--            class="right-45"-->
  <!--            :color="widgetStyle.textcolor"-->
  <!--            v-model="widgetStyle.textcolor"-->
  <!--          />-->
  <!--        </div>-->
  <!--        <div class="col-md-6" v-if="widgetStyle.backgroundColor">-->
  <!--          <div>-->
  <!--            <span class="font-12">Background Color</span>-->
  <!--          </div>-->
  <!--          <div>-->
  <!--            <ColorPicker-->
  <!--              :color="widgetStyle.backgroundColor"-->
  <!--              v-model="widgetStyle.backgroundColor"-->
  <!--            />-->
  <!--          </div>-->
  <!--        </div>-->
  <!--      </div>-->
  <!--      <div class="row">-->
  <!--        <div class="col-md-6" v-if="widgetStyle.texthovercolor">-->
  <!--          <div>-->
  <!--            <span class="font-12 right-45">Hover Color</span>-->
  <!--          </div>-->
  <!--          <ColorPicker-->
  <!--            class="right-45"-->
  <!--            :color="widgetStyle.texthovercolor"-->
  <!--            v-model="widgetStyle.texthovercolor"-->
  <!--          />-->
  <!--        </div>-->
  <!--      </div>-->
  <!--    </div>-->
  <!--  </div>-->
</template>

<script>
import PropertiesCard from "@/components/properties/components/PropertiesCard";
import ColorSelector from "@/components/properties/components/ColorSelector";

export default {
  props: {
    widgetStyle: Object,
  },
  components: {
    ColorSelector,
    PropertiesCard,
  },
};
</script>
