<template>
  <div class="component-additional_options">
    <div class="component-properties">
      <div class="left">
        <div class="property-container size-property-container">
          <div class="title">Anchor</div>
          <div class="property">
            <div class="input-field">
              <input type="text" title="Anchor" v-model="properties.anchor" />
            </div>
          </div>
        </div>
        <div class="property-container image-property-container">
          <div class="title">Classes</div>
          <div class="property">
            <div class="input-field">
              <input type="text" title="Classes" v-model="properties.classes" />
            </div>
          </div>
        </div>
        <div class="properties-group padding-properties-group">
          <div class="title">Padding</div>
          <div class="properties">
            <div class="property-container remove_top_padding-property-container">
              <input :id="'remove_top_padding_' + index" type="checkbox" v-model="properties.removeTopPadding" />
              <label :for="'remove_top_padding_' + index">Remove top padding</label>
            </div>
            <div class="property-container remove_bottom_padding-property-container">
              <input :id="'remove_bottom_padding_' + index" type="checkbox" v-model="properties.removeBottomPadding" />
              <label :for="'remove_bottom_padding_' + index">Remove bottom padding</label>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="properties-group margins-properties-group">
          <div class="title">Margins</div>
          <div class="properties">
            <div class="property-container negative_top_margin-property-container">
              <input :id="'negative_top_margin_' + index" type="checkbox" v-model="properties.negativeTopMargin" />
              <label :for="'negative_top_margin_' + index">Negative top margin</label>
            </div>
            <div class="property-container negative_bottom_margin-property-container">
              <input :id="'negative_bottom_margin_' + index" type="checkbox" v-model="properties.negativeBottomMargin" />
              <label :for="'negative_bottom_margin_' + index">Negative bottom margin</label>
            </div>
          </div>
        </div>
        <div class="properties-group visibility-properties-group">
          <div class="title">Visibility</div>
          <div class="properties">
            <div class="property-container hide_on_mobile-property-container">
              <input :id="'hide_on_mobile_' + index" type="checkbox" v-model="properties.hideOnMobile" />
              <label :for="'hide_on_mobile_' + index">Hide on mobile</label>
            </div>
            <div class="property-container hide_on_desktop-property-container">
              <input :id="'hide_on_desktop_' + index" type="checkbox" v-model="properties.hideOnDesktop" />
              <label :for="'hide_on_desktop_' + index">Hide on desktop</label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: [ "properties", "index" ],
    data() {
     return {
       
     }
    },
    methods: {
    
    }
  }
</script>