<?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="principle-block block">
    <div class="principle-block__content container">
        <div class="row">
            <div class="col-12 col-lg-5">
                <h2 class="principle-block__title block__title"><?= $arResult['NAME']; ?></h2>
                <div class="principle-block__text wrap-container">
                    <div class="wrap-block" data-wrap-height="88">
                        <p><?= $arResult['DETAIL_TEXT']?></p>
						<?if(isset($arResult['DISPLAY_PROPERTIES']['LIST_ITEM'])){?>
							<div class="principle-block__check-items check-items">
								<? foreach ($arResult['DISPLAY_PROPERTIES']['LIST_ITEM']['VALUE'] as $listparam): ?>
									<? if (!$listparam)
										continue; ?>
									<div class="check-item"><?= $listparam; ?></div>
								<? endforeach; ?>
							</div>
						<?}?>
                    </div>
                    <div class="wrap-btn"></div>
                </div>
            </div>
            <div class="col-12 col-lg-7">
                <div class="principle-block__video video">
                    <div class="video__preview pic-wrapper">
						<?if(isset($arResult['VIDEO_PREVIEW'])){?>
							<img class="_center" src="<?= $arResult['VIDEO_PREVIEW']['SRC']?>" alt="-" loading="lazy">
						<?}?>
                        <button class="video__play-btn">
							<img src="<?= SITE_TEMPLATE_PATH . '/img/icons/play-btn.svg'; ?>" width="60" height="60" alt="PLAY" loading="lazy">
						</button>
                        <div class="card-panel">
                            <div class="card-panel__text">
                                <div class="card-panel__bg"></div>
                                <h3 class="card-panel__title"><?= htmlspecialcharsBack($arResult['DISPLAY_PROPERTIES']['HEADER_VIDEO']['VALUE']['TEXT']) ?></h3>
                                <div class="card-panel__subtitle"><?= htmlspecialcharsBack($arResult['DISPLAY_PROPERTIES']['SUBHEADER_VIDEO']['VALUE']['TEXT']) ?></div>
                            </div>
                        </div>
                    </div>
                    <div class="video__content">
						<iframe width="600" height="450" src="<?= $arResult['DISPLAY_PROPERTIES']['VIDEO_IFRAME']['VALUE']?>"
                            title="YouTube video player" 
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen loading="lazy">
						</iframe>
					</div>
                </div>
            </div>
        </div>
    </div>
</section>