<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">
                @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">

                    @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">
                <span class="c-data-table__add-icon"></span> @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">

            @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>