<? 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);
if ($_GET['hash']){
    $hash=\Cutil::translit((string)$_GET['hash'],"ru",["replace_space"=>"-",
        "replace_other"=>"-"]);
    ?>
    <style>
        .news__list li {
            display: none;
        }
        .news__list li[data-hash="<?=$hash?>"] {
            display: block;
        }
    </style>
    <?php

}

?>

    <div id="page">
        <ul class="news__list is-show-half" >
            <?php foreach ($arResult["ITEMS"] as $arItem) : ?>
                <?
                $imgSrcMob=CFile::GetPath($arItem["PROPERTIES"]['PREVIEW_PICTURE_MOB']['VALUE']);
                $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
                $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
                if($arItem['PROPERTIES']["HASHTAG"]["VALUE"]){
                    $hash=\Cutil::translit((string)$arItem['PROPERTIES']["HASHTAG"]["VALUE"],"ru",["replace_space"=>"-","replace_other"=>"-"]);

                } else $hash="";
                ?>
                <li class="news__item" data-hash="<?=$hash?>"  id="<?= $this->GetEditAreaId($arItem['ID']); ?>">
                    <div class="article-card">
                        <a class="article-card__inner" href="<?= $arItem['DETAIL_PAGE_URL'] ?>">
                            <?if ($arItem['PREVIEW_PICTURE']['SRC']){
                                $imgSrcMob=CFile::GetPath($arItem['PROPERTIES']['PREVIEW_PICTURE_MOB']['VALUE']);
                                ?>
                                <div class="article-card__image">
                                    <picture>
                                        <source media="(min-width: 768px)"
                                                srcset="<?= $arItem['PREVIEW_PICTURE']['SRC'] ?>, <?= $arItem['PREVIEW_PICTURE']['SRC'] ?>, <?= $arItem['PREVIEW_PICTURE']['SRC'] ?>"
                                                type="image/webp">
                                        <source media="(max-width: 767px)"
                                                srcset="<?= $imgSrcMob ?>, <?= $imgSrcMob ?>, <?= $imgSrcMob ?>"
                                                type="image/webp">
                                        <img src="<?= $arItem['PREVIEW_PICTURE']["SRC"] ?>"
                                             srcset="<?= $arItem['PREVIEW_PICTURE']['SRC'] ?>, <?= $arItem['PREVIEW_PICTURE']['SRC'] ?>"
                                             alt="<?= $arItem['NAME'] ?>" width="148" height="101" loading="lazy">
                                    </picture>

                                </div>
                            <?}?>
                            <h2 class="title article-card__title"><?= $arItem['NAME'] ?> </h2>
                            <div class="article-card__text">
                                <p><?= $arItem['PREVIEW_TEXT'] ?> </p>
                            </div>
                            <div class="item-info item-info--news-list">
                                <div class="item-info__wrap">
                                    <?if($arItem['PROPERTIES']["HASHTAG"]["VALUE"]):?>
                                        <p class="item-info__category"><?= $arItem['PROPERTIES']["HASHTAG"]["VALUE"]
                                        ?></p>
                                    <?endif;?>
                                    <time class="item-info__date"
                                          datetime="<?= $arItem['PROPERTIES']["DATE"]["VALUE"] ?>">
                                        <?= explode(' ', $arItem['PROPERTIES']["DATE"]["VALUE"])[0] ?>
                                    </time>

                                    <span class="item-info__readtime">
          <svg width="1em" height="1em" viewBox="0 0 20 20" data-icon="icon-clock">

  <use xlink:href="#ai:local:icon-clock"></use>

</svg>
            <?= $arItem['PROPERTIES']["TIME"]["VALUE"] ?> минут
        </span>
                                </div>

                            </div>
                        </a>
                    </div>
                </li>

            <?endforeach;?>

        </ul>
    </div>
    <?if ($_GET['hash']){?>
        <div class="news__bottom"></div>
    <?}?>
<?php if ($arParams["DISPLAY_BOTTOM_PAGER"]) { ?>
    <?= $arResult["NAV_STRING"] ?>
<?php } ?>