{% extends 'base.html.twig' %}

{% block title %}New OrderItem{% endblock %}

{% block body %}
    <h1>Create new OrderItem</h1>

    {{ include('order_item/_form.html.twig') }}

    <hr />

    {% if food_order.foodVendor.menuLink != '' %}
    <a href="{{ food_order.foodVendor.menuLink }}" target="_blank">
        External link to Menu
    </a>
    {% endif %}

    <div>
       <b>click a button to select a given menuitem</b>
    </div>
    <div>
        {% for menuItem in menuItems %}
            <a href="#" data-menu-item>{{ menuItem.name }}</a>
        {% endfor %}
    </div>

    <hr />

    <a class="button" href="{{ path('app_food_order_show', { 'id': food_order.id}) }}">back to list</a>

    <script>
        document.querySelectorAll('[data-menu-item]').forEach(function(element) {
            element.addEventListener('click', function(e) {
                e.preventDefault();
                document.getElementById('order_item_name').value = e.target.textContent
            });
        });
    </script>
{% endblock %}