<div
    data-controller="blocks/twintag-labels"
    class="twintag-labels twintag-labels--{{ $block->article_type }} block-margin-top--{{ $block->margin_type_top }} block-margin-bottom--{{$block->margin_type_bottom}}"
>
    @if ($block->anchor_id )
        <div id="{{ $block->anchor_id }}" class="anchor-offset"></div>
    @endif
    <div class="twintag-labels__wrapper">
        <div class="twintag-labels__container">
            <div class="twintag-labels__header">
                <h2 class="twintag-labels__title">
                    {{ $block->block_title }}
                </h2>
                <div class="twintag-labels__content">
                    {!! $block->content !!}
                </div>
            </div>
            <div class="twintag-labels__filters">
                <div>
                    <div
                        class="articles-filter-block__filter"
                        data-role="filter"
                        data-id="type"
                    >
                        <div class="articles-filter-block__filter-wrapper">
                            <a class="articles-filter-block__filter-open" data-role="openFilter">
                                <span class="articles-filter-block__filter-selected-item">Type: <span data-role="selected">All</span></span>
                            </a>
                            <div class="articles-filter-block__filter-options" data-role="options">
                                <ul>
                                    <li>
                                        <a
                                            class="articles-filter-block__filter-option"
                                            data-value=""
                                            data-label="All"
                                            data-filter="type"
                                            data-action="filter"
                                        >
                                            All
                                        </a>
                                    </li>
                                    <li>
                                        <a
                                            class="articles-filter-block__filter-option"
                                            data-value="Product"
                                            data-label="Product"
                                            data-filter="type"
                                            data-action="filter"
                                        >
                                            Product
                                        </a>
                                    </li>
                                    <li>
                                        <a
                                            class="articles-filter-block__filter-option"
                                            data-value="Service"
                                            data-label="Service"
                                            data-filter="type"
                                            data-action="filter"
                                        >
                                            Service
                                        </a>
                                    </li>
                                    <li>
                                        <a
                                            class="articles-filter-block__filter-option"
                                            data-value="Company"
                                            data-label="Company"
                                            data-filter="type"
                                            data-action="filter"
                                        >
                                            Company
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div
                        class="articles-filter-block__filter"
                        data-role="filter"
                        data-id="level"
                    >
                        <div class="articles-filter-block__filter-wrapper">
                            <a class="articles-filter-block__filter-open" data-role="openFilter">
                                <span class="articles-filter-block__filter-selected-item">Level: <span data-role="selected">All</span></span>
                            </a>
                            <div class="articles-filter-block__filter-options" data-role="options">
                                <ul>
                                    <li>
                                        <a
                                            class="articles-filter-block__filter-option"
                                            data-value=""
                                            data-label="All"
                                            data-filter="level"
                                            data-action="filter"
                                        >
                                            All
                                        </a>
                                    </li>
                                    <li>
                                        <a
                                            class="articles-filter-block__filter-option"
                                            data-value="Bronze"
                                            data-label="Bronze"
                                            data-filter="level"
                                            data-action="filter"
                                        >
                                        Bronze
                                        </a>
                                    </li>
                                    <li>
                                        <a
                                            class="articles-filter-block__filter-option"
                                            data-value="Silver"
                                            data-label="Silver"
                                            data-filter="level"
                                            data-action="filter"
                                        >
                                            Silver
                                        </a>
                                    </li>
                                    <li>
                                        <a
                                            class="articles-filter-block__filter-option"
                                            data-value="Gold"
                                            data-label="Gold"
                                            data-filter="level"
                                            data-action="filter"
                                        >
                                            Gold
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="twintag-labels__input-form" data-role="search">
                        <span class="twintag-labels__icon-search">
                            @include('frontend.svg.search')
                        </span>
                        <input type="text" name="twintag_search" class="twintag-labels__search" maxlength="50" value="" placeholder="Search Clients"/>
                    </div>
                </div>
            </div>
            <div class="twintag-labels__list" data-role="list">
            </div>
            <div class="twintag-labels__no-results" data-role="noresults">
                No Labels Found
            </div>
            <div class="twintag-labels__loading loading" data-role="loading">
                <span class="fa fa-cog fa-spin"></span>
            </div>
            <div class="twintag-labels__more-list" data-role="more">
                <a href="#" class="std-button std-button--large" data-action="more">@lang('frontend.more')</a>
            </div>
        </div>
    </div>
</div>
