<div>
    <div class="swap-to-typography">

        <div class="row">
            <div class="column column-50">
				<?php esc_html_e('Font Family', 'swap-configurations'); ?>
                <select v-model="typography['font-family']" placeholder="adas">
					<?php foreach (swap_get_google_fonts() as $k => $val) : ?>
                        <option value="<?php echo $k ?>"><?php echo $val; ?></option>
					<?php endforeach; ?>
                </select>
            </div>

            <div class="column column-50">

				<?php esc_html_e('Color', 'swap-configurations'); ?>
                <div class="swap_colorpicker_wrapper" style="width: 100%">
                    <span v-bind:style="{'background-color': color}"></span>
                    <input type="text" v-model="color"/>
                    <swap-color v-on:get-color="color = $event"></swap-color>
                </div>

            </div>

        </div>

        <div class="row">
            <div class="column column-50">
				<?php esc_html_e('Font Size', 'swap-configurations'); ?>
                <input type="text" v-model="typography['font-size']"/>
            </div>

            <div class="column column-50">

				<?php esc_html_e('Line Height', 'swap-configurations'); ?>
                <input type="text" v-model="typography['line-height']"/>
            </div>

        </div>


        <div class="row">
            <div class="column column-50">
				<?php esc_html_e('Font Weight', 'swap-configurations'); ?>
                <select v-model="typography['font-weight']">
                    <option value=""><?php esc_html_e('Default', 'swap-configurations'); ?></option>
                    <option value="200"><?php esc_html_e('Thin', 'swap-configurations'); ?></option>
                    <option value="300"><?php esc_html_e('Light', 'swap-configurations'); ?></option>
                    <option value="400"><?php esc_html_e('Regular', 'swap-configurations'); ?></option>
                    <option value="500"><?php esc_html_e('Medium', 'swap-configurations'); ?></option>
                    <option value="600"><?php esc_html_e('Semi-bold', 'swap-configurations'); ?></option>
                    <option value="700"><?php esc_html_e('Bold', 'swap-configurations'); ?></option>
                    <option value="900"><?php esc_html_e('Ultra Bold', 'swap-configurations'); ?></option>
                </select>
            </div>

            <div class="column column-50">

				<?php esc_html_e('Letter Spacing', 'swap-configurations'); ?>
                <input type="text" v-model="typography['letter-spacing']"/>
            </div>

        </div>

<!--		--><?php //esc_html_e('Add classes and tags separating with comma (ex: .class, h1, h2 …)', 'swap-configurations'); ?>
<!--        <input type="text" v-model="selectors"/>-->
    </div>
</div>