@props([
    'data' => null
])

<section class="project-section mt-3">
    <div class="auto-container aut-container2">

        <!--Product Tabs-->
        <div class="prod-tabs tabs-box">
            <!-- Tab Btns -->
            <div class="btns-outer">
                <div class="btns-pattern-layer"
                     style="background-image:url({{asset('images/background/tela.png')}})"></div>
                <div class="title-box">
                    {!! tiptap_converter()->asHTML(translate_data($data['section_title'])) !!}
                </div>
                <ul class="tab-btns tab-buttons clearfix">
                    @foreach($data['list_items'] as $item => $value)
                        <li data-tab="#{{$item}}"
                            class="tab-btn {{ $item == 0 ? 'active-btn' : '' }}">
                            {{ translate_label($value['button_wrapper']['button'], 'button_text') }}
                        </li>
                    @endforeach
                </ul>
            </div>

            <!--Tabs Container-->
            <div class="tabs-content">
                <!-- Tab  -->
                @foreach($data['list_items'] as $item => $value)
                    <div class="tab {{ $item == 0 ? 'active-tab' : '' }}" id="{{ $item }}">
                        <div class="image">
                            <img src="{{ Storage::url($value['item_image']) }}" alt="product image"/>
                            <div class="content">
                                <x-redirect-link
                                    class="arrow flaticon-right-arrow"
                                    :type="$value['button_wrapper']['button']['redirect']['type']"
                                    :redirect="$value['button_wrapper']['button']['redirect']['value']"
                                />
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>
        </div>

    </div>
</section>