<template>
  <label class="field">
    <span v-if="label" :class="['field-label', { 'required': required }]">{{ label }}</span>
    <span v-if="description" class="field-description" v-html="description"></span>
    <input type="hidden" :name="nameHeight" :value="height" />
    <input type="hidden" :name="nameWidth" :value="width" />

    <div :class="['flex', 'nowrap-xs', 'middle-xs', {'opacity-5': fixedWidth}]">
      <span class="text-gray text-small right-padding-small vertical-padding-small" style="min-width:58px">Largura</span>
      <input
        v-if="!fixedWidth"
        class="range-slider"
        type="range"
        :min="minRange"
        :max="maxRange"
        v-model="width"
        @change="onEmitProportion"
      />
      <span class="range-slider" v-if="fixedWidth"></span>
      <span class="text-dark text-medium left-padding-small vertical-padding-small">{{ width }}</span>
    </div>

    <div :class="['flex', 'nowrap-xs', 'middle-xs', {'opacity-5': fixedHeight}]">
      <span class="text-gray text-small right-padding-small vertical-padding-small" style="min-width:58px">Altura</span>
      <input
        v-if="!fixedHeight"
        class="range-slider"
        type="range"
        :min="minRange"
        :max="maxRange"
        v-model="height"
        @change="onEmitProportion"
      />
      <span class="range-slider" v-if="fixedHeight"></span>
      <span class="text-dark text-medium left-padding-small vertical-padding-small">{{ height }}</span>
    </div>

    <div class="top-padding-medium flex between-xs">
      <base-button apperance="outline" square @click.native="onChangeAspectRadio('1:1')">
        <template #icon>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
            <rect x="0.5" y="0.5" width="17" height="17" fill="#fff" />
            <path d="M17,1V17H1V1H17m1-1H0V18H18V0Z" />
          </svg>
        </template>
        1:1
      </base-button>
      <base-button apperance="outline" square @click.native="onChangeAspectRadio('4:3')">
        <template #icon>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
            <g opacity="0.45"><rect width="18" height="18" /></g>
            <rect x="0.5" y="2.8" width="17" height="12.5" fill="#fff" />
            <path d="M17,3.3V14.8H1V3.3H17m1-1H0V15.8H18V2.3Z" />
          </svg>
        </template>
        4:3
      </base-button>
      <base-button apperance="outline" square @click.native="onChangeAspectRadio('3:4')">
        <template #icon>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
            <g opacity="0.45"><rect width="18" height="18" /></g>
            <rect x="2.8" y="0.5" width="12.5" height="17" fill="#fff" />
            <path d="M14.8,1V17H3.3V1H14.8m1-1H2.3V18H15.8V0Z" />
          </svg>
        </template>
        3:4
      </base-button>
      <base-button apperance="outline" square @click.native="onChangeAspectRadio('9:16')">
        <template #icon>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
            <g opacity="0.45"><rect width="18" height="18" /></g>
            <rect x="4.4" y="0.5" width="9.1" height="17" fill="#fff" />
            <path d="M13.1,1V17H4.9V1h8.2m1-1H3.9V18H14.1V0Z" />
          </svg>
        </template>
        9:16
      </base-button>
    </div>
  </label>
</template>

<script src="./scripts.js"></script>
