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

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

    <div class="mb-3">
        {% if oViewConf.getActiveClassName() != "order" %}
            {% set blRequired = oViewConf.isFunctionalityEnabled("blC4SBasketExtensionReferenceRequired") %}
            {% block checkout_basket_customer_reference %}
                {% block checkout_basket_customer_reference_label %}
                    <label for="c4s-basket-customer-reference" class="form-label small">{{ translate({ ident: "C4S_BASKET_EXTENSION_CUSTOMER_ORDER_REFERENCE" }) }}{% if blRequired %} *{% endif %}</label>
                {% endblock %}
                <div class="input-group input-group-sm">
                    <input name="sCustomerReference"
                           id="c4s-basket-customer-reference"
                           maxlength="{{ oViewConf.getCustomerReferenceNumberMaxLength() }}"
                           class="form-control"
                           placeholder="{{ translate({ ident: "C4S_BASKET_EXTENSION_CUSTOMER_ORDER_REF_PLACEHOLDER" }) }}"
                           value="{% if sCustomerReference %}{{ sCustomerReference }}{% endif %}"
                           {% if blRequired %}required{% endif %}
                    >
                    <button class="btn btn-outline-secondary"
                            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 %}
        {% else %}
            {% block checkout_order_customer_reference %}
                {% block checkout_basket_customer_reference_label %}
                    <label for="c4s-basket-customer-reference" class="form-label small">{{ translate({ ident: "C4S_BASKET_EXTENSION_CUSTOMER_ORDER_REFERENCE" }) }}</label>
                {% endblock %}
                <div class="input-group input-group-sm">
                    <input name="sCustomerReference"
                           id="c4s-basket-customer-reference"
                           maxlength={{ oViewConf.getCustomerReferenceNumberMaxLength() }}
                           class="form-control"
                           {# placeholder="{{ translate({ ident: "C4S_BASKET_EXTENSION_CUSTOMER_ORDER_REF_PLACEHOLDER" }) }}" #}
                           value="{% if sCustomerReference %}{{ sCustomerReference }}{% endif %}"
                           readonly
                    >
                    <a class="btn btn-outline-secondary 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_REF_CHANGE_TOOLTIP" }) }}"
                   >
                        <i class="fa-solid fa-pen-to-square"></i>
                    </a>
                </div>
            {% endblock %}
        {% endif %}
    </div>
</form>