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

<tr class='pro-row{% if errors.menu_font_icons %} danger{% endif %}'>
    <td class='col-left col-md-3'>
        <label for='items_order' class='control-label'>Font Icons</label>
        <div class='sub-text'>
            Responsive Menu gives you the opportunity to use a selection of brilliant font icon packages or to
            create your own custom ones. Currently we support the following:
            <ul>
                <li><a href='http://fontawesome.io/icons/' target='_blank'>Font Awesome</a></li>
                <li><a href='http://getbootstrap.com/components/#glyphicons' target='_blank'>GlyphIcons</a></li>
                <li>Custom HTML</li>
            </ul>
            For a guide on implementing icons in your menu and for more info please visit our dedicated doc page
            <a href='https://responsive.menu/knowledgebase/using-font-icons/?utm_source=pro-plugin&utm_medium=page&utm_campaign=font-icons-knowledgebase' target='_blank'>here</a>.
        </div>
    </td>
    <td class='col-right pro'>
        <table id='font-icon-container'>
            <tr>
                <td style="width: 400px;">Menu Item</td>
                <td style="width: 200px;">Icon</td>
                <td style="width: 250px;">Type</td>
                <td></td>
            </tr>
            {% set icons = options.menu_font_icons|json_decode %}
            {% if icons is iterable %}
                {% set icon_list = font_icons(icons) %}
                {% for icon in icon_list %}
                    {% if icon.type %}
                        <tr>
                            <td>
                                <select class='selectpicker show-tick' name='menu[menu_font_icons][id][]'>
                                    <option value="">Select Menu Item</option>
                                    {% for item in menu_items(options) %}
                                        <option value='{{ item.ID }}' {% if icon.id == item.ID %}selected='selected'{% endif %}>{{ item.title }}</option>
                                    {% endfor %}
                                </select>
                            </td>
                            <td>
                                <input type='text' class='form-control' value='{{ icon.icon|escape }}' name='menu[menu_font_icons][icon][]' placeholder='fa-cog' />
                            </td>
                            <td>
                                <select class='selectpicker show-tick' name='menu[menu_font_icons][type][]'>
                                    <option value='font-awesome' {% if icon.type == 'font-awesome' %}selected='selected'{% endif %}>FontAwesome Solid (fas)</option>
                                    <option value='font-awesome-brand' {% if icon.type == 'font-awesome-brand' %}selected='selected'{% endif %}>FontAwesome Brand (fab)</option>
                                    <option value='glyphicon' {% if icon.type == 'glyphicon' %}selected='selected'{% endif %}>GlyphIcon</option>
                                    <option value='custom' {% if icon.type == 'custom' %}selected='selected'{% endif %}>Custom</option>
                                </select>
                            </td>
                            <td><span class="label-danger label delete-font-icon-row">x</span></td>
                        </tr>
                    {% endif %}
                {% endfor %}
            {% endif %}
            <tr>
                <td>
                    <select class='selectpicker show-tick' name='menu[menu_font_icons][id][]'>
                        <option value="">Select Menu Item</option>
                        {% for item in menu_items(options) %}
                            <option value='{{ item.ID }}'>{{ item.title }}</option>
                        {% endfor %}
                    </select>
                </td>
                <td>
                    <input type='text' class='form-control' name='menu[menu_font_icons][icon][]' placeholder='cog' />
                </td>
                <td>
                    <select class='selectpicker show-tick' name='menu[menu_font_icons][type][]'>
                        <option value='' selected='selected'>Please Select</option>
                        <option value='font-awesome'>FontAwesome Solid (fas)</option>
                        <option value='font-awesome'>FontAwesome Brand (fab)</option>
                        <option value='glyphicon'>GlyphIcon</option>
                        <option value='custom'>Custom</option>
                    </select>
                </td>
                <td></td>
            </tr>
        </table>
        <button id='add-font-icon' class='btn btn-rm btn-primary' type='button'>Add Font Icon</button>
    </td>
</tr>