<?php


namespace ColibriWP\Theme\Customizer\Controls;


class SpacingControl extends VueControl {

    public $type = "colibri-spacing";

    public static function sanitize( $value, $control_data, $default = '' ) {
        //@TODO proper sanitization
        return $value;
    }

    protected function content_template() {
        $this->printVueMountPoint();

        ?>
        <div class="customize-control-notifications-container"></div>
        <?php
    }

    protected function printVueContent() {
        ?>
        <div class="colibri-fullwidth">

            <div class="inline-elements-container">
                <div class="inline-element">
                    <# if ( data.label ) { #>
                    <span class="customize-control-title">{{{ data.label }}}</span>
                    <# } #>
                </div>

                <div class="inline-element fit">
                    <el-radio-group v-model="value.unit">
                        <el-radio-button
                                v-for="u in spacing_units"
                                size="mini"
                                :label="u.label"
                                :key="u.unit"
                        >
                        </el-radio-button>
                    </el-radio-group>
                </div>
            </div>

            <div class="colibri-fullwidth">
                <div class="inline-elements-container">

                    <div class="side" v-for="(side_value,side) in value.sides" class="inline-element" :key="side">
                        <div class="side-inner">
                            <label class="side-label"><?php $this->vueEcho( "label(side)" ); ?></label>
                            <el-input-number
                                    controls-position="right"
                                    placeholder=""

                                    v-model="value.sides[side]">
                            </el-input-number>
                        </div>
                    </div>

                </div>
            </div>

        </div>
        <?php
    }
}