<div class="!w-full !max-w-2xl !mx-auto !mb-5">

    <h2 ng-show="labelText" class="!text-lg !font-semibold !mb-4">{{labelText}}</h2>
    <p ng-show="description" class="!text-sm !text-[#333E48] !font-medium !mt-1 !mb-2">{{description}}</p>
    <!-- Language mapping container -->
    <div class="language-mappings-container  !overflow-hidden">
        <!-- Array format rendering -->
        <div ng-show="isArray" ng-repeat="item in languageMappings track by $index"
             class="language-mapping-item  !flex !items-center !hover:bg-gray-50 !cursor-move" draggable="true"
             ng-attr-data-index="{{$index}}">

            <!-- Drag handle -->
            <i class="dku-icon-dots-multiple-16 !py-3 !pl-3 !pr-2  !font-normal !text-zinc-900 !cursor-move"></i>

            <!-- Language name -->
            <div class="!py-2 !px-1 !border !rounded-lg  focus-within:!border-blue-500 !transition-colors !duration-200"
                 ng-class="{ '!border-gray-200': !item.to && !item.from, '!border-transparent': item.to || item.from }"
            >

                <input type="text"
                       auto-resize
                       class="!max-w-40 !text-sm !bg-transparent !border-none !outline-none !py-2 !px-2 !text-sm !font-normal !text-zinc-900 placeholder:!text-gray-400 !ring-0 !truncate"
                       ng-model="item.from" placeholder="{{keyPlaceholder || 'Key'}}"
                       style="font-size: 14px"
                >
            </div>

            <i class="dku-icon-line-16 flex-shrink-0 !mx-2 !font-normal !text-zinc-900"></i>

            <!-- Language code -->
            <div class="!flex-grow">
                <div class="!w-fit !py-2 !px-1 !border !rounded-lg  focus-within:!border-blue-500 !transition-colors !duration-200"
                     ng-class="{ '!border-gray-200': !item.to && !item.from, '!border-transparent': item.to || item.from }"
                >
                    <input auto-resize
                           type="text"
                           class="!max-w-40 !text-sm !bg-transparent !border-none !outline-none !py-2 !px-2 !text-sm !font-normal !text-zinc-900 placeholder:!text-gray-400 !ring-0 !truncate"
                           ng-model="item.to" placeholder="{{valuePlaceholder || 'Value'}}">
                </div>
            </div>


            <button type="button"
                    class="!py-3 !pr-3 !pl-2 !font-normal !text-zinc-900 hover:!text-red-600 focus:!outline-none"
                    ng-click="removeMapping($index)">
                <i class="dku-icon-trash-16 !h-5 !w-5"></i>
            </button>
        </div>

        <!-- Dictionary format rendering -->
        <div ng-show="!isArray" ng-repeat="(key, value) in languageMappings track by key"
             class="language-mapping-item !mb-2 !flex !items-center !hover:bg-gray-50 !cursor-move"
             draggable="true">

            <!-- Drag handle - fixed width -->
            <i class="dku-icon-dots-multiple-16 !py-3 !pl-3 !pr-2 !font-normal !text-zinc-900 !cursor-move !flex-shrink-0"></i>

            <!-- Container for key-value pair - 50% of remaining space -->
            <div class="!flex !items-center !w-1/2 !gap-2">
                <!-- Key Input -->
                <div class="!flex-1 !py-2 !px-1 !bg-white !border !border-gray-300 !rounded-md
                    focus-within:!border-blue-500 !transition-colors !duration-200">
                    <input
                            type="text"
                            auto-resize
                            class="!max-w-40 !border-none !bg-transparent !py-2 !px-2 !text-sm !font-normal !text-zinc-900 placeholder:!text-gray-400 !outline-none !ring-0 !focus:ring-0 !truncate"
                            ng-model="key"
                            ng-model-options="{ updateOn: 'blur' }"
                            ng-blur="updateKey(key, $event.target.value)"
                            placeholder="{{keyPlaceholder || 'Key'}}">
                </div>

                <!-- Separator -->
                <i class="dku-icon-line-16 !flex-shrink-0 !font-normal !text-zinc-900"></i>

                <!-- Value Input -->
                <div class="!flex-1 !py-2 !px-1 !bg-white !border !border-gray-300 !rounded-md
                    focus-within:!border-blue-500 !transition-colors !duration-200">
                    <input type="text"
                           auto-resize
                           class="!max-w-40 !border-none !bg-transparent focus:!border-gray-300 !py-2 !px-2 !text-sm !font-normal !text-zinc-900 placeholder:!text-gray-400 !outline-none !ring-0 !focus:ring-0 !truncate"
                           ng-model="languageMappings[key]"
                           placeholder="{{valuePlaceholder || 'Value'}}">
                </div>
            </div>

            <!-- Empty space - 50% -->
            <div class="!flex-1"></div>

            <!-- Trash icon - fixed width at the end -->
            <button type="button"
                    class="!py-3 !pr-3 !pl-2 !font-normal !text-zinc-900 hover:!text-red-600 focus:!outline-none !flex-shrink-0"
                    ng-click="removeMapping(key)">
                <i class="dku-icon-trash-16 !h-5 !w-5"></i>
            </button>
        </div>


        <!-- Add language button -->
        <div>
            <button type="button"
                    class="!inline-flex !items-center !px-3 !py-2 !bg-white !border !border-gray-300 !font-normal !text-zinc-900 !text-sm  !rounded-md !shadow-sm hover:!bg-gray-50 focus-visible:!outline focus-visible:!outline-2 focus-visible:!outline-offset-2 focus-visible:!outline-indigo-600"
                    ng-click="addMapping()">

                <i class="dku-icon-plus-16 !h-5 !w-5 !mr-1.5 !font-normal !text-zinc-900"></i>
                <span ng-show="buttonLabel" class="!text-sm !font-light">{{buttonLabel}}</span>
            </button>
        </div>
    </div>

</div>