@section('componentable-area-' . $loop->iteration)

    <table class="o-table__table">
        <thead class="o-table__head">
        <tr class="o-table__head-row">
            @foreach($component->rows[0] as $headerColumn)
                <th class="o-table__head-item" style="--colums: {{count($component->rows[0])}}">

                    @if(!empty($headerColumn->link))
                        <a class="o-table__anchor" href="{{$headerColumn->link }}">
                            {{ $headerColumn->text }}
                            @include('site.components.icons.arrow')
                        </a>
                    @else
                        {{ $headerColumn->text }}
                    @endif

                </th>
            @endforeach
        </tr>
        </thead>
        <tbody class="o-table__body">
            @foreach($component->rows as $tableRow)
                @continue($loop->first)

                <tr class="o-table__body-row" style="--colums: {{count($component->rows[0])}}">
                    @foreach($tableRow as $rowColumn)

                        @if(!empty($rowColumn->link))
                            <td data-label="XD" class="o-table__body-item">
                                <a class="o-table__anchor" href="{{ $rowColumn->link  }}">
                                    {{ $rowColumn->text }}  @include('site.components.icons.arrow')
                                </a>
                            </td>
                        @else
                            <td class="o-table__body-item">
                                {{ $rowColumn->text }}
                            </td>
                        @endif

                    @endforeach
                </tr>

            @endforeach
        </tbody>
    </table>

</div>

@endsection

@include('site.organisms.componentables.componentLayout')