File "cf7-material-design-shortcode-generator.php"

Full Path: /home/vantageo/public_html/cache/cache/cache/cache/cache/.wp-cli/wp-content/plugins/material-design-for-contact-form-7/admin/cf7-material-design-shortcode-generator.php
File size: 24.98 KB
MIME-type: text/x-php
Charset: utf-8

<?php

// don't load directly
if (!defined('ABSPATH')) die('-1');

class CF7_Material_Design_Shortcode_Generator {

	private static $instance = null;

	public static function get_instance() {
		if ( null == self::$instance ) {
			self::$instance = new self;
		}
		return self::$instance;
	}

	private function __construct() {}


	/**
	 * Get shortcode generator state array
	 */
	public function get_state() {
		global $cf7md_fs;
		
		// Reusable attributes
		$label_attr = array(
			'name'     => 'label',
			'required' => true,
			'default'  => '',
			'label'    => __( 'Label', 'material-design-for-contact-form-7' ),
			'renderer' => 'text'
		);
		$help_attr = array(
			'name'     => 'help',
			'default'  => '',
			'label'    => __( 'Help text', 'material-design-for-contact-form-7' ),
			'help'     => __( 'This will appear below the field', 'material-design-for-contact-form-7' ),
			'renderer' => 'text'
		);
		$icon_attr = array(
			'name'     => 'icon',
			'default'  => '',
			'label'    => __( 'Icon', 'material-design-for-contact-form-7' ),
			'icon'     => 'sentiment_satisfied_alt',
			'help'     => sprintf(
							/* translators: %1$s hyperlink, %2$s: "Material Design", %3$s: end of hyperlink, %4$s: Icon name */
							__( 'Optionally enter the name of a %1$s %2$s Icon%3$s. E.g. <code>%4$s</code>.', 'material-design-for-contact-form-7' ),
							'<a href="https://material.io/tools/icons/" target="_blank">',
							'Material Design',
							'</a>',
							'person'
						  ),
			'renderer' => 'text',
			'locked'   => $cf7md_fs->is_free_plan()
		);
		$outlined_attr = array(
			'name'     => 'outlined',
			'default'  => '',
			'label'    => __( 'Outlined', 'material-design-for-contact-form-7' ),
			'options'  => array( 'yes' => __( 'Use outlined variant', 'material-design-for-contact-form-7' ) ),
			'renderer' => 'toggle'
		);
		$display_attr = array(
			'name'     => 'display',
			'default'  => 'stacked',
			'options'  => array(
				'stacked'   => /* translators: As in vertical */ __( 'Stacked', 'material-design-for-contact-form-7' ),
				'inline'    => /* translators: As in side-by-side */ __( 'Inline', 'material-design-for-contact-form-7' ),
				'columns-2' => '2 ' . __( 'Columns', 'material-design-for-contact-form-7' ),
				'columns-3' => '3 ' . __( 'Columns', 'material-design-for-contact-form-7' ),
				'columns-4' => '4 ' . __( 'Columns', 'material-design-for-contact-form-7' )
			),
			'label'    => /* translators: As in layout */ __( 'Display', 'material-design-for-contact-form-7' ),
			'renderer' => 'display'
		);
		$desktopwidth_attr = array(
			'name'     => 'desktopwidth',
			'default'  => '12',
			'label'    => /* translators: As in laptop */ __( 'Desktop width', 'material-design-for-contact-form-7' ),
			'help'     => __( 'How many columns out of 12 should this element occupy on large screens?', 'material-design-for-contact-form-7' ),
			'renderer' => 'layout',
			'locked'   => $cf7md_fs->is_free_plan()
		);
		$tabletwidth_attr = array(
			'name'     => 'tabletwidth',
			'default'  => '8',
			'label'    => /* translators: As in iPad */ __( 'Tablet width', 'material-design-for-contact-form-7' ),
			'help'     => __( 'How many columns out of 8 should this element occupy on tablet-sized screens?', 'material-design-for-contact-form-7' ),
			'renderer' => 'layout',
			'locked'   => $cf7md_fs->is_free_plan()
		);
		$mobilewidth_attr = array(
			'name'     => 'mobilewidth',
			'default'  => '4',
			'label'    => __( 'Mobile width', 'material-design-for-contact-form-7' ),
			'help'     => __( 'How many columns out of 4 should this element occupy on mobile-sized screens?', 'material-design-for-contact-form-7' ),
			'renderer' => 'layout',
			'locked'   => $cf7md_fs->is_free_plan()
		);

		// Main outer array
		$state = array();

		// Inner shortcodes array
		$shortcodes = array();

		// [md-form]
		$md_form = array(
			'name'        => __( 'Form', 'material-design-for-contact-form-7' ),
			'description' => __( 'Wraps your entire form.', 'material-design-for-contact-form-7' ),
			'type'        => 'md-form',
			'wraps'       => array(),
			'replace'     => __( 'all your other form tags and shortcodes go here', 'material-design-for-contact-form-7' ),
			'attributes'  => array(
				array(
					'name'     => 'theme',
					'default'  => '',
					'label'    => __( 'Theme', 'material-design-for-contact-form-7' ),
					'options'  => array( 'dark' => __( 'Dark', 'material-design-for-contact-form-7' ) ),
					'renderer' => 'toggle',
					'help'     => __( 'The dark theme is useful when your form is on a dark background', 'material-design-for-contact-form-7' )
				),
				array(
					'name'     => 'spacing',
					'default'  => '',
					'label'    => __( 'Spacing', 'material-design-for-contact-form-7' ),
					'options'  => array( 'tight' => /* translators: As in close-together */ __( 'Tight', 'material-design-for-contact-form-7' ) ),
					'renderer' => 'toggle',
					'help'     => __( 'Reduce the vertical spacing between items?', 'material-design-for-contact-form-7' )
				)
			)
		);
		$shortcodes['md-form'] = $md_form;

		// [md-text]
		$md_text = array(
			'name'        => __( 'Text', 'material-design-for-contact-form-7' ),
			'description' => sprintf(
								/* translators: %s: form tag type */
								__( 'Wraps %s, %s, %s, %s, %s and %s form tags.', 'material-design-for-contact-form-7' ),
								'text', 'email', 'url', 'tel', 'number', 'date'
							 ),
			'type'        => 'md-text',
			'attributes'  => array(),
			'wraps'       => array( 'text', 'email', 'url', 'tel', 'number', 'date' )
		);
		array_push( $md_text['attributes'], $label_attr, $help_attr, $icon_attr, $outlined_attr, $desktopwidth_attr, $tabletwidth_attr, $mobilewidth_attr );
		$shortcodes['md-text'] = $md_text;

		// [md-textarea]
		$md_textarea = array(
			'name'        => __( 'Text area', 'material-design-for-contact-form-7' ),
			'description' => sprintf(
				/* translators: %s: form tag type */
				__( 'Wraps your %s form tags.', 'material-design-for-contact-form-7' ),
				'textarea'
			 ),
			'type'        => 'md-textarea',
			'attributes'  => array(
				array(
					'name'     => 'autosize',
					'default'  => '1',
					'label'    => __( 'Autosize', 'material-design-for-contact-form-7' ),
					'options'  => array( '1' => __( 'Automatically expand as the user types', 'material-design-for-contact-form-7' ) ),
					'renderer' => 'toggle'
				)
			),
			'wraps'       => array( 'textarea' )
		);
		array_unshift( $md_textarea['attributes'], $label_attr, $help_attr );
		array_push( $md_textarea['attributes'], $desktopwidth_attr, $tabletwidth_attr, $mobilewidth_attr );
		$shortcodes['md-textarea'] = $md_textarea;

		// [md-select]
		$md_select = array(
			'name'        => __( 'Select', 'material-design-for-contact-form-7' ),
			'description' => sprintf(
				/* translators: %s: form tag type */
				__( 'Wraps your %s and %s form tags.', 'material-design-for-contact-form-7' ),
				'select', 'drop-down menu'
			 ),
			'type'        => 'md-select',
			'attributes'  => array(),
			'wraps'       => array( 'select', 'drop-down menu' )
		);
		array_push( $md_select['attributes'], $label_attr, $help_attr, $icon_attr, $outlined_attr, $desktopwidth_attr, $tabletwidth_attr, $mobilewidth_attr );
		$shortcodes['md-select'] = $md_select;
		
		// [md-checkbox]
		$md_checkbox = array(
			'name'        => __( 'Checkbox', 'material-design-for-contact-form-7' ),
			'description' => sprintf(
				/* translators: %s: form tag type */
				__( 'Wraps your %s form tags.', 'material-design-for-contact-form-7' ),
				'checkbox'
			 ),
			'type'        => 'md-checkbox',
			'attributes'  => array(),
			'wraps'       => array( 'checkbox' )
		);
		array_push( $md_checkbox['attributes'], $label_attr, $help_attr, $display_attr, $desktopwidth_attr, $tabletwidth_attr, $mobilewidth_attr );
		$shortcodes['md-checkbox'] = $md_checkbox;
		
		// [md-radio]
		$md_radio = array(
			'name'        => /* translators: As in radio button form control */ __( 'Radio', 'material-design-for-contact-form-7' ),
			'description' => sprintf(
				/* translators: %s: form tag type */
				__( 'Wraps your %s form tags.', 'material-design-for-contact-form-7' ),
				'radio'
			 ),
			'type'        => 'md-radio',
			'attributes'  => array(),
			'wraps'       => array( 'radio' )
		);
		array_push( $md_radio['attributes'], $label_attr, $help_attr, $display_attr, $desktopwidth_attr, $tabletwidth_attr, $mobilewidth_attr );
		$shortcodes['md-radio'] = $md_radio;

		// [md-switch]
		$md_switch = array(
			'name'        => /* translators: As in switch form control */ __( 'Switch', 'material-design-for-contact-form-7' ),
			'description' => sprintf(
				/* translators: %s: form tag type */
				__( 'Turn %s into switches.', 'material-design-for-contact-form-7' ),
				'checkboxes'
			 ),
			'type'        => 'md-switch',
			'attributes'  => array(),
			'wraps'       => array( 'checkbox' ),
			'locked'      => $cf7md_fs->is_free_plan()
		);
		array_push( $md_switch['attributes'], $label_attr, $help_attr, $display_attr, $desktopwidth_attr, $tabletwidth_attr, $mobilewidth_attr );
		$shortcodes['md-switch'] = $md_switch;

		// [md-accept]
		$md_accept = array(
			'name'        => __( 'Acceptance', 'material-design-for-contact-form-7' ),
			'description' => sprintf(
				/* translators: %s: form tag type */
				__( 'Wraps your %s form tags.', 'material-design-for-contact-form-7' ),
				'acceptance'
			 ),
			'type'        => 'md-accept',
			'attributes'  => array(
				array(
					'name'     => 'terms',
					'default'  => '',
					'label'    => /* translators: As in terms and conditions */ __( 'Terms', 'material-design-for-contact-form-7' ),
					'renderer' => 'text',
					'help'     => __( 'The terms to which the user must agree. NOTE: If the CF7 acceptance tag has content, that content will override this terms attribute.', 'material-design-for-contact-form-7' )
				)
			),
			'wraps'       => array( 'acceptance' )
		);
		$accept_label_attr = $label_attr;
		unset($accept_label_attr['required']);
		array_push( $md_accept['attributes'], $accept_label_attr, $help_attr, $desktopwidth_attr, $tabletwidth_attr, $mobilewidth_attr );
		$shortcodes['md-accept'] = $md_accept;

		// [md-file]
		$md_file = array(
			'name'        => __( /* translators: As in a file on your computer */ 'File', 'material-design-for-contact-form-7' ),
			'description' => __( 'Wraps your file upload form tags.', 'material-design-for-contact-form-7' ),
			'type'        => 'md-file',
			'attributes'  => array(
				array(
					'name'     => 'nofile',
					'default'  => __( 'No file chosen', 'material-design-for-contact-form-7' ),
					'label'    => __( 'No file text', 'material-design-for-contact-form-7' ),
					'renderer' => 'text',
					'help'     => __( 'The text shown before a file is chosen.', 'material-design-for-contact-form-7' )
				),
				array(
					'name'     => 'btn_text',
					'default'  => __( 'Choose file', 'material-design-for-contact-form-7' ),
					'label'    => __( 'Button text', 'material-design-for-contact-form-7' ),
					'renderer' => 'text'
				)
			),
			'wraps'       => array( 'file' )
		);
		array_unshift( $md_file['attributes'], $label_attr );
		array_push( $md_file['attributes'], $help_attr, $desktopwidth_attr, $tabletwidth_attr, $mobilewidth_attr );
		$shortcodes['md-file'] = $md_file;

		// [md-quiz]
		$md_quiz = array(
			'name'        => __( 'Quiz', 'material-design-for-contact-form-7' ),
			'description' => __( 'Wraps your quiz form tags.', 'material-design-for-contact-form-7' ),
			'type'        => 'md-quiz',
			'attributes'  => array(
				array (
					'name'     => 'label',
					'required' => false,
					'default'  => '',
					'label'    => __( 'Label', 'material-design-for-contact-form-7' ),
					'renderer' => 'text',
					'help'     => __( 'This label will appear above the field. The quiz question will appear in the floating label.', 'material-design-for-contact-form-7' )
				)
			),
			'wraps'       => array( 'quiz' )
		);
		array_push( $md_quiz['attributes'], $help_attr, $outlined_attr, $desktopwidth_attr, $tabletwidth_attr, $mobilewidth_attr );
		$shortcodes['md-quiz'] = $md_quiz;
		
		// [md-captcha]
		$md_captcha = array(
			'name'        => __( 'Captcha', 'material-design-for-contact-form-7' ),
			'description' => sprintf(
				/* translators: %s: form tag type */
				__( 'Wraps your %s form tags.', 'material-design-for-contact-form-7' ),
				'captcha'
			 ),
			'type'        => 'md-captcha',
			'attributes'  => array(),
			'wraps'       => array( 'captcha' )
		);
		array_push( $md_captcha['attributes'], $desktopwidth_attr, $tabletwidth_attr, $mobilewidth_attr );
		$shortcodes['md-captcha'] = $md_captcha;

		// [md-submit]
		$md_submit = array(
			'name'        => __( 'Submit', 'material-design-for-contact-form-7' ),
			'description' => sprintf(
				/* translators: %s: form tag type */
				__( 'Wraps your %s form tags.', 'material-design-for-contact-form-7' ),
				'submit'
			 ),
			'type'        => 'md-submit',
			'attributes'  => array(
				array(
					'name'     => 'style',
					'default'  => 'raised',
					'label'    => __( 'Button style', 'material-design-for-contact-form-7' ),
					'renderer' => 'radio',
					'options'  => array(
									'raised' => __( 'Raised', 'material-design-for-contact-form-7' ),
									'unelevated' => __( 'Unelevated', 'material-design-for-contact-form-7' ),
									'outlined' => __( 'Outlined', 'material-design-for-contact-form-7' ),
									'secondary' => __( 'Secondary', 'material-design-for-contact-form-7')
								),
					'help'     => ''
				)
			),
			'wraps'       => array( 'submit', 'previous' ),
			'replace'     => sprintf(
								/* translators: %s: form tag type */
								__( 'one or more %s or %s form tags go here', 'material-design-for-contact-form-7' ),
								'submit', 'previous'
							)
		);
		array_push( $md_submit['attributes'], $desktopwidth_attr, $tabletwidth_attr, $mobilewidth_attr );
		$shortcodes['md-submit'] = $md_submit;

		// [md-card]
		$md_card = array(
			'name'        => __( 'Card', 'material-design-for-contact-form-7' ),
			'description' => __( 'Group elements into sections with cards.', 'material-design-for-contact-form-7' ),
			'type'        => 'md-card',
			'attributes'  => array(
				array(
					'name'     => 'title',
					'default'  => '',
					'label'    => __( 'Title', 'material-design-for-contact-form-7' ),
					'renderer' => 'text'
				),
				array(
					'name'     => 'subtitle',
					'default'  => '',
					'label'    => __( 'Subtitle', 'material-design-for-contact-form-7' ),
					'renderer' => 'text'
				),
				array(
					'name'     => 'titlesize',
					'default'  => '',
					'label'    => __( 'Title size', 'material-design-for-contact-form-7' ),
					'options'  => array( 'large' => __( 'Larger title', 'material-design-for-contact-form-7' ) ),
					'renderer' => 'toggle'
				)
			),
			'wraps'       => array( '*' ),
			'replace'     => sprintf(
								/* translators: %s: shortcode type */
								__( 'one or more %s shortcodes or other elements go here', 'material-design-for-contact-form-7' ),
								'[md-*]'
							),
			'locked'      => $cf7md_fs->is_free_plan()
		);
		array_push( $md_card['attributes'], $desktopwidth_attr, $tabletwidth_attr, $mobilewidth_attr );
		$shortcodes['md-card'] = $md_card;

		// [md-raw]
		$md_raw = array(
			'name'        => __( 'Raw', 'material-design-for-contact-form-7' ),
			'description' => __( 'Wraps html or any miscellaneous elements.', 'material-design-for-contact-form-7' ),
			'type'        => 'md-raw',
			'wraps'       => array(),
			'replace'     => __( 'any raw html or miscellaneous elements go here', 'material-design-for-contact-form-7' ),
			'attributes'  => array()
		);
		array_push( $md_raw['attributes'], $desktopwidth_attr, $tabletwidth_attr, $mobilewidth_attr );
		$shortcodes['md-raw'] = $md_raw;

		// [md-grid]
		$md_grid = array(
			'name'        => __( 'Grid', 'material-design-for-contact-form-7' ),
			'description' => sprintf(
				/* translators: %s: form tag type */
				__( 'Fixes layout for non-immediate children of %s or %s.', 'material-design-for-contact-form-7' ),
				'<code>[md-form]</code>', '<code>[md-card]</code>'
			 ),
			'type'        => 'md-grid',
			'wraps'       => array(),
			'replace'     => sprintf(
								/* translators: %s: form tag type */
								__( '%s shortcodes go here', 'material-design-for-contact-form-7' ),
								'[md-*]'
							),
			'attributes'  => array(
				array(
					'name'     => 'help',
					'label'    => __( 'Help', 'material-design-for-contact-form-7' ),
					'renderer' => 'html',
					'html'     => '<p>Any <code>[md-*]</code> shortcodes that are not direct descendants of <code>[md-form]</code> or <code>[md-card]</code> (E.g. if they are nested inside a <code>&lt;div></code> or another shortcode) need to be wrapped in <code>[md-grid][/md-grid]</code> to be displayed correctly. A single <code>[md-grid][/md-grid]</code> should be the only direct descendant of the <code>&lt;div></code> (or whatever the wrapper is, e.g. a shortcode), and the other elements should be direct descendants of the <code>[md-grid]</code>.</p>'
				)
			)
		);
		$shortcodes['md-grid'] = $md_grid;

		// Finish building state array and return
		$state['shortcodes'] = $shortcodes;
		return $state;
	}
	

	/**
	 * Render a html attribute
	 */
	public static function render_html_field( $field, $index ) {
		?>
		<div class="cf7md-item cf7md-html">
			<label class="cf7md-label cf7md-label--static"><?php echo $field['label']; ?></label>
			<?php echo $field['html']; ?>
		</div>
		<?php
	}


	/**
	 * Render an attribute as a text field
	 */
	public static function render_text_field( $field, $index ) {
		global $cf7md_fs;
		$upgrade_url = $cf7md_fs->get_upgrade_url( 'lifetime' );
		$locked = isset($field['locked']) && $field['locked'];
		$label = 'mdc-floating-label';
		if( $field['default'] !== '' ) {
			$label .= ' mdc-floating-label--float-above';
		}
		$help = isset( $field['help'] ) ? $field['help'] : '';
		$help = $locked ? '<a href="' . $upgrade_url . '">' . __( 'Upgrade to pro', 'material-design-for-contact-form-7' ) . '</a> ' . __( 'to use this feature.', 'material-design-for-contact-form-7' ) : $help;
		$modifiers = '';
		$modifiers .= $locked ? ' mdc-text-field--disabled' : '';
		$modifiers .= isset( $field['icon'] ) ? ' mdc-text-field--with-leading-icon' : '';
		?>
		<div class="cf7md-item">
			<div class="mdc-text-field <?php echo $modifiers; ?>">
				<?php if( isset( $field['icon'] ) ) : ?>
					<i class="material-icons mdc-text-field__icon"><?php echo $field['icon']; ?></i>
				<?php endif; ?>
				<input type="text" id="cf7md-<?php echo esc_attr($field['name']); ?>" class="mdc-text-field__input" <?php echo $locked ? 'disabled' : ''; ?> data-attr-index="<?php echo esc_attr($index); ?>" autocomplete="off" <?php echo (isset($field['required']) && $field['required']) ? 'required' : ''; ?>>
				<label class="<?php echo $label; ?>" for="cf7md-<?php echo esc_attr($field['name']); ?>"><?php echo $field['label']; ?></label>
				<div class="mdc-line-ripple"></div>
			</div>
			<?php if( $help ) : ?>
				<p class="cf7md-help-text"><?php echo $help; ?></p>
			<?php endif; ?>
		</div>
		<?php
	}
	

	/**
	 * Render an attribute as a toggle field
	 */
	public static function render_toggle_field( $field, $index, $id ) {
		?>

		<div class="cf7md-item mdc-layout-grid__cell">
			<label class="cf7md-label cf7md-label--static"><?php echo $field['label']; ?></label>
			<?php foreach( $field['options'] as $value => $label ) : ?>
				<span class="cf7md-switch-item cf">
					<div class="mdc-form-field">
						<div class="mdc-switch <?php echo $value == $field['default'] ? 'mdc-switch--checked' : ''; ?>">
							<div class="mdc-switch__track"></div>
							<div class="mdc-switch__thumb-underlay">
								<div class="mdc-switch__thumb">
									<input type="checkbox" value="<?php echo esc_attr($value); ?>" class="mdc-switch__native-control" id="cf7md-<?php echo $id; ?>" data-attr-index="<?php echo esc_attr($index); ?>" <?php echo $value == $field['default'] ? 'checked' : ''; ?>>
								</div>
							</div>
						</div>	
						<label for="cf7md-<?php echo $id; ?>" class="cf7md-switch-label"><?php echo $label; ?></label>
					</div>
				</span>
			<?php endforeach; ?>
			<?php if( isset( $field['help'] ) ) : ?>
				<p class="cf7md-help-text"><?php echo $field['help']; ?></p>
			<?php endif; ?>
		</div>

		<?php
	}


	/**
	 * Render an attribute as a radio field
	 */
	public static function render_radio_field( $field, $index, $id ) {
		?>

		<div class="cf7md-item mdc-layout-grid__cell">
			<label class="cf7md-label cf7md-label--static"><?php echo $field['label']; ?></label>
			<div class="wpcf7-form-control-wrap cf7md-list cf7md-list__inline">
				<?php foreach( $field['options'] as $value => $label ) : ?>
					<span class="cf7md-radio-item mdc-form-field wpcf7-list-item">
						<div class="mdc-radio">
							<input type="radio" name="<?php echo 'cf7md-' . $id . '-' . esc_attr($field['name']); ?>" value="<?php echo esc_attr($value); ?>" class="mdc-radio__native-control" id="cf7md-<?php echo $id . '-' . esc_attr($value); ?>" data-attr-index="<?php echo esc_attr($index); ?>">
							<div class="mdc-radio__background">
								<div class="mdc-radio__outer-circle"></div>
								<div class="mdc-radio__inner-circle"></div>
							</div>
						</div>
						<label for="cf7md-<?php echo $id . '-' . esc_attr($value); ?>" class="cf7md-radio-label"><?php echo $label; ?></label>
					</span>
				<?php endforeach; ?>
			</div>
			<?php if( isset( $field['help'] ) ) : ?>
				<p class="cf7md-help-text"><?php echo $field['help']; ?></p>
			<?php endif; ?>
		</div>

		<?php
	}


	/**
	 * Renders the display attribute
	 */
	public static function render_display_field( $field, $index, $id ) {
		?>

		<div class="cf7md-item cf7md-display">
			<label class="cf7md-label cf7md-label--static"><?php echo $field['label']; ?></label>
			<div class="cf7md-display-field">
				<?php foreach( $field['options'] as $value => $label ) : ?>
					<div class="cf7md-display-field--option">
						<input type="radio" name="<?php echo 'cf7md-' . $id . '-' . esc_attr($field['name']); ?>" value="<?php echo esc_attr($value); ?>" class="cf7md-display-field--radio" id="cf7md-<?php echo $id . '-' . esc_attr($value); ?>" data-attr-index="<?php echo esc_attr($index); ?>">
						<label for="cf7md-<?php echo $id . '-' . esc_attr($value); ?>" class="cf7md-display-field--label">
							<?php echo '<img src="' . CF7MD_PLUGIN_DIR . 'assets/images/display-' . esc_attr($value) . '.png" alt="' . esc_attr( $label) . '">'; ?>
							<span><?php echo $label; ?></span>
						</label>
					</div>
				<?php endforeach; ?>
			</div>
			<?php if( isset( $field['help'] ) ) : ?>
				<p class="cf7md-help-text"><?php echo $field['help']; ?></p>
			<?php endif; ?>
		</div>

		<?php
	}
	

	/**
	 * Render layout fields
	 */
	public static function render_layout_field( $field, $index ) {
		global $cf7md_fs;
		$upgrade_url = $cf7md_fs->get_upgrade_url( 'lifetime' );
		$locked = isset($field['locked']) && $field['locked'];
		$max = 12;
		$sizename = 'large';
		switch( $field['name'] ) {
			case 'mobilewidth':
				$max = 4;
				$sizename = /* translators: mobile as in cell phone */ __( 'mobile-sized', 'material-design-for-contact-form-7' );
				break;
			case 'tabletwidth':
				$max = 8;
				$sizename = /* translators: tablet as in ipad */ __( 'tablet-sized', 'material-design-for-contact-form-7' );
				break;
			case 'desktopwidth':
			default:
				$max = 12;
				$sizename = __( 'large', 'material-design-for-contact-form-7' );
				break;
		}
		?>

		<?php if( $field['name'] === 'desktopwidth' ) : ?>
			<div class="cf7md-scg--layout-field-group">
				<h4 class="cf7md-scg--field-group-title"><?php _e( 'Layout Attributes', 'material-design-for-contact-form-7' ); ?></h4>
				<p><?php _e( 'Layout attributes let you organize your form fields into columns. You can control how wide each field is on mobile, tablet and large screens.', 'material-design-for-contact-form-7' ); ?></p>
				<div class="cf7md-scg--layout-fields <?php echo $locked ? 'cf7md-scg--layout-fields__locked' : ''; ?>">
					<?php if( $locked ) : ?>
						<div class="cf7md-scg--layout-fields-overlay-content">
							<p><?php _e( 'Layout attributes are a pro feature.', 'material-design-for-contact-form-7' ); ?></p>
							<a class="mdc-button mdc-button--primary mdc-button--raised" data-mdc-auto-init="MDCRipple" href="<?php echo $upgrade_url; ?>"><?php _e( 'Upgrade Now', 'material-design-for-contact-form-7' ); ?></a>
						</div>
					<?php endif; ?>
		<?php endif; ?>

		<div class="cf7md-item cf7md-layout">
			<label class="cf7md-label cf7md-label--static"><?php echo $field['label']; ?></label>
			<div class="cf7md-layout-slider" data-max="<?php echo esc_attr( $max ); ?>"></div>
			<input type="number" style="display: none;" class="cf7md-layout-slider-input" data-attr-index="<?php echo esc_attr($index); ?>">
			<p class="cf7md-help-text">
				<?php printf(
					/* translators: %1$s: "all" or a fraction like "half", %2$s: screen size (mobile, tablet, desktop) */
					__( 'This element will occupy %1$s of the available horizontal space on %2$s screens.', 'material-design-for-contact-form-7' ),
					'<span class="cf7md-layout-slider-value">all</span>',
					$sizename
				); ?>
			</p>
		</div>

		<?php if( $field['name'] === 'mobilewidth' ) : ?>
			</div></div>
		<?php endif; ?>

		<?php
	}
	
}