{% macro oro_rfp_frontend_request_lineitem_requested_prototype(widget, attributes) %}
    {% if 'collection' in widget.vars.block_prefixes %}
        {% set form = widget.vars.prototype %}
        {% set name = widget.vars.full_name ~ '[' ~ widget.vars.prototype.vars.name ~ ']' %}
    {% else %}
        {% set form = widget %}
        {% set name = widget.vars.full_name %}
    {% endif %}
    <div data-content="{{ name }}"
        data-validation-optional-group
        data-role="lineitem" {{ attributes }}
        class="request-form-lineitem fields-row"
        data-page-component-module="oroui/js/app/components/view-component"
        data-page-component-options="{{ {
            view: 'ororfp/js/app/views/line-item-offer-view',
            elements: {
                unit: '[data-name="field__product-unit"]'
            }
        }|json_encode }}"
        data-layout="deferred-initialize">
        <div data-role="line-item-form-container">
            {{ form_widget(form) }}
            <div class="request-form-lineitem-unit--remove">
                <button type="button" class="removeRow item-remove btn--plain">
                    <span class="fa-trash fa--large fa--no-offset" aria-hidden="true"></span>
                </button>
            </div>
        </div>
    </div>
{% endmacro %}

{% block oro_rfp_request_widget %}
    <div class="rfp-request-widget" data-page-component-module="orocustomer/js/app/components/customer-selection-component">
        {{ form(form) }}
    </div>
{% endblock %}

{% block oro_rfp_frontend_request_product_collection_widget %}
    {% import _self as fields %}

    {% set widgetContainerAttributes %}
        {% with {'id': '', 'attr': []} %}{{ block('widget_container_attributes') }}{% endwith %}
    {% endset %}
    {% if prototype is defined %}
        {% set prototype_html = fields.oro_rfp_frontend_request_lineitem_prototype(form, prototype_name, null, widgetContainerAttributes) %}
    {% endif %}
    {% set attr = attr|merge({'class': (attr.class is defined ? attr.class ~ ' ' : '') ~ 'grid-container' }) %}
    {% set id = id ~ '_collection' %}

    <div class="request-form">
        <h2 class="request-form__title">{{ 'oro.rfp.frontend.request.title.label'|trans }}</h2>
        {% include "@OroUI/view_loading.html.twig" %}
        <div class="request-form__content" style="display: none;">
            <div class="row-oro">
                {% set prototype_name = form.vars.prototype_name %}
                <div {{ block('widget_container_attributes') }}
                    data-last-index="{{ form.children|length}}"
                    data-prototype-name="{{ prototype_name }}"
                    {% if prototype_html is defined %}
                        data-prototype="{{ prototype_html|escape }}"
                    {% endif %}
                    data-role="product-container">

                    {% if form.children|length %}
                        {% for key, child in form.children %}
                            {{ fields.oro_rfp_frontend_request_lineitem_prototype(child, prototype_name, key, widgetContainerAttributes) }}
                        {% endfor %}
                    {% elseif show_form_when_empty and prototype_html is defined %}
                        {{ prototype_html|replace({(prototype_name): '0'})|raw }}
                    {% endif %}

                </div>

                <div class="request-form-footer">
                    <a class="add-list-item" data-container="[data-role='product-container']" href="#"><i class="fa-plus-circle"></i>{{ 'oro.rfp.frontend.request.lineitem.add'|trans }}</a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% macro oro_rfp_frontend_request_lineitem_prototype(widget, prototype_name, key, attributes) %}
    {% import '@OroUI/macros.html.twig' as UI %}

    {% if 'collection' in widget.vars.block_prefixes %}
        {% set form = widget.vars.prototype %}
        {% set name = widget.vars.full_name ~ '[' ~ widget.vars.prototype.vars.name ~ ']' %}
        {% set id = widget.vars.id %}
    {% else %}
        {% set form = widget %}
        {% set name = widget.vars.full_name %}
        {% set id = widget.vars.id %}
    {% endif %}

    {% if (key is not null) %}
        {% set prototype_name  = 'child-' ~key %}
    {% endif %}

    <div data-page-component-module="oroui/js/app/components/view-component"
         data-page-component-options="{{ {
             view: 'ororfp/js/app/views/frontend-line-item-view',
         }|json_encode }}"
         data-content=""
         data-role="line-item"
         data-skip-input-widgets
         class="request-form-line-container row-oro"
        >

        <div class="request-form-product hidden" data-role="line-item-view">
            <div data-role="content"></div>
            <div class="request-form-product__item request-form-product__item--actions">
                <ul class="actions-row">
                    <li class="actions-row__item actions-row__item--separate-light">
                        <button class="actions-row__button" title="{{ 'oro.frontend.rfp.requestproduct.action.edit'|trans }}" data-role="edit">
                            <span class="actions-row__icon fa-pencil" aria-hidden="true"></span>
                        </button>
                    </li>
                    <li class="actions-row__item actions-row__item--separate-light">
                        <button class="actions-row__button removeRow" title="{{ 'oro.frontend.rfp.requestproduct.action.delete'|trans }}" data-role="remove">
                            <span class="actions-row__icon fa-trash" aria-hidden="true"></span>
                        </button>
                    </li>
                </ul>
            </div>
        </div>

    {% set page_component_options = form.vars.page_component_options|merge(form.vars.componentOptions|default({})) %}
    <div class="request-form-editline" data-role="line-item-edit">
        <div data-content="{{ name }}" data-validation-optional-group {{ attributes }}
             class="request-form-editline__inner"
             data-page-component-module="{{ form.vars.page_component }}"
             data-page-component-options="{{ page_component_options|json_encode }}"
             data-layout="deferred-initialize">
            {{ form_widget(form) }}
            {{ form_errors(form) }}
        </div>
        {% set hasNotes = form.comment.vars.value is not empty %}
        <div class="request-form-editline__footer">
            <div class="request-form-editline__note">
                <div class="request-form-editnote">
                    <input type="checkbox"
                        name="{{ 'lineItem'~id }}"
                        data-role="field__comment-checkbox"
                        id="{{ 'lineItem-'~prototype_name }}"{% if hasNotes %} checked="checked"{% endif %}
                        class="request-form-editnote__toggle"
                    >
                    <label for="{{ 'lineItem-'~prototype_name }}" class="request-form-editnote__label">
                        {{- 'oro.frontend.shoppinglist.view.add_item_note.label'|trans -}}
                    </label>
                    <div class="request-form-editnote__body">
                        {{ form_widget(form.comment) }}
                        {{ form_errors(form.comment) }}
                    </div>
                </div>
            </div>
            <div class="request-form-editline__action">
                <div class="request-form-group">
                    <div class="request-form-group__item">
                        <button type="button" class="btn" data-role="decline">{{ 'Cancel'|trans }}</button>
                    </div>
                    <div class="request-form-group__item">
                        <button type="button" class="btn btn--info" data-role="update">{{ 'Update'|trans }}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
{% endmacro %}

{% block oro_rfp_request_product_collection_widget %}
    <div data-page-component-module="oroui/js/app/components/view-component"
         data-page-component-options="{{ {
             view: 'ororfp/js/app/views/line-items-view'
         }|json_encode }}"
         data-layout="separate"
         data-layout-model="productModel"
         class="rfp-lineitems"
    >
        {{ block('oro_rfp_lineitem_collection_widget') }}
    </div>
{% endblock %}

{% block oro_rfp_lineitem_collection_widget %}
    {% import _self as fields %}

    {% set widgetContainerAttributes %}
        {% with {'id': '', 'attr': []} %}{{ block('widget_container_attributes') }}{% endwith %}
    {% endset %}
    {% if prototype is defined %}
        {% set prototype_html = fields.oro_rfp_request_lineitem_prototype(form, widgetContainerAttributes) %}
    {% endif %}
    {% set attr = attr|merge({'class': (attr.class is defined ? attr.class ~ ' ' : '') ~ 'oro-item-collection grid-container' }) %}
    {% set id = id ~ '_collection' %}
    <div class="row-oro">
        {% set prototype_name = form.vars.prototype_name %}
        <div {{ block('widget_container_attributes') }}>
            <table class="grid grid-main-container table-hover table table-bordered table-condensed">
                <thead>
                <tr>
                    <th><span>{{ 'oro.rfp.frontend.request.lineitem.product'|trans }}</span></th>
                    <th><span>{{ 'oro.rfp.frontend.request.lineitem.requested.label'|trans }}</span></th>
                    <th><span>{{ 'oro.rfp.frontend.request.lineitem.notes'|trans }}</span></th>
                    <th></th>
                </tr>
                </thead>
                <tbody data-last-index="{{ form.children|length}}" data-prototype-name="{{ prototype_name }}"{% if prototype_html is defined %} data-prototype="{{ prototype_html|escape }}"{% endif %}>
                {% if form.children|length %}
                    {% for child in form.children %}
                        {{ fields.oro_rfp_request_lineitem_prototype(child, widgetContainerAttributes) }}
                    {% endfor %}
                {% elseif show_form_when_empty and prototype_html is defined %}
                    {{ prototype_html|replace({(prototype_name): '0'})|raw }}
                {% endif %}
                </tbody>
            </table>
        </div>
        <button type="button" class="btn add-list-item" data-container=".oro-item-collection tbody">{{ 'oro.rfp.frontend.request.lineitem.add'|trans }}</button>
    </div>
{% endblock %}

{% macro oro_rfp_request_lineitem_prototype(widget, attributes) %}
    {% if 'collection' in widget.vars.block_prefixes %}
        {% set form = widget.vars.prototype %}
        {% set name = widget.vars.full_name ~ '[' ~ widget.vars.prototype.vars.name ~ ']' %}
    {% else %}
        {% set form = widget %}
        {% set name = widget.vars.full_name %}
    {% endif %}
    {% set page_component_options = form.vars.page_component_options|merge(form.vars.componentOptions|default({})) %}
    <tr data-content="{{ name }}" data-validation-optional-group {{ attributes }}
        class="rfp-lineitem oro-item-collection__row--align-top"
        data-page-component-module="{{ form.vars.page_component }}"
        data-page-component-options="{{ page_component_options|json_encode }}"
            >
        {{ form_widget(form) }}
        {{ form_errors(form) }}
        <td class="request-form-lineitem-unit--remove">
            <button type="button" class="removeLineItem btn btn-icon btn-square-lighter"><span class="fa-close"></span></button>
        </td>
    </tr>
{% endmacro %}

{% block oro_rfp_frontend_request_product_widget %}
    {% set attr = layout_attr_defaults(form.product.vars.attr, {
        'data-role': 'lineitem-product'
    }) %}
    <div class="request-form-editline__product">
        {{ form_widget(form.product, {attr: attr}) }}
        {{ form_errors(form.product) }}
    </div>
    <div class="request-form-editline__lines">
        {{ form_widget(form.requestProductItems) }}
        {{ form_errors(form.requestProductItems) }}
    </div>
{% endblock %}

{% block oro_rfp_request_product_widget %}
    <td class="rfp-lineitem-product">
        {{ form_widget(form.product) }}
        {{ form_errors(form.product) }}
    </td>
    <td class="rfp-lineitem-requested">
        {{ form_widget(form.requestProductItems) }}
        {{ form_errors(form.requestProductItems) }}
    </td>
    <td class="rfp-lineitem-notes">
        <div data-page-component-module="oroorder/js/app/components/notes-component">
            {{ form_widget(form.comment) }}
            {{ form_errors(form.comment) }}
        </div>
    </td>
{% endblock %}

{% block oro_rfp_request_frontend_product_item_collection_widget %}
    {% import _self as fields %}

    {% set widgetContainerAttributes %}
        {% with {'id': '', 'attr': []} %}{{ block('widget_container_attributes') }}{% endwith %}
    {% endset %}
    {% if prototype is defined %}
        {% set prototype_html = fields.oro_rfp_frontend_request_lineitem_requested_prototype(form, widgetContainerAttributes) %}
    {% endif %}
    {% set attr = attr|merge({'class': (attr.class is defined ? attr.class ~ ' ' : '') ~ 'oro-item-collection grid-container' }) %}
    {% set id = id ~ '_collection' %}
    <div class="row-oro">
        {% set prototype_name = form.vars.prototype_name %}
        <div {{ block('widget_container_attributes') }}>
            <table class="table-hover table table-bordered rfp-lineitem-requested">
                <thead>
                <tr>
                    <th colspan="2"><span>{{ 'oro.rfp.frontend.request.lineitem.requested.quantity'|trans }}</span></th>
                    <th colspan="2"><span>{{ 'oro.rfp.frontend.request.lineitem.requested.price'|trans }}</span></th>
                    <th></th>
                </tr>
                </thead>
                <tbody class="rfp-lineitem-requested-items" data-last-index="{{ form.children|length}}" data-prototype-name="{{ prototype_name }}"{% if prototype_html is defined %} data-prototype="{{ prototype_html|escape }}"{% endif %}>
                {% if form.children|length %}
                    {% for child in form.children %}
                        {{ fields.oro_rfp_frontend_request_lineitem_requested_prototype(child, widgetContainerAttributes) }}
                    {% endfor %}
                {% elseif show_form_when_empty and prototype_html is defined %}
                    {{ prototype_html|replace({(prototype_name): '0'})|raw }}
                {% endif %}
                </tbody>
            </table>
        </div>
        <button type="button" class="btn add-list-item rfp-lineitem-requested-item-add" data-container=".oro-item-collection tbody"><i class="fa-plus"></i>{{ 'oro.rfp.frontend.request.lineitem.requested.add'|trans }}</button>
    </div>
{% endblock %}

{% block oro_rfp_frontend_request_product_item_collection_widget %}
    {% import _self as fields %}

    {% set widgetContainerAttributes %}
        {% with {'id': '', 'attr': []} %}{{ block('widget_container_attributes') }}{% endwith %}
    {% endset %}
    {% if prototype is defined %}
        {% set prototype_html = fields.oro_rfp_frontend_request_lineitem_requested_prototype(form, widgetContainerAttributes) %}
    {% endif %}
    {% set attr = attr|merge({'class': (attr.class is defined ? attr.class ~ ' ' : '') ~ 'grid-container' }) %}
    {% set id = id ~ '_collection' %}
    {% set prototype_name = form.vars.prototype_name %}
    <div {{ block('widget_container_attributes') }}>
        <input type="hidden" name="validate_{{ full_name }}" data-collection-name="{{ full_name }}" data-name="collection-validation" disabled data-validate-element>
        <div class="request-form-lineitems">
            <div data-last-index="{{ form.children|length}}"
            data-prototype-name="{{ prototype_name }}"
            {% if prototype_html is defined %}
                data-prototype="{{ prototype_html|escape }}"
            {% endif %}
            data-content
            data-role="lineitems">
            {% if form.children|length %}
                {% for child in form.children %}
                    {{ fields.oro_rfp_frontend_request_lineitem_requested_prototype(child, widgetContainerAttributes) }}
                {% endfor %}
            {% elseif show_form_when_empty and prototype_html is defined %}
                {{ prototype_html|replace({(prototype_name): '0'})|raw }}
            {% endif %}
            </div>
        </div>
    </div>
    <a class="request-form-lineitems__add add-list-item" data-role="lineitem-add" data-container="[data-role='lineitems']" href="#"><i class="fa-plus-circle"></i>{{ 'oro.rfp.frontend.request.lineitem.requested.add'|trans }}</a>
{% endblock %}

{% block oro_rfp_request_product_item_collection_widget %}
    {% import _self as fields %}

    {% set widgetContainerAttributes %}
        {% with {'id': '', 'attr': []} %}{{ block('widget_container_attributes') }}{% endwith %}
    {% endset %}
    {% if prototype is defined %}
        {% set prototype_html = fields.oro_rfp_request_lineitem_requested_prototype(form, widgetContainerAttributes) %}
    {% endif %}
    {% set attr = attr|merge({'class': (attr.class is defined ? attr.class ~ ' ' : '') ~ 'oro-item-collection grid-container' }) %}
    {% set id = id ~ '_collection' %}
    <div class="row-oro">
        {% set prototype_name = form.vars.prototype_name %}
        <div {{ block('widget_container_attributes') }}>
            <input type="hidden" name="validate_{{ full_name }}" data-collection-name="{{ full_name }}" data-name="collection-validation" disabled data-validate-element>
            <table class="table-hover table table-bordered rfp-lineitem-requested">
                <thead>
                <tr>
                    <th colspan="2"><span>{{ 'oro.rfp.frontend.request.lineitem.requested.quantity'|trans }}</span></th>
                    <th colspan="2"><span>{{ 'oro.rfp.frontend.request.lineitem.requested.price'|trans }}</span></th>
                    <th></th>
                </tr>
                </thead>
                <tbody class="rfp-lineitem-requested-items" data-last-index="{{ form.children|length}}" data-prototype-name="{{ prototype_name }}"{% if prototype_html is defined %} data-prototype="{{ prototype_html|escape }}"{% endif %}>
                {% if form.children|length %}
                    {% for child in form.children %}
                        {{ fields.oro_rfp_request_lineitem_requested_prototype(child, widgetContainerAttributes) }}
                    {% endfor %}
                {% elseif show_form_when_empty and prototype_html is defined %}
                    {{ prototype_html|replace({(prototype_name): '0'})|raw }}
                {% endif %}
                </tbody>
            </table>
        </div>
        <button type="button" class="btn add-list-item rfp-lineitem-requested-item-add" data-container=".oro-item-collection tbody">{{ 'oro.rfp.frontend.request.lineitem.requested.add'|trans }}</button>
    </div>
{% endblock %}

{% macro oro_rfp_request_lineitem_requested_prototype(widget, attributes) %}
    {% if 'collection' in widget.vars.block_prefixes %}
        {% set form = widget.vars.prototype %}
        {% set name = widget.vars.full_name ~ '[' ~ widget.vars.prototype.vars.name ~ ']' %}
    {% else %}
        {% set form = widget %}
        {% set name = widget.vars.full_name %}
    {% endif %}
    <tr data-content="{{ name }}" data-validation-optional-group {{ attributes }}
        class="rfp-lineitem-requested rfp-lineitem-requested-item">
        {{ form_widget(form) }}
        <td class="rfp-lineitem-requested-remove">
            <button type="button" class="removeRow btn btn-icon btn-square-lighter"><span class="fa-close"></span></button>
        </td>
    </tr>
{% endmacro %}

{% block _oro_rfp_frontend_request_requestProducts_entry_requestProductItems_entry_widget %}
    {% set ariaControlsId = 'rfq-quantity-'|uniqid %}
    {% use "@OroPricing/layouts/default/layout.html.twig" %}
    <div class="request-form-lineitem-unit request-form-lineitem-unit--size-m">
        {{ form_widget(form.quantity, {id: ariaControlsId}) }}
        {{ form_errors(form.quantity) }}
    </div>
    {% set attr_unit = layout_attr_defaults(form.productUnit.vars.attr, {
        '~class': 'select select--size-m select--full'
    }) %}
    <div class="request-form-lineitem-unit request-form-lineitem-unit--select request-form-lineitem-unit--size-l">
        {{ form_widget(form.productUnit, {attr: attr_unit}) }}
        {{ form_errors(form.productUnit) }}
    </div>
    <div class="request-form-lineitem-unit request-form-lineitem-unit--prices"
        data-page-component-module="oroui/js/app/components/view-component"
        data-page-component-options="{{ {
            view: 'oropricing/js/app/views/line-item-product-prices-view',
            elements: {
                pricesHint: '[data-name="prices-hint"]',
                pricesHintContent: '[data-name="prices-hint-content"]'
            },
            ariaControlsId: ariaControlsId,
            matchedPriceEnabled: false
        }|json_encode }}">
        <script type="text/template" data-name="prices-hint-content">
            {{ block('product_price_hint_content_js_widget') }}
        </script>
        <script type="text/template" data-name="prices-hint">
            {{ block('product_price_hint_trigger_js_widget') }}
        </script>
        {% set input_price = layout_attr_defaults(form.price.value.vars.attr, {
            '~class': 'request-form-lineitem-unit__input',
            '~data-precision': oro_locale_number_attribute('max_fraction_digits', 'currency')
        }) %}

        <span class="request-form-lineitem-unit__label">{{ 'oro.rfp.requestproductitem.price.label'|trans }}:</span> {{ form_widget(form.price.value, {attr: input_price}) }}
        <div class="hidden">{{ form_widget(form.price.currency) }}</div>
        {{ form_errors(form.price) }}
    </div>
{% endblock %}

{% block oro_rfp_request_product_item_widget %}
    <td class="rfp-lineitem-requested-quantity">
        {{ form_widget(form.quantity) }}
        {{ form_errors(form.quantity) }}
    </td>
    <td class="rfp-lineitem-requested-unit">
        {{ form_widget(form.productUnit, {attr: attr|merge({class: 'rfp-requestproductitem-productunit-select'})}) }}
        {{ form_errors(form.productUnit) }}
    </td>
    <td class="rfp-lineitem-requested-price">
        {{ form_widget(form.price.value) }}
        {{ form_errors(form.price.value) }}
    </td>
    <td class="rfp-lineitem-requested-currency">
        {{ form_widget(form.price.currency) }}
        {{ form_errors(form.price.currency) }}
    </td>
{% endblock %}

{% block _oro_order_type_lineItems_entry_offers_widget %}
    {% if offers is defined and offers|length %}
        {% set page_component_options = {
        offersSelector: '[name="%s"]'|format(full_name),
        priceSelector: '#%s'|format(form.parent.price.value.vars.id),
        quantitySelector: '#%s'|format(form.parent.quantity.vars.id),
        unitSelector: '#%s'|format(form.parent.productUnit.vars.id),
        productSelector: '#%s'|format(form.parent.product.vars.id),
        productSkuSelector: '#%s'|format(form.parent.productSku.vars.id),
        offersDataSelector: '#%s'|format(form.parent.offers_data.vars.id),
        } %}

        <table class="grid grid-main-container table table-hover table-bordered order-line-item-offers"
               data-page-component-module="ororfp/js/app/components/order-line-item-offers"
               data-page-component-options="{{ page_component_options|json_encode }}">
            <tbody>
            {% for child in form.children %}
                <tr>
                    {{ form_row(child, {offer: offers[loop.index-1]}) }}
                </tr>
            {% endfor %}
            </tbody>
        </table>
    {% endif %}
{% endblock %}

{% block _oro_order_type_lineItems_entry_offers_entry_row %}
    <td class="order-line-item-offers-radio">
        {% set quantity = offer.quantity %}
        {% if quantity is not empty %}
            {% set quantity = quantity|oro_format_decimal %}
        {% endif %}
        {% set price = offer.price %}
        {% if price is not empty %}
            {% set price = price|oro_format_decimal %}
        {% endif %}
        {{ form_widget(form, {
            attr: {
                'data-quantity': quantity|default,
                'data-unit': offer.unit|default,
                'data-price': price|default,
                'data-currency': offer.currency|default
            }
        }) }}
    </td>
    <td class="order-line-item-offers-quantity">
        {% if offer.quantity is defined and offer.unit is defined %}
            <label for="{{ id }}">
                {{ offer.quantity|oro_format_product_unit_code(offer.unit) }}
            </label>
        {% endif %}
    </td>
    <td class="order-line-item-offers-price">
        {% if offer.price is defined and offer.currency is defined %}
            <label for="{{ id }}">
                {{ offer.price|oro_format_currency({'currency': offer.currency}) }}
            </label>
        {% endif %}
    </td>
{% endblock %}