<template>
  <div style="width: 380px">
    <q-banner
      rounded
      dense
      class="bg-blue-1 text-red"
      color="primary q-title"
      style="text-align: center"
    >
      {{ label }}
    </q-banner>

    <div v-if="internalModel" class="column">
      <q-toggle
        v-model="keepRatio"
        push
        label="Mantieni le proporzioni"
        rounded
        glossy
        toggle-color="primary"
      ></q-toggle>
      <CMySlider
        label="Ratio"
        v-model="ratio"
        :min="0.3"
        :max="1.8"
        color="green"
        :disable="!keepRatio"
        @update:model-value="modifValueRatio"
      ></CMySlider>

      <CMySlider
        label="Width:"
        v-model="internalModel.width"
        :min="10"
        :max="1000"
        color="green"
        :addstr="addstr ? 'px' : ''"
        @update:model-value="modifValueWidth"
      ></CMySlider>
      <CMySlider
        label="Height:"
        v-model="internalModel.height"
        :min="10"
        :max="1000"
        color="red"
        :addstr="addstr ? 'px' : ''"
        @update:model-value="modifValueHeight"
      ></CMySlider>
      <CMySlider
        v-if="gap"
        label="Gap:"
        v-model="internalModel.gap"
        :min="0"
        :max="50"
        color="red"
        addstr="px"
        @update:model-value="modifValueGap"
      ></CMySlider>
      <q-select
        v-if="fit"
        v-model="internalModel.fit"
        :options="tools.SelectListFit"
        label="Dimensione Img"
        options-dense
        dense
        emit-value
        map-options
        style="width: 120px"
        @update:model-value="modifValueFit"
        fill-input
        text-color="white"
      >
      </q-select>
    </div>
  </div>
</template>

<script lang="ts" src="./CMySize.ts">
</script>

<style lang="scss" scoped>
@import './CMySize.scss';
</style>
