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

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

{% set section = 'Menu' %}

<div class='panel panel-default fully-pro-container'>
    {{ macros.header('Font Icons', section) }}
    <table class='table table-bordered table-hover'>
        {% include 'admin/sections/modules/font-icons.html.twig' %}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Depth', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('menu_depth', 'Depth', 'select', options, errors, '', '', 'depth', '', 'This determines how many levels deep your menu will go.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Styling', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('menu_font', 'Font', 'input', options, errors, '', '', '', '', 'Set the font for the menu items. The font must already be installed as part of your theme or a browser inbuilt one.', '', '', 'For example "Open Sans"') }}
        {{ macros.row('menu_font_size', 'Font Size', 'input', options, errors, 'has-unit', 'semi-pro', '', 'pixel', 'Set the text size of the menu items and it\'s unit.') }}
        {{ macros.row('menu_links_height', 'Item Height', 'input', options, errors, 'has-unit', 'semi-pro', '', 'pixel', 'Set the height of each menu item and it\'s unit.') }}
        {{ macros.row('menu_links_line_height', 'Line Height', 'input', options, errors, 'has-unit', 'semi-pro', '', 'pixel', 'Set the line height of each menu item and it\'s unit.') }}
        {{ macros.row('menu_text_alignment', 'Text Alignment', 'select', options, errors, '', '', 'alignment', '', 'Set the alignment of the text for the menu items.') }}
        {{ macros.row('menu_word_wrap', 'Word Wrap', 'checkbox', options, errors, '', '', '', '', 'Allow the menu items to wrap around to the next line.', '', '', 'Useful if you have particularly long menu item titles.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Item Borders', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('menu_border_width', 'Width', 'input', options, errors, 'has-unit', 'semi-pro', '', 'pixel', 'Set the border size for each menu link and it\'s unit.') }}
        {{ macros.row('menu_item_border_colour', 'Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the border colour for each of the menu items.') }}
        {{ macros.row('menu_item_border_colour_hover', 'Hover Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the border colour when the mouse rolls over each menu item.') }}
        {{ macros.row('menu_current_item_border_colour', 'Current Item Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the border colour for the current menu item.') }}
        {{ macros.row('menu_current_item_border_hover_colour', 'Current Item Hover Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the border colour when the mouse rolls over the current menu item.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Item Text', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('menu_link_colour', 'Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the text colour for each of the menu items.') }}
        {{ macros.row('menu_link_hover_colour', 'Hover Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the text colour when the mouse rolls over each menu item.') }}
        {{ macros.row('menu_current_link_colour', 'Current Item Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the text colour for the current menu item.') }}
        {{ macros.row('menu_current_link_hover_colour', 'Current Item Hover Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the text colour when the mouse rolls over the current menu item.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Item Background', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('menu_item_background_colour', 'Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the background colour for each of the menu items.') }}
        {{ macros.row('menu_item_background_hover_colour', 'Hover Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the background colour when the mouse rolls over each menu item.') }}
        {{ macros.row('menu_current_item_background_colour', 'Current Item Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the background colour for the current menu item.') }}
        {{ macros.row('menu_current_item_background_hover_colour', 'Current Item Hover Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the background colour when the mouse rolls over the current menu item.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Trigger Icon', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('arrow_position', 'Position', 'select', options, errors, '', '', 'left_right', '', 'Set the side of the menu item that the sub menu trigger will appear.') }}
        {{ macros.row('active_arrow_shape', 'Active Shape', 'input', options, errors, '', '', '', '', 'Set the trigger shape you want to use for the active state. A selection of shapes can be found <a href="https://responsive.menu/html-geometric-shapes/?utm_source=pro-plugin&utm_medium=page&utm_campaign=geo-shapes" target="_blank">here</a>.') }}
        {{ macros.row('inactive_arrow_shape', 'Inactive Shape', 'input', options, errors, '', '', '', '', 'Set the trigger shape you want to use for the inactive state. A selection of shapes can be found <a href="https://responsive.menu/html-geometric-shapes/?utm_source=pro-plugin&utm_medium=page&utm_campaign=geo-shapes" target="_blank">here</a>.') }}
        {{ macros.row('active_arrow_image', 'Active Image', 'image', options, errors, '', '', '', '', 'You can set an image for your active sub menu trigger instead if you would like. This will take precedence over the shape option above.') }}
        {{ macros.row('active_arrow_image_alt', 'Alt Text', 'input', options, errors, '', '', '', '', 'If you use an image as your active sub menu trigger, you can set it\'s alt text here.') }}
        {{ macros.row('inactive_arrow_image', 'Inactive Image', 'image', options, errors, '', '', '', '', 'You can set an image for your inactive sub menu trigger instead if you would like. This will take precedence over the shape option above.') }}
        {{ macros.row('inactive_arrow_image_alt', 'Alt Text', 'input', options, errors, '', '', '', '', 'If you use an image as your inactive sub menu trigger, you can set it\'s alt text here.') }}
        {{ macros.row('active_arrow_font_icon', 'Active Font Icon', 'font-icon', options, errors, '', 'pro', '', '', 'You can set an icon as your active sub menu trigger instead if you would like. This will take precedence over the image option above.') }}
        {{ macros.row('inactive_arrow_font_icon', 'Inactive Font Icon', 'font-icon', options, errors, '', 'pro', '', '', 'You can set an icon as your inactive sub menu trigger instead if you would like. This will take precedence over the image option above.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Trigger Sizing', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('submenu_arrow_height', 'Height', 'input', options, errors, 'has-unit', 'semi-pro', '', 'pixel', 'Set the height of the menu trigger items and their units.') }}
        {{ macros.row('submenu_arrow_width', 'Width', 'input', options, errors, 'has-unit', 'semi-pro', '', 'pixel', 'Set the width of the menu trigger items and their units.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Trigger Colours', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('menu_sub_arrow_shape_colour', 'Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the colour of the sub menu trigger.') }}
        {{ macros.row('menu_sub_arrow_shape_hover_colour', 'Hover Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the hover colour of the sub menu trigger.') }}
        {{ macros.row('menu_sub_arrow_shape_colour_active', 'Active Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the colour of the sub menu trigger when active.') }}
        {{ macros.row('menu_sub_arrow_shape_hover_colour_active', 'Active Hover Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the hover colour of the sub menu trigger when active.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Trigger Background', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('menu_sub_arrow_background_colour', 'Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the background colour of the sub menu trigger.') }}
        {{ macros.row('menu_sub_arrow_background_hover_colour', 'Hover Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the hover background colour of the sub menu trigger.') }}
        {{ macros.row('menu_sub_arrow_background_colour_active', 'Active Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the background colour of the sub menu trigger when active.') }}
        {{ macros.row('menu_sub_arrow_background_hover_colour_active', 'Active Hover Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the hover background colour of the sub menu trigger when active.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Trigger Border', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('menu_sub_arrow_border_colour', 'Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the border colour of the sub menu trigger.') }}
        {{ macros.row('menu_sub_arrow_border_hover_colour', 'Hover Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the hover border colour of the sub menu trigger.') }}
        {{ macros.row('menu_sub_arrow_border_colour_active', 'Active Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the border colour of the sub menu trigger when active.') }}
        {{ macros.row('menu_sub_arrow_border_hover_colour_active', 'Active Hover Colour', 'colour', options, errors, '', 'semi-pro', '', '', 'Set the hover border colour of the sub menu trigger when active.') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Descriptions', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('submenu_descriptions_on', 'Enabled', 'checkbox', options, errors, '', '', '', '', 'If you have set descriptions for your menu items, you can turn them on here.') }}
    </table>
</div>

<div class='panel panel-default fully-pro-container'>
    {{ macros.header('Fade Items In', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('fade_submenus', 'Enabled', 'checkbox', options, errors, '', 'pro', '', '', 'When enabled this makes the indidvidual menu items fade in when the button is clicked rather than simply appearing all at once.') }}
        {{ macros.row('fade_submenus_side', 'Side', 'select', options, errors, '', 'pro', 'left_right', '', 'You can specify which side the items fade in from.') }}
        {{ macros.row('fade_submenus_delay', 'Delay', 'input', options, errors, '', 'pro', '', '', 'Set the delay between each items fade finishing and the next one starting.', 'ms') }}
        {{ macros.row('fade_submenus_speed', 'Speed', 'input', options, errors, '', 'pro', '', '', 'Set the speed at which the menu items fade in.', 'ms') }}
    </table>
</div>

<div class='panel panel-default fully-pro-container'>
    {{ macros.header('Animations', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('smooth_scroll_on', 'Smooth Scroll Enabled', 'checkbox', options, errors, '', 'pro', '', '', 'When enabled this makes any same page links smooth scroll to their destination.') }}
        {{ macros.row('smooth_scroll_speed', 'Smooth Scroll Speed', 'input', options, errors, '', 'pro', '', '', 'Set the speed at which same page links will scroll.', 'ms') }}
    </table>
</div>

<div class='panel panel-default'>
    {{ macros.header('Advanced', section) }}
    <table class='table table-bordered table-hover'>
        {{ macros.row('theme_location_menu', 'Theme Location Menu', 'select', options, errors, '', '', 'custom', '', 'If you want to use a theme location menu rather than a specific menu then you can select that here.', '', location_menus(), 'Please note that this will overwrite the <a class="scroll-to-option" href="#responsive-menu-menu-to-use">Menu to Use</a> option.') }}
        {{ macros.row('custom_walker', 'Custom Walker', 'input', options, errors, '', '', '', '', 'Set your own Walker class for customising the links HTML output.', '', '', 'Warning: For extremely advanced use only') }}
    </table>
</div>
