{#
    Responsive Menu Jinja template file.
    Safe to Copy
#}

{% import 'admin/macros.html.twig' as macros %}

{% set section = 'Button' %}

<div class='panel panel-default'>
    {{ macros.header('Animation', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('button_click_animation', 'Type', 'select', options, errors, '', 'semi-pro', 'button_animation', '', 'The plugin comes with many different button animations based on the wonderful work by <a href="https://jonsuh.com" target="_blank">Jon Suh</a>.', '', '', 'To see all animations in action please visit <a href="https://jonsuh.com/hamburgers/" target="_blank">this page</a>.') }}
        {{ macros.row('button_trigger_type', 'Triggers', 'selectize', options, errors, '', 'semi-pro', '', '', 'Specify one or more trigger actions that will set off the button animation and cause the menu container to open.') }}
        {{ macros.row('button_push_with_animation', 'Push Button with Menu', 'checkbox', options, errors, '', '', '', '', 'Force the button to move with the menu container as it opens. Useful if your button is on the same side as your menu container and overlaps when opened.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Location', section, '/basic-setup/button/#animation') }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('button_position_type', 'Positioning', 'select', options, errors, '', '', 'position', '', 'Specify how you want the button to stick to your page.', '', '', 'Using relative positioning is useful when combined with the shortcode.') }}
        {{ macros.row('button_left_or_right', 'Side', 'select', options, errors, '', '', 'left_right', '', 'Specify which side of the page you want the button to be displayed on.', '', '', 'Won\'t work if you have Relative positioning set.') }}
        {{ macros.row('button_distance_from_side', 'Distance from Side', 'input', options, errors, 'has-unit', 'semi-pro', '', 'percentage', 'Specify how far across from the side you want the button to display and it\'s unit.', '', '', 'Won\'t work if you have Relative positioning set.') }}
        {{ macros.row('button_top', 'Distance from Top', 'input', options, errors, 'has-unit', 'semi-pro', '', 'pixel', 'Specify how far from the top you want the button to display and it\'s unit.', '', '', 'Won\'t work if you have Relative positioning set.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Container Sizing', section, '/basic-setup/button/#location') }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('button_height', 'Height', 'input', options, errors, 'has-unit', 'semi-pro', '', 'pixel', 'Set the height of the buttons containing element and it\'s unit.') }}
        {{ macros.row('button_width', 'Width', 'input', options, errors, 'has-unit', 'semi-pro', '', 'pixel', 'Set the width of the buttons containing element and it\'s unit.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Line Sizing', section, '/basic-setup/button/#container-sizing') }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('button_line_height', 'Height', 'input', options, errors, 'has-unit', 'semi-pro', '', 'pixel', 'Set the height of each individual button line and it\'s unit') }}
        {{ macros.row('button_line_width', 'Width', 'input', options, errors, 'has-unit', 'semi-pro', '', 'pixel', 'Set the width of each individual button line and it\'s unit') }}
        {{ macros.row('button_line_margin', 'Margin', 'input', options, errors, 'has-unit', 'semi-pro', '', 'pixel', 'Set the margin between each individual button line and it\'s unit') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Container Background', section, '/basic-setup/button/#line-sizing') }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('button_background_colour', 'Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the background colour of the button container.') }}
        {{ macros.row('button_background_colour_hover', 'Hover Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the hover background colour of the button container.') }}
        {{ macros.row('button_background_colour_active', 'Active Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the active background colour of the button container.') }}
        {{ macros.row('button_transparent_background', 'Transparent Background', 'checkbox', options, errors, '', '', '', '', 'Set the button container to a transparent background.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Line Colours', section, '/basic-setup/button/#line-colours') }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('button_line_colour', 'Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the individual line colour of the button.') }}
        {{ macros.row('button_line_colour_hover', 'Hover Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the individual hover line colour of the button.') }}
        {{ macros.row('button_line_colour_active', 'Active Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the individual active line colour of the button.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Title', section, '/basic-setup/button/#title') }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('button_title', 'Text', 'input', options, errors, '', '', '', '', 'Set the button title text.') }}
        {{ macros.row('button_title_open', 'Active Text', 'input', options, errors, '', '', '', '', 'Set the active button title text.') }}
        {{ macros.row('button_text_colour', 'Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the button title colour.') }}
        {{ macros.row('button_title_position', 'Alignment', 'select', options, errors, '', '', 'side', '', 'Set where the button title should be in respect to the button.') }}
        {{ macros.row('button_font', 'Font', 'input', options, errors, '', '', '', '', 'Set the button title font.') }}
        {{ macros.row('button_font_size', 'Font Size', 'input', options, errors, 'has-unit', 'semi-pro', '', 'pixel', 'Set the button title font size.') }}
        {{ macros.row('button_title_line_height', 'Line Height', 'input', options, errors, 'has-unit', 'semi-pro', '', 'pixel', 'Set the button title line height.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Image', section, '/basic-setup/button/#image') }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('button_image', 'Image', 'image', options, errors, '', '', '', '', 'You can set a button image instead of the default 3 lines if desired.') }}
        {{ macros.row('button_image_alt', 'Alt Text', 'input', options, errors, '', '', '', '', 'Button image alt text.') }}
        {{ macros.row('button_image_when_clicked', 'Active Image', 'image', options, errors, '', '', '', '', 'You can set an active button image instead of the default 3 lines if desired.') }}
        {{ macros.row('button_image_alt_when_clicked', 'Alt Text', 'input', options, errors, '', '', '', '', 'Active button image alt text.') }}
        {{ macros.row('button_font_icon', 'Font Icon', 'font-icon', options, errors, '', 'pro', '', '', 'You can set a font icon instead of the default 3 lines if desired.') }}
        {{ macros.row('button_font_icon_when_clicked', 'Active Font Icon', 'font-icon', options, errors, '', 'pro', '', '', 'You can set an active font icon instead of the default 3 lines if desired.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Advanced', section, '/basic-setup/button/#advanced') }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('button_click_trigger', 'Trigger', 'input', options, errors, '', '', '', '', 'If you don\'t want to use the button that comes with the menu, you can specify your own container trigger here. Any CSS selector is accepted.', '', '', 'For example "#my-custom-trigger"') }}
    </table>
</div>