<template>
  <div class="flex flex-column flex-row-ns pa3 calisto bg-black-05">
    <div class="w-50-ns w-100 ph3">
      <!-- upload image -->
      ...
    </div>
    <section class="w-40-l w-50-m w-100 ph3 tl">
      <h2>Transform Image</h2>
      <form class="ba b--black bw2 bg-white br2 mw6 center pv2 ph4 shadow-5 f6">
        <div>
          <label for="height" class="dib mb2 mr2 black-70 f5 w-30"
            >Height</label
          >
          <input
            type="number"
            name="height"
            id="height"
            class="dib mb3 br2 pa2 ba bw1 b--black"
            v-model="height" />
        </div>
        <div>
          <label class="dib mb2 mr2 black-70 f5 w-30" for="width">Width</label>
          <input
            type="number"
            name="width"
            id="width"
            class="dib mb3 br2 pa2 ba bw1 b--black"
            v-model="width" />
        </div>
        <div>
          <label class="dib mb2 mr2 black-70 f5 w-30" for="sharpen"
            >Sharpen</label
          >
          <input
            type="number"
            name="sharpen"
            id="sharpen"
            class="dib mb3 br2 pa2 ba bw1 b--black"
            v-model="sharpen"
            min="1"
            max="10" />
        </div>
        <div>
          <label class="dib mb2 mr2 black-70 f5 w-30" for="blur">Blur</label>
          <input
            type="number"
            name="blur"
            id="blur"
            class="dib mb3 br2 pa2 ba bw1 b--black"
            v-model="blur"
            min="1"
            max="250" />
        </div>
        <button
          class="center db pv2 ph3 mb3 tracked bg-black ba br3 white hover-black hover-bg-black-30 bg-animate pointer f7">
          Download
        </button>
      </form>
    </section>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        height: 100,
        sharpen: 0,
        blur: 0,
        width: 100,
      };
    },
  };
</script>