<div class="printify-data grid-1col" ng-class="{'grid-3col' : is3Cols(item.printify_state.providerOptions)}">
    <div class="choose-current-order" ng-click="openSearchBlueprint(item, printifyCurrentOrder)">
        <div ng-if="!item.printify_state.blueprint" class="select chosse-input">Choose Blueprint ...</div>
        <div ng-if="item.printify_state.blueprint" class="select chosse-input">@{{ item.printify_state.blueprint.title }}</div>
    </div>

    <div class="add-option-padding" ng-repeat="(type, data) in item.printify_state.providerOptions" 
        {{-- ng-class="{'add-option-padding': $index > 0}" --}}>
        <select class="select" ng-change="changeVariantOption(item)" ng-model="item.printify_state.options[type]" ng-if="type != 'color'" class="form-control chosse-input">
            <option value="">-- Choose @{{ type }} --</option>
            <option ng-repeat="option in data" value="@{{ option.id }}">
                @{{ option.label }}
            </option>
        </select>

        <div class="dropdown" ng-if="type == 'color'">
            <button
                class="select chosse-input dropdown-toggle" 
                data-toggle="dropdown"
                type="button"
                id="btnSearchColor-@{{ item.id }}"
                ng-click="openSearchColors(item)">
                <div class="preview-color-box" ng-if="item.printify_state.color_id">
                    <span ng-if="item.printify_state.selectedColor.colors && item.printify_state.selectedColor.colors.length" class="preview-color" style="background-color: @{{ item.printify_state.selectedColor.colors[0].hex }}"></span>
                    @{{ item.printify_state.selectedColor.label }}
                </div>
                <span ng-if="!item.printify_state.color_id">-- Choose Color --</span>
            </button>
            <div class="dropdown-menu">
                <div>
                    <input type="text"
                        id="inputSearchColor-@{{ item.id }}"
                        ng-model="item.printify_state.colorSearch"
                        ng-keyup="searchColors(item)"
                        placeholder="Search colors"
                        class="form-control chosse-input dropdown-toggle">
                </div>
                <ul class="dropdown-scroll-content">
                    <li ng-repeat="option in item.printify_state.sortedColors" ng-click="chooseColor(option, item)">
                        <span ng-if="option.colors && option.colors.length" class="preview-color" 
                            style="background-color: @{{ option.colors[0].hex }}"></span>  
                            @{{ option.label }}
                    </li>
                </ul>
            </div>
        </div>
    </div>
    
    <div class="search-result search-blue-print" ng-if="checkOpenSearch(item)">
        <div class="form-group">
            <div class="search-result-title">Search for:
                <div ng-if="pritifyState.search_type == 'blueprint'"><strong>Blueprint</strong></div>
                <div ng-if="pritifyState.search_type == 'print_provider'"><strong>Print Provider</strong></div>
                <div ng-if="pritifyState.search_type == 'variant'"><strong>Variant</strong></div>
                <img ng-if='pritifyState.searching' class="small-img-loading"
                    style="margin-left: 5px" src="@asset('print-suppliers/images/loading-1.gif')">
            </div>
            <input 
                id="searchInput-@{{ item . id }}" type="text"
                ng-model="pritifyState.search" placeholder="Enter keyword"
                class="form-control"
                ng-keyup="routeFetch()">
        </div>
        <div style="max-height: 200px; overflow-y: auto">
            <ul class="list-group list-group-result" style="margin-bottom: 0;">
                <li style="cursor: pointer;" ng-repeat="result in searchResult"
                    ng-click="chooseResult(result, item)" class="list-group-item">
                    @{{ result.title }} | @{{ result.brand }} - @{{ result.model }}
                </li>
            </ul>
        </div>
    </div>

</div>