{% set template_title = "C4S_QUICKORDER"|translate %}
{% set blUseLivePrice = aQuickorderConfig.priceMode == 'live' and aQuickorderConfig.hasActivePriceMode %}

{% capture append = "oxidBlock_title" %}
    <h1 class="c4s-account-page-header">{{ template_title }}</h1>
{% endcapture %}

{% capture append = "oxidBlock_content" %}
    {% block c4s_quickorder_styles %}
        {{ style({ include: oViewConf.getVersionedModuleUrl("c4s_quickorder", "out/src/css/c4s_quickorder.css")}) }}
    {% endblock %}

    {% block c4s_quickorder_scripts %}
        {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_quickorder", "out/src/js/c4s_quickorder_event_bus.js"), priority: 10, dynamic: __oxid_include_dynamic }) }}
        {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_quickorder", "out/src/js/c4s_quickorder_api.js"), priority: 10, dynamic: __oxid_include_dynamic }) }}
        {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_quickorder", "out/src/js/c4s_quickorder_input.js"), priority: 11, dynamic: __oxid_include_dynamic }) }}
        {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_quickorder", "out/src/js/c4s_quickorder_column.js"), priority: 11, dynamic: __oxid_include_dynamic }) }}
        {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_quickorder", "out/src/js/c4s_quickorder_row_model.js"), priority: 11, dynamic: __oxid_include_dynamic }) }}
        {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_quickorder", "out/src/js/c4s_quickorder_row_view.js"), priority: 11, dynamic: __oxid_include_dynamic }) }}
        {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_quickorder", "out/src/js/c4s_quickorder_row_pricing.js"), priority: 11, dynamic: __oxid_include_dynamic }) }}
        {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_quickorder", "out/src/js/c4s_quickorder_row_price_presenter.js"), priority: 11, dynamic: __oxid_include_dynamic }) }}
        {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_quickorder", "out/src/js/c4s_quickorder_row.js"), priority: 11, dynamic: __oxid_include_dynamic }) }}
        {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_quickorder", "out/src/js/c4s_quickorder_batch.js"), priority: 12, dynamic: __oxid_include_dynamic }) }}
        {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_quickorder", "out/src/js/c4s_quickorder_basket.js"), priority: 12, dynamic: __oxid_include_dynamic }) }}
        {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_quickorder", "out/src/js/c4s_quickorder_summary.js"), priority: 12, dynamic: __oxid_include_dynamic }) }}
        {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_quickorder", "out/src/js/c4s_quickorder_controller.js"), priority: 13, dynamic: __oxid_include_dynamic }) }}
        {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_quickorder", "out/src/js/c4s_quickorder.js"), priority: 15, dynamic: __oxid_include_dynamic }) }}

        {% if blUseLivePrice %}
            {% block c4s_quickorder_scripts_liveprice %}
                {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_liveprice", "out/src/js/c4s_liveprice.js"), priority: 11, dynamic: __oxid_include_dynamic }) }}
                {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_quickorder", "out/src/js/c4s_quickorder_liveprice.js"), priority: 12, dynamic: __oxid_include_dynamic }) }}
            {% endblock %}
        {% endif %}
    {% endblock %}

    <div id="c4s-quickorder"
         class="c4s-quickorder"
         data-config='{{ aQuickorderConfig|json_encode|e("html_attr") }}'
    >
        <section class="card c4s-account-card">
            <div class="card-body py-0">
                {% block c4s_quickorder_errors %}
                    {% if Errors is iterable and count(Errors) > 0 and count(Errors.user) > 0 %}
                        <div class="alert alert-danger c4s-quickorder-errors">
                            <span class="fa-solid fa-circle-info" aria-hidden="true"></span> <strong>{{ translate({ ident: "C4S_QUICKORDER_VALIDATION_ERROR" }) }}</strong>
                            {% for key, oEr in Errors.user %}
                                <p>{{ oEr.getOxMessage()|raw }}</p>
                            {% endfor %}
                        </div>
                    {% endif %}
                {% endblock %}

                {% block c4s_quickorder_title %}
                    {% ifcontent ident "c4s_quickorder_title" set oCont %}
                        <div class="c4s-quickorder-title" data-snippet-ident="c4s_quickorder_title">
                            {{ oCont.oxcontents__oxcontent.value|raw }}
                        </div>
                    {% endifcontent %}
                {% endblock %}
            </div>
        </section>

        <section class="card mb-4 c4s-account-card">
            <form class="c4s-quickorder-input-form" data-role="quickorder-form">
                <div class="card-body">
                    {% block c4s_quickorder_intro %}
                        {% ifcontent ident "c4s_quickorder_intro" set oCont %}
                            <div class="row mb-4">
                                <div class="col-12 c4s-quickorder-intro" data-snippet-ident="c4s_quickorder_intro">
                                    {{ oCont.oxcontents__oxcontent.value|raw }}
                                </div>
                            </div>
                        {% endifcontent %}
                    {% endblock %}

                    <div class="row g-2 align-items-end">
                        {% block c4s_quickorder_input %}
                            {% block c4s_quickorder_input_artnum %}
                                <div class="col-md-{{ aQuickorderConfig.inputAmountEnabled ? 4 : 7 }}">
                                    <label class="form-label" for="c4s-quickorder-input-artnum">
                                        {{ translate({ ident: "C4S_QUICKORDER_INPUT_ARTNUM" }) }}
                                        {% if aQuickorderConfig.multiInputEnabled %}
                                            <i class="fa-solid fa-circle-info ms-1 text-muted"
                                               data-bs-toggle="tooltip"
                                               data-bs-placement="top"
                                               data-bs-html="false"
                                               data-multi-input-tooltip
                                               title="{{ translate({ ident: "C4S_QUICKORDER_MULTI_INPUT_INFO_TOOLTIP", args: aQuickorderConfig.multiInputSeparator }) }}"
                                               aria-label="{{ translate({ ident: "C4S_QUICKORDER_MULTI_INPUT_INFO_TOOLTIP", args: aQuickorderConfig.multiInputSeparator }) }}"></i>
                                        {% endif %}
                                    </label>
                                    <input id="c4s-quickorder-input-artnum"
                                           type="text"
                                           class="form-control"
                                           name="artnum"
                                           autocomplete="off"
                                           data-role="artnum-input"
                                           placeholder="{{ translate({ ident: "C4S_QUICKORDER_INPUT_ARTNUM_PLACEHOLDER" }) }}">
                                </div>
                            {% endblock %}

                            {% if aQuickorderConfig.inputAmountEnabled %}
                                {% block c4s_quickorder_input_amount %}
                                    <div class="col-md-3">
                                        <label class="form-label" for="c4s-quickorder-input-amount">
                                            {{ translate({ ident: "C4S_QUICKORDER_INPUT_AMOUNT" }) }}
                                        </label>
                                        <input id="c4s-quickorder-input-amount"
                                               type="number"
                                               class="form-control"
                                               name="amount"
                                               min="1"
                                               value="1"
                                               data-role="amount-input">
                                    </div>
                                {% endblock %}
                            {% endif %}

                            <div class="col-md-3">
                                {% block c4s_quickorder_input_button %}
                                    <button type="submit"
                                            class="btn btn-primary w-100"
                                            data-role="artnum-submit"
                                    >{{ translate({ ident: "C4S_QUICKORDER_ADD_ARTICLE" }) }}</button>
                                {% endblock %}
                            </div>

                            <div class="col-md-2 mb-2 text-center">
                                {% block c4s_quickorder_input_loader %}
                                    <div data-role="loader" class="d-none">
                                        <i class="fa-solid fa-spinner fa-spin"></i>
                                    </div>
                                {% endblock %}
                            </div>
                        {% endblock %}
                    </div>
                </div>

                <div class="card-footer pt-0">
                    {% block c4s_quickorder_input_footer %}
                        <div class="mt-2 text-danger small"
                             data-role="error-message"
                             role="alert"
                             aria-live="assertive"
                             aria-atomic="true"></div>
                    {% endblock %}
                </div>
            </form>
        </section>

        <section class="card mb-4 c4s-account-card">
            <div class="card-body">
                {% block c4s_quickorder_table %}
                    <table id="c4s-quickorder-table" class="table table-sm mb-0 c4s-quickorder-table">
                        <thead>
                            {% block c4s_quickorder_table_head %}
                                <tr>
                                    {% block c4s_quickorder_table_head_cells %}
                                        {% for col in aQuickorderConfig.columns %}
                                            <th{% if 'price' in col %} class="text-end"{% endif %}>{{ translate({ ident: ("C4S_QUICKORDER_COLUMN_" ~ col|upper) }) }}</th>
                                        {% endfor %}
                                        <th class="text-end">{{ translate({ ident: "C4S_QUICKORDER_COLUMN_REMOVE" }) }}</th>
                                    {% endblock %}
                                </tr>
                            {% endblock %}
                        </thead>

                        <tbody data-role="item-list">
                            {% block c4s_quickorder_table_body %}
                                {# prototype row used by JS for "pending" rows #}
                                {% include '@c4s_quickorder/page/account/inc/c4s_quickorder_row' with { blPrototype: true } %}
                                {# article rows will be filled later by js #}
                            {% endblock %}
                        </tbody>

                        {% block c4s_quickorder_table_footer %}
                            {% if "price" in aQuickorderConfig.columns %}
                                {% set oCurrency = oView.getActCurrency() %}
                                <tfoot>
                                    {% block c4s_quickorder_table_footer_inner %}
                                        <tr>
                                            <td colspan="{{ aQuickorderConfig.columns|length - 1 }}" class="text-end fw-semibold">
                                                {{ translate({ ident: "C4S_QUICKORDER_SUM_TOTAL_NETTO", suffix: "COLON" }) }}
                                            </td>
                                            <td class="text-end fw-semibold" data-role="summary-total">0,00&nbsp;{{ oCurrency.sign }}</td>
                                            <td></td>
                                        </tr>
                                    {% endblock %}
                                </tfoot>
                            {% endif %}
                        {% endblock %}
                    </table>
                {% endblock %}
            </div>

            <div class="card-footer d-flex justify-content-end align-items-center gap-2">
                {% block c4s_quickorder_actions  %}
                    {% block c4s_quickorder_actions_basket_error %}
                        <div class="text-danger small me-3 d-none"
                             data-role="basket-error"
                             role="alert"
                             aria-live="assertive"
                             aria-atomic="true"></div>
                    {% endblock %}

                    {% block c4s_quickorder_actions_remove_error_rows %}
                        <button type="button" class="btn btn-danger d-none" data-role="remove-error-rows">
                            <i class="fa-solid fa-trash"></i>
                            {{ translate({ ident: "C4S_QUICKORDER_REMOVE_ERROR_ROWS" }) }}
                        </button>
                    {% endblock %}

                    {% block c4s_quickorder_actions_submit_basket %}
                        <button type="button" class="btn btn-success" data-role="submit-basket" disabled>{{ translate({ ident: "C4S_QUICKORDER_SUBMIT_ALL_TO_BASKET" }) }}</button>
                    {% endblock %}
                {% endblock %}
            </div>
        </section>
    </div>

    {{ insert_tracker({title: template_title}) }}
{% endcapture %}

{% capture append = "oxidBlock_pageModal" %}
    {% block c4s_quickorder_modal %}
        {# Basket submit error modal (shown when some items could not be added to the basket) #}
        <div id="c4s-quickorder-basket-submit-error-modal" class="modal fade"  tabindex="-1" aria-labelledby="c4s-quickorder-basket-submit-error-modal-label" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="d-flex flex-column">
                            <h5 class="modal-title mb-0" id="c4s-quickorder-basket-submit-error-modal-label">
                                <span data-role="basket-submit-error-title">{{ translate({ ident: "C4S_QUICKORDER_BASKET_ERROR_MODAL_TITLE" }) }}</span>
                            </h5>
                        </div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ translate({ ident: "CLOSE_MODAL" }) }}"></button>
                    </div>

                    <div class="modal-body">
                        <p class="mb-3">{{ translate({ ident: "C4S_QUICKORDER_BASKET_ERROR_MODAL_NOTE" }) }}</p>
                        <ul class="list-group list-group-flush" data-role="basket-submit-error-list"></ul>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                            {{ translate({ ident: "CLOSE_MODAL" }) }}
                        </button>
                        <a href="{{ seo_url({ ident: oViewConf.getSelfLink()|raw ~  "cl=basket" }) }}" class="btn btn-primary c4s-basket-open-btn">
                            {{ translate({ ident: "DISPLAY_BASKET" }) }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    {% endblock %}
{% endcapture %}

{% capture append = "oxidBlock_sidebar" %}
    {% include "page/account/inc/account_menu.html.twig" with {active_link: "c4s_quickorder"} %}
{% endcapture %}

{% include "layout/page.html.twig" with {sidebar: "left", blHideBreadcrumb: true} %}