<? 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);
?>
<section class="page-section page-section--dark">
    <div class="products-solutions products-solutions--dark" data-tabs="parent" data-delay="100">
        <div class="container">
           <div class="products-solutions__inner">
                <div class="products-solutions__aside">
                    <div class="section-title products-solutions__header section-title--dark">
                        <div class="section-title__wrap">
                            <p class="section-title__badge"><?=$arResult['TAG']?></p>
                            <h2 data-animate="title"
                                class="title title--h2 section-title__title words lines splitting is-show"><?=$arResult['TITLE']?></h2>
                        </div>

                    </div>
                    <div class="tab-controls swiper products-solutions__tabs-controls tab-controls--dark"
                         data-tabs="controls" data-tabs-controls-slider="container">
                        <ul class="tab-controls__list swiper-wrapper" data-tabs-controls-slider="wrapper">
                            <?foreach ($arResult["SECTIONS"] as $k => $section) {?>
                                <li class="tab-controls__item swiper-slide" data-tabs-controls-slider="slide">
                                <button class="tab-controls__btn is-active" data-tabs="control" data-index="<?=$k?>">
            <span class="tab-controls__icon">
              <svg width="0.93em" height="1em" viewBox="0 0 12 13" data-icon="icon-right">

  <symbol id="ai:local:icon-right"><path fill="none" stroke="currentColor" stroke-linecap="round"
                                         stroke-linejoin="round" stroke-miterlimit="10"
                                         d="M7.215 3.465 10.25 6.5 7.215 9.535M1.75 6.5h8.415"></path></symbol><use
                          xlink:href="#ai:local:icon-right"></use>

</svg>
            </span>
                                    <span class="tab-controls__text"><?=$section['NAME']?></span>
                                </button>
                            </li>

                            <?}?>

                        </ul>
                    </div>
                    <p class="products-solutions__text">В&nbsp;составе UDV Group&nbsp;—&nbsp;собственный центр
                        перспективных исследований и&nbsp;разработок в&nbsp;области кибербезопасности</p>
                </div>
                <div class="products-solutions__main" data-tabs="content" >
                    <?foreach ($arResult["SECTIONS"] as $k => $section) {?>
                            <div class="products-solutions__element <?=($k==0)?'is-active':''?>" data-tabs="element">
                                <?foreach ($section["ITEMS"] as $item) {?>
                                    <a class="solutions-card solutions-card--dark" href="<?=$item['DETAIL_PAGE_URL']?>">
                            <div class="solutions-card__bg-pixels solutions-card__bg-pixels--pattern-1">
                                <div class="solutions-card__bg-pixels-grid">
                                    <div class="solutions-card__pixel" style="opacity: 0.75;"></div>
                                    <div class="solutions-card__pixel" style="opacity: 0;"></div>
                                    <div class="solutions-card__pixel" style="opacity: 0.75;"></div>
                                    <div class="solutions-card__pixel" style="opacity: 0;"></div>
                                    <div class="solutions-card__pixel" style="opacity: 0.75;"></div>
                                    <div class="solutions-card__pixel" style="opacity: 0.75;"></div>
                                    <div class="solutions-card__pixel" style="opacity: 0.35;"></div>
                                    <div class="solutions-card__pixel" style="opacity: 0.75;"></div>
                                    <div class="solutions-card__pixel" style="opacity: 0.35;"></div>
                                    <div class="solutions-card__pixel" style="opacity: 0;"></div>
                                    <div class="solutions-card__pixel" style="opacity: 0.75;"></div>
                                    <div class="solutions-card__pixel" style="opacity: 0;"></div>
                                    <div class="solutions-card__pixel" style="opacity: 0.75;"></div>
                                    <div class="solutions-card__pixel" style="opacity: 0;"></div>
                                    <div class="solutions-card__pixel" style="opacity: 0.75;"></div>
                                    <div class="solutions-card__pixel" style="opacity: 0.75;"></div>
                                    <div class="solutions-card__pixel" style="opacity: 0;"></div>
                                    <div class="solutions-card__pixel" style="opacity: 0.35;"></div>
                                    <div class="solutions-card__pixel" style="opacity: 0;"></div>
                                    <div class="solutions-card__pixel" style="opacity: 0.35;"></div>
                                </div>
                            </div>
                           <div class="solutions-card__bg">


                                <picture>
                                    <source srcset="<?=SITE_TEMPLATE_PATH?>/images/bg/bg-solutions-card-1-dark.webp,
                                    <?=SITE_TEMPLATE_PATH?>/images/bg/bg-solutions-card-1-dark@2x.webp 2x, <?=SITE_TEMPLATE_PATH?>/images/bg/bg-solutions-card-1-dark@3x.webp 3x"
                                            type="image/webp">
                                    <img src="<?=SITE_TEMPLATE_PATH?>/images/bg/bg-solutions-card-1-dark.png"
                                         srcset="<?=SITE_TEMPLATE_PATH?>/images/bg/bg-solutions-card-1-dark@2x.png 2x, <?=SITE_TEMPLATE_PATH?>/images/bg/bg-solutions-card-1-dark@3x.png 3x"
                                         alt="Картинка" width="434" height="399" loading="lazy">
                                </picture>
                            </div>

                            <div class="solutions-card__bg solutions-card__bg--hover">


                                <picture>
                                    <source srcset="<?=SITE_TEMPLATE_PATH?>/images/bg/bg-solutions-card-hover-dark.webp, <?=SITE_TEMPLATE_PATH?>/images/bg/bg-solutions-card-hover-dark@2x.webp 2x, <?=SITE_TEMPLATE_PATH?>/images/bg/bg-solutions-card-hover-dark@3x.webp 3x"
                                            type="image/webp">
                                    <img src="<?=SITE_TEMPLATE_PATH?>/images/bg/bg-solutions-card-hover-dark.png"
                                         srcset="<?=SITE_TEMPLATE_PATH?>/images/bg/bg-solutions-card-hover-dark@2x.png 2x, <?=SITE_TEMPLATE_PATH?>/images/bg/bg-solutions-card-hover-dark@3x.png 3x"
                                         alt="Картинка" width="434" height="399" loading="lazy">
                                </picture>
                            </div>

                            <div class="solutions-card__content">
                                <div class="solutions-card__icon">
                                     <img src="<?=CFile::GetPath($item['PROPERTIES']['IMG_CAREER']['VALUE'])?>"
                                          alt="Картинка" width="36" height="36"
                                            loading="lazy">


                                </div>
                                <h3 class="solutions-card__title"><?=$item['PROPERTIES']['NAME_CAREER']['VALUE']?></h3>
                                <?if (is_array($item['PROPERTIES']['MP_PREVIEW_TEXT']['~VALUE'])){?>
                                    <p class="solutions-card__text"><?=$item['PROPERTIES']['MP_PREVIEW_TEXT']['~VALUE']['TEXT']?></p>
                                <?}?>
                            </div>
                        </a>
                                <?}?>
                            </div>
                    <?}?>
                </div>
            </div>

        </div>
    </div>

</section>
