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

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

{% block body %}
    <h1 class="mb-4">Create new OrderItem</h1>

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

    <hr class="my-4" />

    {% if food_order.foodVendor.menuLink != '' %}
    <a href="{{ food_order.foodVendor.menuLink }}" class="btn btn-info mb-3" target="_blank">
        <i class="bi bi-link-45deg"></i> External link to Menu
    </a>
    {% endif %}

    <div class="mb-3">
       <b>Click a button to select a given menu item:</b>
    </div>
    <div class="mb-4">
        {% for menuItem in menuItems %}
            <a href="#" class="btn btn-outline-secondary me-2 mb-2" data-menu-item>{{ menuItem.name }}</a>
        {% endfor %}
    </div>

    <hr class="my-4" />

    <a class="btn btn-secondary" href="{{ path('app_food_order_show', { 'id': food_order.id}) }}">
        <i class="bi bi-arrow-left"></i> 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 %}