{% set sCustomerComment = oxcmp_basket.getCustomFieldSetEntry("sCustomerComment") %}

<form id="c4s-basket-additional-customer-comment-form" action="{{ oViewConf.getSslSelfLink()|raw }}" method="post">
    {{ oViewConf.getHiddenSid()|raw }}
    <input type="hidden" name="cl" value="{{ oViewConf.getTopActiveClassName() }}">
    <input type="hidden" name="fnc" value="setCustomerComment">

    <div class="mb-3">
        {% if oViewConf.getActiveClassName() != "order" %}
            {% apply spaceless %}
                {% set blRequired = oViewConf.isFunctionalityEnabled("blC4SBasketExtensionCustomerCommentRequired") %}
                {% block checkout_basket_customer_comment %}
                    <label for="c4s-basket-customer-comment" class="form-label small">{{ translate({ ident: "C4S_BASKET_EXTENSION_CUSTOMER_ORDER_COMMENT" }) }}{% if blRequired %} *{% endif %}</label>
                    <div class="input-group input-group-sm">
                        <textarea name="sCustomerComment"
                                  id="c4s-basket-customer-comment"
                                  rows="4"
                                  class="form-control"
                                  placeholder="{{ translate({ ident: "C4S_BASKET_EXTENSION_CUSTOMER_ORDER_COM_PLACEHOLDER" }) }}"
                                  style="resize: none"
                                  {% if blRequired %}required{% endif %}
                        >
                            {% if sCustomerComment %}{{ sCustomerComment }}{% endif %}
                        </textarea>
                        <button class="btn btn-outline-secondary d-flex align-items-center"
                                type="submit"
                                data-bs-toggle="tooltip"
                                data-bs-placement="top"
                                data-bs-container="body"
                                title="{{ translate({ ident: "SAVE" }) }}"
                        >
                            <i class="fa-solid fa-floppy-disk"></i>
                        </button>
                    </div>
                {% endblock %}
            {% endapply %}
        {% else %}
            {% apply spaceless %}
                {% block checkout_order_customer_comment %}
                    <label for="c4s-basket-customer-comment" class="form-label small">{{ translate({ ident: "C4S_BASKET_EXTENSION_CUSTOMER_ORDER_COMMENT" }) }}</label>
                    <div class="input-group input-group-sm">
                        <textarea name="sCustomerComment"
                                  id="c4s-basket-customer-comment"
                                  rows="4"
                                  class="form-control"
                                  {# placeholder="{{ translate({ ident: "C4S_BASKET_EXTENSION_CUSTOMER_ORDER_COM_PLACEHOLDER" }) }}" #}
                                  style="resize: none;"
                                  readonly
                        >
                            {% if sCustomerComment %}{{ sCustomerComment|trim }}{% endif %}
                        </textarea>
                        <a class="btn btn-outline-secondary d-flex align-items-center c4s-basket-change-btn"
                           href="{{ seo_url({ ident: oViewConf.getBasketLink()|raw }) }}"
                           data-bs-toggle="tooltip"
                           data-bs-placement="top"
                           data-bs-container="body"
                           title="{{ translate({ ident: "C4S_BASKET_EXTENSION_CUSTOMER_ORDER_COM_CHANGE_TOOLTIP" }) }}"
                        >
                            <i class="fa-solid fa-pen-to-square"></i>
                        </a>
                    </div>
                {% endblock %}
            {% endapply %}
        {% endif %}
    </div>
</form>