{block name=xgx_bare_tabcontent_header}
<div role="tabpanel" class="tab-pane fade" id="template-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                {block name=header_store_logo}
                <div class="option">
                    <div class="form-group">
                        <label for="store-logo">{txt key=TEXT_XGX_BARE_STORE_LOGO}</label>
                        <p class="help-block">{txt key=TEXT_XGX_BARE_STORE_LOGO_BODY}</p>
                        <div class="file-upload">
                            <input id="store-logo-dest" name="files[header_store_logo][dest]" type="hidden" value="properties">
                            <input id="store-logo-dir" name="files[header_store_logo][dir]" type="hidden" value="media/logo/">
                            {if !$smarty.const.HEADER_STORE_LOGO}
                            <input id="store-logo" name="header_store_logo" type="file">
                            {else}
                            <div class="uploaded">
                                <div class="input-group">
                                    <input class="form-control" name="properties[header_store_logo]" type="text" value="" placeholder="{$smarty.const.HEADER_STORE_LOGO}" disabled>
                                    <span class="input-group-btn">
                                        <button class="btn btn-danger js-remove-image" type="button"> {txt key=BUTTON_DELETE}</button>
                                    </span>
                                </div>
                            </div>
                            {/if}
                        </div>
                    </div>
                </div>
                {/block}

                {block name=startpage_header}

                {block name=startpage_header_subtitle}
                <div class="subtitel-header">{txt key=TEXT_XGX_BARE_START_PAGE_SEPARATOR}</div>
                {/block}

                {block name=header_store_logo_height}
                <div class="option">
                    <div class="form-group">
                        <label for="header-store-logo-height">{txt key=TEXT_XGX_BARE_STORE_LOGO_HEIGHT}</label>
                        <p class="help-block">{txt key=TEXT_XGX_BARE_STORE_LOGO_HEIGHT_BODY}</p>
                        <div class="form-group">
                            <div class="input-group">
                                <input id="header-store-logo-height" name="less[header_store_logo_height]" pattern="^[0-9]+(px|%|vh|vw|em)$" type="text" class="form-control" value="{$smarty.const.HEADER_STORE_LOGO_HEIGHT}">
                                <div class="input-group-addon">Pixelwert / Höhe</div>
                            </div>
                        </div>
                    </div>
                </div>
                {/block}

                {block name=header_store_logo_spacing}
                <div class="option">
                    <div class="form-group">
                        <label>{txt key=TEXT_XGX_BARE_STORE_LOGO_SPACING}</label>
                        <p class="help-block">{txt key=TEXT_XGX_BARE_STORE_LOGO_SPACING_BODY}</p>
                        <div class="form-group">
                            <div class="input-group">
                                <input id="header-store-logo-spacing-top" name="less[header_store_logo_spacing_top]" pattern="^[0-9]+(px|%|vh|vw|em)$" type="text" class="form-control" value="{$smarty.const.HEADER_STORE_LOGO_SPACING_TOP}">
                                <div class="input-group-addon">Pixel Abstand nach oben</div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <input id="header-store-logo-spacing-bottom" name="less[header_store_logo_spacing_bottom]" pattern="^[0-9]+(px|%|vh|vw|em)$" type="text" class="form-control" value="{$smarty.const.HEADER_STORE_LOGO_SPACING_BOTTOM}">
                                <div class="input-group-addon">Pixel Abstand nach unten</div>
                            </div>
                        </div>
                    </div>
                </div>
                {/block}

                {block name=header_background}
                <div class="option">
                    <div class="form-group">
                        <label for="header-background">{txt key=TEXT_XGX_BARE_BACKGROUND}</label>
                        <p class="help-block">{txt key=TEXT_XGX_BARE_BACKGROUND_BODY}</p>
                        <select id="header-background" name="properties[header_background]" class="selectpicker js-reset-color" data-relation="true" data-style="btn-default" style="display: none;" tabindex="-98">
                            {foreach $background_options as $option}
                            <option value="{$option.id}" data-related="#background-{$option.id}" {if $smarty.const.HEADER_BACKGROUND eq $option.id}selected{/if}>{$option.name}</option>
                            {/foreach}
                        </select>
                    </div>
                    <div class="option option-sub {if $smarty.const.HEADER_BACKGROUND eq 'image'}open{/if}" id="background-image">
                        <div class="form-group">
                            <label for="header-background-image">{txt key=TEXT_XGX_BARE_BACKGROUND_IMAGE}</label>
                            <p class="help-block">{txt key=TEXT_XGX_BARE_BACKGROUND_IMAGE_BODY}</p>
                            <div class="file-upload">
                                <input id="header-background-image-dest" name="files[header_background_image][dest]" type="hidden" value="properties">
                                <input id="header-background-image-dir" name="files[header_background_image][dir]" type="hidden" value="media/images/background/">
                                <input id="header-background-image-class" name="files[header_background_image][class]" type="hidden" value="default">
                                {if !$smarty.const.HEADER_BACKGROUND_IMAGE}
                                <input id="header-background-image" name="header_background_image" type="file" >
                                {else}
                                <div class="uploaded">
                                    <div class="input-group">
                                        {*<input class="form-control" name="special_properties[properties][unlink_file][header_background_image]" type="text" value="{$smarty.const.HEADER_BACKGROUND_IMAGE}" disabled>*}
                                        <input class="form-control" name="properties[header_background_image]" type="text" value="" placeholder="{$smarty.const.HEADER_BACKGROUND_IMAGE}" disabled>
                                        <span class="input-group-btn">
                                            <button class="btn btn-danger js-remove-image" type="button"> {txt key=BUTTON_DELETE}</button>
                                        </span>
                                    </div>
                                </div>
                                {/if}
                            </div>
                        </div>
                    </div>
                    <div class="option option-sub {if $smarty.const.HEADER_BACKGROUND eq 'color'}open{/if}" id="background-color">
                        <div class="form-group">
                            <label for="header-background-color">{txt key=TEXT_XGX_BARE_BACKGROUND_COLOR}</label>
                            <p class="help-block">{txt key=TEXT_XGX_BARE_BACKGROUND_COLOR_BODY}</p>
                            <div class="input-group colorpicker-component colorpicker-element">
                                <input id="header-background-color" name="less[header_background_color]" type="text" value="{$smarty.const.HEADER_BACKGROUND_COLOR}" data-color="#ffffff" class="form-control">
                                <span class="input-group-addon"><i></i></span>
                            </div>
                        </div>
                    </div>
                </div>
                {/block}

                {/block}

                {block name=subpage_header}

                {block name=subpage_header_subtitle}
                <div class="subtitel-header">{txt key=TEXT_XGX_BARE_SUB_PAGE_SEPARATOR}</div>
                {/block}

                {block name=sub_header_store_logo_height}
                <div class="option">
                    <div class="form-group">
                        <label for="sub-header-store-logo-height">{txt key=TEXT_XGX_BARE_STORE_LOGO_HEIGHT}</label>
                        <p class="help-block">{txt key=TEXT_XGX_BARE_STORE_LOGO_HEIGHT_BODY}</p>
                        <div class="form-group">
                            <div class="input-group">
                                <input id="sub-header-store-logo-height" name="less[sub_header_store_logo_height]" pattern="^[0-9]+(px|%|vh|vw|em)$" type="text" class="form-control" value="{$smarty.const.SUB_HEADER_STORE_LOGO_HEIGHT}">
                                <div class="input-group-addon">Pixelwert / Höhe</div>
                            </div>
                        </div>
                    </div>
                </div>
                {/block}

                {block name=sub_header_store_logo_spacing}
                <div class="option">
                    <div class="form-group">
                        <label>{txt key=TEXT_XGX_BARE_STORE_LOGO_SPACING}</label>
                        <p class="help-block">{txt key=TEXT_XGX_BARE_STORE_LOGO_SPACING_BODY}</p>
                        <div class="form-group">
                            <div class="input-group">
                                <input id="sub-header-store-logo-spacing-top" name="less[sub_header_store_logo_spacing_top]" pattern="^[0-9]+(px|%|vh|vw|em)$" type="text" class="form-control" value="{$smarty.const.SUB_HEADER_STORE_LOGO_SPACING_TOP}">
                                <div class="input-group-addon">Pixel Abstand nach oben</div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <input id="sub-header-store-logo-spacing-bottom" name="less[sub_header_store_logo_spacing_bottom]" pattern="^[0-9]+(px|%|vh|vw|em)$" type="text" class="form-control" value="{$smarty.const.SUB_HEADER_STORE_LOGO_SPACING_BOTTOM}">
                                <div class="input-group-addon">Pixel Abstand nach unten</div>
                            </div>
                        </div>
                    </div>
                </div>
                {/block}

                {block name=sub_header_background}
                <div class="option">
                    <div class="form-group">
                        <label for="sub-header-background">{txt key=TEXT_XGX_BARE_BACKGROUND}</label>
                        <p class="help-block">{txt key=TEXT_XGX_BARE_BACKGROUND_BODY}</p>
                        <select id="sub-header-background" name="properties[sub_header_background]" class="selectpicker" data-relation="true" data-style="btn-default" style="display: none;" tabindex="-98">
                            {foreach $background_options as $option}
                            <option value="{$option.id}" data-related="#sub-background-{$option.id}" {if $smarty.const.SUB_HEADER_BACKGROUND eq $option.id}selected{/if}>{$option.name}</option>
                            {/foreach}
                        </select>
                    </div>
                    <div class="option option-sub {if $smarty.const.SUB_HEADER_BACKGROUND eq 'image'}open{/if}" id="sub-background-image">
                        <div class="form-group">
                            <label for="sub-header-background-image">{txt key=TEXT_XGX_BARE_BACKGROUND_IMAGE}</label>
                            <p class="help-block">{txt key=TEXT_XGX_BARE_BACKGROUND_IMAGE_BODY}</p>
                            <div class="file-upload">
                                <input id="sub-header-background-image-dest" name="files[sub_header_background_image][dest]" type="hidden" value="properties">
                                <input id="sub-header-background-image-dir" name="files[sub_header_background_image][dir]" type="hidden" value="media/images/background/">
                                <input id="sub-header-background-image-class" name="files[sub_header_background_image][class]" type="hidden" value="default">
                                {if !$smarty.const.SUB_HEADER_BACKGROUND_IMAGE}
                                <input id="sub-header-background-image" name="sub_header_background_image" type="file" >
                                {else}
                                <div class="uploaded">
                                    <div class="input-group">
                                        {*<input class="form-control" name="special_properties[properties][unlink_file][sub_header_background_image]" type="text" value="{$smarty.const.SUB_HEADER_BACKGROUND_IMAGE}" disabled>*}
                                        <input class="form-control" name="properties[sub_header_background_image]" type="text" value="" placeholder="{$smarty.const.SUB_HEADER_BACKGROUND_IMAGE}" disabled>
                                        <span class="input-group-btn">
                                            <button class="btn btn-danger js-remove-image" type="button"> {txt key=BUTTON_DELETE}</button>
                                        </span>
                                    </div>
                                </div>
                                {/if}
                            </div>
                        </div>
                    </div>
                    <div class="option option-sub {if $smarty.const.SUB_HEADER_BACKGROUND eq 'color'}open{/if}" id="sub-background-color">
                        <div class="form-group">
                            <label for="sub-header-background-color">{txt key=TEXT_XGX_BARE_BACKGROUND_COLOR}</label>
                            <p class="help-block">{txt key=TEXT_XGX_BARE_BACKGROUND_COLOR_BODY}</p>
                            <div class="input-group colorpicker-component colorpicker-element">
                                <input id="sub-header-background-color" name="less[sub_header_background_color]" type="text" value="{$smarty.const.SUB_HEADER_BACKGROUND_COLOR}" class="form-control">
                                <span class="input-group-addon"><i></i></span>
                            </div>
                        </div>
                    </div>
                </div>
                {/block}

                {/block}
            </div>
        </div>
    </div>
</div>
{/block}