@if(!empty(count($product_category_tabs)))
<article class="container-fluid features" id="our-capabilities">
    <section class="row custom__row">
        <div class="nav features__tab">
            <ul>
                <div class="slider"></div>
                @php
                $i = 0;
                @endphp
                @foreach($product_category_tabs as $product_category_tab_row)
                <li data-feature-name="{{Str::slug($product_category_tab_row->product_category_template_tab_name)}}" class="@if(empty($i)) active @endif">{{$product_category_tab_row->product_category_template_tab_name}}</li>
                @php
                $i++;
                @endphp
                @endforeach
            </ul>
        </div>
    </section>
    <section class="custom__row features__content">
        <div class="row features__content__container">
            @php
            $i = 0;
            @endphp
            @foreach($product_category_tabs as $product_category_tab_row)
            <article class="col-12 features__content__block @if(empty($i)) active @endif" id="{{Str::slug($product_category_tab_row->product_category_template_tab_name)}}">
                <div class="row">
                    <div class="col-12 col-md-6">
                        <figure class="image @if($product_category_tab_row->product_category_template_tab_media_type == 2 && !empty($product_category_tab_row->product_category_template_tab_youtube_id)) welcome__video__inner play__icon @endif" @if($product_category_tab_row->product_category_template_tab_media_type == 2 && !empty($product_category_tab_row->product_category_template_tab_youtube_id)) data-youtube-id="{{$product_category_tab_row->product_category_template_tab_youtube_id}}" @endif>
                            <img src="{{url('/')}}/assets/images/product-category/{{$product_category_tab_row->product_category_template_tab_image}}" alt="{{$product_category_tab_row->product_category_template_tab_caption}}" class="img-fluid">
                            @if($product_category_tab_row->product_category_template_tab_media_type == 2 && !empty($product_category_tab_row->product_category_template_tab_youtube_id))
                            <span class="play"><img src="{{url('/')}}/assets/images/home/play-icon.png" alt="Play video" class="img-fluid"></span>
                            @endif
                        </figure>
                    </div>
                    <div class="col-12 col-md-6">
                        <header>
                            <h3 class="primary-heading">{{$product_category_tab_row->product_category_template_tab_caption}}</h3>
                            <details>
                                <summary>{!!nl2br($product_category_tab_row->product_category_template_tab_description)!!}</summary>0
                            </details>
                            @if(!empty($product_category_tab_row->product_category_template_tab_button_name) && !empty($product_category_tab_row->product_category_template_tab_button_link))
                            <a href="{{$product_category_tab_row->product_category_template_tab_button_link}}" class="link">{{$product_category_tab_row->product_category_template_tab_button_name}}</a>
                            @endif
                        </header>
                    </div>
                </div>
            </article>
            @php
            $i++;
            @endphp
            @endforeach
        </div>
    </section>
</article>
@endif