<div class="entity-attribute  entity-attribute-data-table">

    @include('kms.attributes.label')

    <div class="c-data-table  js-data-table">

        @if($attribute->hasHeading())
            <div class="c-data-table__row  c-data-table__row--header">

                <span class="c-data-table__item  c-data-table__item--header" style="flex: 0.3;"></span>

                @if($attribute->hasRowNumbers)
                    <span class="c-data-table__item  c-data-table__item--header" style="flex: 0.3;">#</span>
                @endif

                @foreach($attribute->getTableStructure() as $tableColumn)
                    <span
                        class="c-data-table__item  c-data-table__item--header  @if($tableColumn->getFlexRatio() !== 1) c-data-table__item--f{{ $tableColumn->getFlexRatio() }}  @endif">{{ $tableColumn->getName() }}</span>
                @endforeach
                <span class="c-data-table__delete" hidden></span>
            </div>
        @endif

        {{-- Note: Foreach loop is directly place behind the html to use the :empty pseudo selector --}}
        <div class="c-data-table__content  js-data-table-content"
             data-empty="@lang('kms/attributes/components.data_table.empty')">
            @foreach($attribute->getDecodedValue() as $attributeDataRow)
                <div class="c-data-table__row  js-data-table-row">

                    <span class="c-data-table__sort js-data-table-sort-row" style="flex: 0.3;"></span>

                    @if($attribute->hasRowNumbers)
                        <span class="c-data-table__item" style="flex: 0.3; color: #9ba0ae; font-size: .7rem">
                            {{$loop->iteration}}
                        </span>
                    @endif

                    @foreach($attribute->getTableStructure() as $columnIndex => $tableColumn)

                        @include('kms.attributes.dataTableItem', ['dataTableColumn' => $tableColumn, 'dataTableItemValue' => $attributeDataRow[$columnIndex]])
                    @endforeach
                    <span class="c-data-table__delete  js-data-table-remove-row"></span>
                </div>
            @endforeach
        </div>

    </div>

    <div class="c-data-table__controls">
        @if($attribute->addingRowsIsEnabled())
            <span class="c-data-table__add  js-data-table-add-row">
                @lang('kms/attributes/components.data_table.add_row')
            </span>
        @endif
    </div>

    @if($attribute->getExplanation())
        <span class="explanation">{{ $attribute->getExplanation() }}</span>
    @endif


    {{-- HIDDEN ELEMENTS --}}
    <div hidden>
        <div class="c-data-table__row  js-data-table-row  js-data-table-structure">
            <span class="c-data-table__sort js-data-table-sort-row" style="flex: 0.3;"></span>

            @if($attribute->hasRowNumbers)
                <span class="c-data-table__item" style="flex: 0.3; color: #9ba0ae; font-size: .7rem">New</span>
            @endif

            @foreach($attribute->getTableStructure() as $tableColumn)
                @include('kms.attributes.dataTableItem', ['dataTableColumn' => $tableColumn])
            @endforeach

            <span class="c-data-table__delete  js-data-table-remove-row"></span>
        </div>
        <input class="js-data-table-hidden-input" id="{{ $attribute->getKey() }}" name="{{ $attribute->getKey() }}"
               value="{{ $attribute->getValue() }}" type="hidden"/>
    </div>

</div>