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

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

{% set section = 'Advanced' %}

<div class='panel panel-default'>
    {{ macros.header('Animation Speeds', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('animation_speed', 'Container', 'input', options, errors, '', '', '', '', 'Specify the speed at which the container slides in.', 's') }}
        {{ macros.row('transition_speed', 'Colours', 'input', options, errors, '', '', '', '', 'Specify the speed at which colours transition from standard to active or hover states.', 's') }}
        {{ macros.row('sub_menu_speed', 'Sub Menus', 'input', options, errors, '', '', '', '', 'Specify the speed at which the sub menus transition.', 's') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Technical', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('shortcode', 'Use Shortcode?', 'checkbox', options, errors, '', '', '', '', 'Please place ' ~ shortcode ~ ' in your files to use. Full documentation can be found <a href="https://responsive.menu/knowledgebase/using-the-shortcode/?utm_source=free-plugin&utm_medium=page&utm_campaign=using-the-shortcode" target="_blank">here</a>') }}
        {{ macros.row('hide_on_mobile', 'Hide on mobile devices', 'checkbox', options, errors, '', 'pro', '', '', 'This will disable the plugin on mobile devices. No HTML, CSS or JavaScript will be output if the user is on a mobile specific device.') }}
        {{ macros.row('hide_on_desktop', 'Hide on desktops', 'checkbox', options, errors, '', 'pro', '', '', 'This will disable the plugin on desktop devices. No HTML, CSS or JavaScript will be output if the user is on a desktop specific device.') }}
        {{ macros.row('show_menu_on_page_load', 'Show Menu on Page Load', 'checkbox', options, errors, '', 'pro', '', '', 'This will mean the menu container will show as opened and the button will be set to active on each page load.') }}
        {{ macros.row('menu_adjust_for_wp_admin_bar', 'Adjust for WP Admin Bar', 'checkbox', options, errors, '', 'pro', '', '', 'If you use the WP Admin bar when logged in, this will bring the various elements down so they are not hidden behind it.') }}
        {{ macros.row('menu_disable_scrolling', 'Disable Background Scrolling', 'checkbox', options, errors, '', 'pro', '', '', 'When the menu is open the background of the page cannot be scrolled.', '', '', 'Please ensure your theme follows WordPress theme development guidelines for this to work. Specifically that the html tag includes the language_attributes() function call.') }}
    </table>
</div>

<div class='panel panel-default fully-pro-container'>
    {{ macros.header('Page Overlay', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('menu_overlay', 'Enable', 'checkbox', options, errors, '', 'pro', '', '', 'When the menu is open the page will have an overlay covering all but the opened menu and button.') }}
        {{ macros.row('menu_overlay_colour', 'Colour', 'colour', options, errors, '', 'pro', '', '', 'Set the colour of the page overlay when enabled.', '', '', 'Works nicely with a slight transparency.') }}
    </table>
</div>

<div class='panel panel-default fully-pro-container'>
    {{ macros.header('Custom CSS', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('custom_css', 'Custom CSS', 'textarea', options, errors, '', 'pro', '', '', 'You can place any Custom CSS you want here. Very useful if you want to make minor tweaks to some margins, paddings or colours or even for whole new layouts or designs.', '', '', 'Accepts any valid CSS rules, including media queries.') }}
    </table>
</div>
