<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);
?>

<script>
    angular.module('incantoApp').value('JS_FILTER',<?=CUtil::PhpToJSObject($arResult["ITEMS"],false,true,true)?>);
</script>
<div class="lazy__wrap lazy__wrap--1">
    <div class="heading">
        <h1><?$APPLICATION->ShowTitle()?><span>{{itemsCount}}</span></h1>
    </div>
<div class="filter">
    <form name="<?echo $arResult["FILTER_NAME"]."_form"?>" action="<?echo $arResult["FORM_ACTION"]?>" method="get">
        <?foreach($arResult["HIDDEN"] as $arItem):?>
            <input type="hidden" name="<?echo $arItem["CONTROL_NAME"]?>" id="<?echo $arItem["CONTROL_ID"]?>" value="<?echo $arItem["HTML_VALUE"]?>" />
        <?endforeach;?>
        <div class="filter__inner">

            <div class="filter__body js-filter js-popup">
                <div class="filter__body_inner">
                    <div class="filter__body_body js-filter-body">
                        <div class="js-scroll-on-mobile">
                            <div class="filter__body_table medium-table">
                                <div class="show-on-desktop">
                                    <span><?=GetMessage("OW_CSF_T_TITLE")?></span>
                                    <div class="btn__wrap" ng-class="needShowClearAll() ? 'is-show' : ''">
                                        <input type="button" class="btn btn--gray" value="Сбросить всё" ng-hide="selectedParams | isEmpty" ng-click="clearAll()" >
                                    </div>
                                </div>
<?
foreach($arResult["ITEMS"] as $key=>$arItem)
{
    ?>
    <div>
        <div class="select js-select">
            <div class="select__head js-select-head">
                <?=$arItem["name"]?>
                <span class="i-bkt-b"></span>
            </div>
            <div class="select__body js-select-body">
                <div class="select__body_inner">
                    <div class="small-table medium-block">
                        <div>
                            <?
                            switch ($arItem["type"]) {
                                case "tiptsveta"://CHECKBOXES_WITH_PICTURES
                                    ?>
                                    <div class="list checkbox--color">
                                        <div class="list__head js-select-body-head"><?=$arItem["name"]?><span class="i-bkt-t"></span></div>
                                        <div class="list__body js-select-body-body">
                                            <div class="medium-table">
                                                <div>
                                                    <div class="list__item" ng-repeat="item in <?=$key?>Sorted = filter.<?=$key?>.items | orderObjectBy:'value'" >
                                                        <input style="display: none"
                                                            type="checkbox"
                                                            ng-model="filter.<?=$key?>.items[item.control_name].checked"
                                                            ng-change="setFilterItem('<?=$key?>')"
                                                           ng-disabled="filter.<?=$key?>.items[item.control_name].disabled"
                                                            id="s-{{item.control_name}}"
                                                        />

                                                        <label for="s-{{item.control_name}}">
                                                            <span ng-style="{background: '{{item.rgb}}'}"></span>
                                                            {{item.value}}
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <?
                                break;
                            default://CHECKBOXES
                            ?>
                            <div class="list">
                                <div class="list__head js-select-body-head"><?=$arItem["name"]?><span class="i-bkt-t"></span></div>
                                <div class="list__body js-select-body-body">
                                    <div class="medium-table" ng-init="<?=$key?>MaxColumn = getMaxColumn(filter.<?=$key?>.itemsSorted.length);<?=$key?>Columns = columnize(filter.<?=$key?>.itemsSorted, <?=$key?>MaxColumn)">
                                        <div ng-repeat="row in <?=$key?>Columns">
                                            <div class="list__item" ng-repeat="item in row" >
                                                <input
                                                    type="checkbox"
                                                    ng-model="filter.<?=$key?>.items[item.control_name].checked"
                                                    ng-change="setFilterItem('<?=$key?>')"
                                                    ng-disabled="filter.<?=$key?>.items[item.control_name].disabled"
                                                    id="s-{{item.control_name}}"
                                                />
                                                <label for="s-{{item.control_name}}">
                                                    {{item.value}}
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                <?
                            }
                            ?>
                        </div>
                    </div>
                </div>
            </div>
            <div class="select__footer js-select-footer">
                <div class="list">
                    <div class="list__item is-show" ng-repeat="item in filter.<?=$key?>.itemsSorted | filterObject: 'checked': true">
                        <div class="text-overflow">{{item.value}}</div>
                        <a href="javascript:void(0)" class="i-close-bold" ng-click="clear('<?=$key?>',item.control_name)"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?
}
?>

                            </div>
                        </div>
                    </div>
                    <div class="filter__body_footer show-on-mobile">
                        <div class="btn__wrap">
                            <input type="button" class="btn" value="<?=GetMessage("OW_CSF_T_SUBMIT")?>" ng-click="setFilter(1,1)">
                            <input type="button" class="btn btn--gray" value="<?=GetMessage("OW_CSF_T_RESET")?>" ng-click="clearAll()" ng-hide="selectedParams | isEmpty">
                        </div>
                    </div>
                    <a href="javascript:void(0)" class="i-close" ng-close-popup id="js-filter-close"></a>
                </div>
            </div>

            <div class="filter__footer">
                <div class="btn__wrap show-on-mobile">
                    <a href="javascript:void(0)" class="btn btn--gray js-filter-show js-filter-title"><?=GetMessage("OW_CSF_T_TITLE")?>&nbsp;<span ng-if="checkedItems>0">{{checkedItems}}</span></a>
                </div>
                <div class="btn__wrap show-on-tablet" ng-class="needShowClearAll() ? 'is-show' : ''">
                    <input type="reset" value="<?=GetMessage("OW_CSF_T_RESET")?>" class="btn btn--gray" ng-click="clearAll()" >
                </div>
                <div class="filter__sort">
                    <span><?=GetMessage("OW_CSF_T_SORT")?></span>
                    <a href="javascript:void(0);" ng-repeat="(sortKey,sortItem) in sortVariants" ng-click="setSort(sortKey, $event)" ng-class="(sortKey == sort.by && symbol !='') ? 'is-active' : ''">
                    <span >{{symbol}}</span>
                    {{sortItem.name}}</a>
                </div>

            </div>

        </div>
    </form>
</div>
</div>