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

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

{% set section = 'Container' %}

<div class='panel panel-default'>
    {{ macros.header('Ordering', section) }}
    <table class='table table-bordered table-hover'>
        {% include 'admin/sections/modules/container-ordering.html.twig' %}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Sizing', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('menu_width', 'Width', 'input', options, errors, 'has-unit', 'semi-pro', '', 'percentage', 'Set the width of the container once the button has been pressed.') }}
        {{ macros.row('menu_maximum_width', 'Maximum Width', 'input', options, errors, 'has-unit', 'semi-pro', '', 'pixel', 'Set a maximum width on the container, useful if you don\'t want it to be unnecessarily large on wider screens.') }}
        {{ macros.row('menu_minimum_width', 'Minimum Width', 'input', options, errors, 'has-unit', 'semi-pro', '', 'pixel', 'Set a minimum width on the container, useful if it becomes too small on smaller screens.') }}
        {{ macros.row('menu_auto_height', 'Auto Height', 'checkbox', options, errors, 'semi-pro', 'pro', '', '', 'Makes the container height stop at the end of the last container item, rather than spanning the height of the page.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Background', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('menu_background_image', 'Image', 'image', options, errors, '', '', '', '', 'Set a background image which covers the entire container.') }}
        {{ macros.row('menu_container_background_colour', 'Container Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set a background colour for the  container that stretches the full height of the screen.') }}
        {{ macros.row('menu_background_colour', 'Inner Container Colour', 'colour', options, errors, '', 'semi-pro', '', '','Set a background colour for the inner container that contains the menu, title, additional HTML, search etc.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Title Text', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('menu_title_font_size', 'Font Size', 'input', options, errors, 'has-unit', 'semi-pro', '', 'pixel', 'Specify a font size for the title') }}
        {{ macros.row('menu_title', 'Text', 'input', options, errors, '', '', '', '', 'Set the title text to appear for the title section.') }}
        {{ macros.row('menu_title_alignment', 'Text Alignment', 'select', options, errors, '', '', 'alignment', '', 'Set the alignment of the text for the title.') }}
        {{ macros.row('menu_title_link', 'Link', 'input', options, errors, '', '', '', '', 'Specify a link for the title text to navigate to when clicked.') }}
        {{ macros.row('menu_title_link_location', 'Link Target', 'select', options, errors, '', '', 'link_locations', '', 'Determine how the title link opens when clicked on.', '', '', 'You can specify for it to open in the same page, on a new tab or in a completely separate window.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Title Colours', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('menu_title_background_colour', 'Background', 'colour', options, errors, '', 'semi-pro', '', '', 'You can specify a separate background colour for the title section if you wish.') }}
        {{ macros.row('menu_title_background_hover_colour', 'Background Hover', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the title section background colour when the mouse is rolled over it.') }}
        {{ macros.row('menu_title_colour', 'Text', 'colour', options, errors, '', 'semi-pro', '', '', 'You can specify a separate text colour for the title section if you wish.') }}
        {{ macros.row('menu_title_hover_colour', 'Text Hover', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the title section text colour when the mouse is rolled over it.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Title Image', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('menu_title_image', 'Image', 'image', options, errors, '', '', '', '', 'Specify an image to show alongside the title.') }}
        {{ macros.row('menu_title_image_height', 'Height', 'input', options, errors, 'has-unit', '', '', 'pixel', 'Set a height for the title image.') }}
        {{ macros.row('menu_title_image_width', 'Width', 'input', options, errors, 'has-unit', '', '', 'percentage', 'Set a width for the title image.') }}
        {{ macros.row('menu_title_image_alt', 'Alt Text', 'input', options, errors, '', '', '', '', 'Specify the alt text used with the title image if selected.') }}
        {{ macros.row('menu_title_font_icon', 'Font Icon', 'font-icon', options, errors, '', 'pro', '', '', 'Specify a font icon to go alongside the title.', '', '', 'This will overwrite the image option above.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Additional Content', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('menu_additional_content', 'Content', 'textarea', options, errors, '', '', '', '', 'This section allows you to put any custom HTML, shortcodes, text or anything you like to supplement the other container items.<br /><br />It\'s particularly useful if you have social media icons, shopping cart information or anything else custom to your site.', '', '', 'HTML and shortcodes can be used here.') }}
        {{ macros.row('menu_additional_content_colour', 'Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'You can set the text colour of the additional content here if you desire.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Animation', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('menu_appear_from', 'Appear From', 'select', options, errors, '', '', 'side', '', 'This determines which side of the screen the container appears from.') }}
        {{ macros.row('animation_type', 'Type', 'select', options, errors, '', 'semi-pro', 'animation', '', 'You can choose the type of animation used for showing the container. Currently there are 3 options:<ul><li><strong>Slide</strong> - Slides the container in from the location specified above.</li><li><strong>Push</strong> - Used if you want to push your page across when the container slides in.</li><li><strong>Fade</strong> - Used if you want to fade the container in on the page rather than sliding in.</li></ul>') }}
        {{ macros.row('page_wrapper', 'Push Wrapper', 'input', options, errors, '', '', 'animation', '', 'The CSS selector(s) of your page that you want pushed when using the push animation above.', '', '', 'For example #page-wrapper, #wrapper') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Search', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('menu_search_box_text_colour', 'Text Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the text colour of the search text that a user types in.') }}
        {{ macros.row('menu_search_box_border_colour', 'Border Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the border colour for the search box.') }}
        {{ macros.row('menu_search_box_background_colour', 'Background Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the background colour for the search box.') }}
        {{ macros.row('menu_search_box_text', 'Placeholder Text', 'input', options, errors, '', 'pro', '', '', 'This is the text that shows up in the search box when empty or before someone starts typing as a hint.', '', '', 'For example "Type to search for products..."') }}
        {{ macros.row('menu_search_box_placeholder_colour', 'Placeholder Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the colour of the placeholder text.', '', '', 'This won\'t work in many older browsers.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Technical', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('menu_close_on_body_click', 'Close on Page Clicks', 'checkbox', options, errors, '', '', '', '', 'Set this if you want the container to close whenever you click or tap on the page.') }}
        {{ macros.row('menu_close_on_link_click', 'Close on Link Clicks', 'checkbox', options, errors, '', '', '', '', 'Set this if you want the container to close whenever you click or tap on any of the menu link items.', '', '', 'Useful on one page sites where the page doesn\'t reload.') }}
        {{ macros.row('menu_close_on_scroll', 'Close on Page Scroll', 'checkbox', options, errors, '', 'pro', '', '', 'Set this if you want the container to close whenever you scroll the page.') }}
        {{ macros.row('enable_touch_gestures', 'Enable Touch Gestures', 'checkbox', options, errors, '', 'pro', '', '', 'This will enable you to drag or swipe to close the container on touch devices.') }}
    </table>
</div>

<div class='panel panel-default fully-pro-container'>
    {{ macros.header('Keyboard Shortcuts', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('keyboard_shortcut_close_menu', 'Close', 'selectize', options, errors, 'keyboard-shortcuts', 'pro', '', '', 'Select some keyboard shortcuts that will close the container when pressed.') }}
        {{ macros.row('keyboard_shortcut_open_menu', 'Open', 'selectize', options, errors, 'keyboard-shortcuts', 'pro', '', '', 'Select some keyboard shortcuts that will open the container when pressed.') }}
    </table>
</div>