{% import 'fields/_macros.html' as form %}

{%- set share_themes = [
		{ value: 'flat', label: 'SHARE_THEME_FLAT' },
		{ value: 'classic', label: 'SHARE_THEME_CLASSIC' },
		{ value: 'minima', label: 'SHARE_THEME_MINI' },
		{ value: 'plain', label: 'SHARE_THEME_PLAIN' },
	] -%}
<dl>
    <dt><label for="{{ field.FIELD_NAME ~ '-theme' }}">{{ lang('SHARE_THEME') ~ lang('COLON') }}</label></dt>
    <dd>
        {{ form.dropdown(field.FIELD_NAME ~ '-theme', 'field_props[' ~ field.FIELD_NAME ~ '][theme]', field.FIELD_PROPS.theme, share_themes) }}
    </dd>
</dl>
<dl>
    <dt><label for="{{ field.FIELD_NAME ~ '-sharein' }}">{{ lang('SHARE_STRATEGY') ~ lang('COLON') }}</label></dt>
    <dd>
        {{ form.pickem(field.FIELD_NAME ~ '-sharein', 'field_props[' ~ field.FIELD_NAME ~ '][sharein]', 'blank', (field.FIELD_PROPS.sharein === 'blank'), 'radio', 'SHARE_STRATEGY_BLANK') }}
        {{ form.pickem(field.FIELD_NAME ~ '-sharein', 'field_props[' ~ field.FIELD_NAME ~ '][sharein]', 'popup', (field.FIELD_PROPS.sharein === 'popup'), 'radio', 'SHARE_STRATEGY_POPUP') }}
        {{ form.pickem(field.FIELD_NAME ~ '-sharein', 'field_props[' ~ field.FIELD_NAME ~ '][sharein]', 'self', (field.FIELD_PROPS.sharein === 'self'), 'radio', 'SHARE_STRATEGY_SELF') }}
    </dd>
</dl>
<dl>
    <dt><label for="{{ field.FIELD_NAME ~ '-show-count' }}">{{ lang('SHARE_SHOW_COUNT') ~ lang('COLON') }}</label></dt>
    <dd>
        {{ form.pickem(field.FIELD_NAME ~ '-show-count', 'field_props[' ~ field.FIELD_NAME ~ '][show_count]', 'false', field.FIELD_PROPS.show_count === 'false', 'radio', 'NO') }}
        {{ form.pickem(field.FIELD_NAME ~ '-show-count', 'field_props[' ~ field.FIELD_NAME ~ '][show_count]', 'true', field.FIELD_PROPS.show_count === 'true', 'radio', 'SHARE_SHOW_COUNT_OUTSIDE') }}
        {{ form.pickem(field.FIELD_NAME ~ '-show-count', 'field_props[' ~ field.FIELD_NAME ~ '][show_count]', 'inside', field.FIELD_PROPS.show_count === 'inside', 'radio', 'SHARE_SHOW_COUNT_INSIDE') }}
    </dd>
</dl>
<dl>
    <dt><label for="{{ field.FIELD_NAME ~ '-show-label' }}">{{ lang('SHARE_SHOW_LABEL') ~ lang('COLON') }}</label></dt>
    <dd>
        {{ form.pickem(field.FIELD_NAME ~ '-show-label', 'field_props[' ~ field.FIELD_NAME ~ '][show_label]', 'true', field.FIELD_PROPS.show_label, 'radio', 'YES') }}
        {{ form.pickem(field.FIELD_NAME ~ '-show-label', 'field_props[' ~ field.FIELD_NAME ~ '][show_label]', 'false', field.FIELD_PROPS.show_label, 'radio', 'NO') }}
    </dd>
</dl>
<dl>
    <dt><label for="{{ field.FIELD_NAME ~ '-placement' }}">{{ lang('SHARE_PLACEMENT') ~ lang('COLON') }}</label></dt>
    <dd>
        {{ form.pickem(field.FIELD_NAME ~ '-placement', 'field_props[' ~ field.FIELD_NAME ~ '][placement]', '', !field.FIELD_PROPS.placement, 'radio', 'SHARE_PLACEMENT_DEFAULT') }}
        {{ form.pickem(field.FIELD_NAME ~ '-placement', 'field_props[' ~ field.FIELD_NAME ~ '][placement]', 'share-left', field.FIELD_PROPS.placement === 'share-left', 'radio', 'SHARE_PLACEMENT_LEFT') }}
        {{ form.pickem(field.FIELD_NAME ~ '-placement', 'field_props[' ~ field.FIELD_NAME ~ '][placement]', 'share-center', field.FIELD_PROPS.placement === 'share-center', 'radio', 'SHARE_PLACEMENT_CENTER') }}
        {{ form.pickem(field.FIELD_NAME ~ '-placement', 'field_props[' ~ field.FIELD_NAME ~ '][placement]', 'share-right', field.FIELD_PROPS.placement === 'share-right', 'radio', 'SHARE_PLACEMENT_RIGHT') }}
    </dd>
</dl>
<dl>
    <dt><label for="{{ field.FIELD_NAME ~ '-corners' }}">{{ lang('SHARE_CORNERS') ~ lang('COLON') }}</label></dt>
    <dd>
        {{ form.pickem(field.FIELD_NAME ~ '-corners', 'field_props[' ~ field.FIELD_NAME ~ '][corners]', '', !field.FIELD_PROPS.corners, 'radio', 'SHARE_CORNERS_SQUARE') }}
        {{ form.pickem(field.FIELD_NAME ~ '-corners', 'field_props[' ~ field.FIELD_NAME ~ '][corners]', 'share-rounded', field.FIELD_PROPS.corners, 'radio', 'SHARE_CORNERS_ROUND') }}
    </dd>
</dl>
<dl>
    <dt><label for="{{ field.FIELD_NAME ~ '-size' }}">{{ lang('SHARE_SIZE') ~ lang('COLON') }}</label></dt>
    <dd>
        {{ form.input(field.FIELD_NAME ~ '-size', 'field_props[' ~ field.FIELD_NAME ~ '][size]', field.FIELD_PROPS.size, 'number', 5, '', 8) }}
    </dd>
</dl>
<dl>
    <dt><label for="{{ field.FIELD_NAME ~ '-shares' }}">{{ lang('SHARE_SITES') ~ lang('COLON') }}</label></dt>
    <dd>
        <div id="{{ field.FIELD_NAME }}-options-container" class="field-options-list">
            {%- set sites = {
				'twitter': 'Twitter',
				'facebook': 'Facebook',
				'googleplus': 'Google+',
				'linkedin': 'LinkedIn',
				'pinterest': 'Pinterest',
				'email': 'Email',
				'stumbleupon': 'StumbleUpon',
				'whatsapp': 'WhatsApp',
				'telegram': 'Telegram',
				'line': 'LINE',
				'viber': 'Viber',
				'pocket': 'Pocket',
				'messenger': 'Messenger',
				'vkontakte': 'VK',
			} -%}
            {% for option in field.FIELD_PROPS.options if sites[option] %}
            <div class="row2 field-option">
                <i class="fa fa-bars" aria-hidden="true"></i>
                {{ form.pickem(field.FIELD_NAME ~ '-shares-default' ~ loop.index, 'field_defaults[' ~ field.FIELD_NAME ~ '][]', option, (option in field.FIELD_PROPS.defaults), 'checkbox', sites[option]) }}
                {{ form.input(field.FIELD_NAME ~ '-shares-option' ~ loop.index, 'field_options[' ~ field.FIELD_NAME ~ '][]', option, 'hidden') }}
            </div>
            {% endfor %}
        </div>
    </dd>
</dl>