<?php if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die();

use Bitrix\Main\Localization\Loc;
use intec\core\helpers\Html;
use intec\core\platform\main\Component;
use intec\template\helpers\Picture;

/**
 * @var array $arResult
 * @var CBitrixComponentTemplate $this
 */

$this->setFrameMode(true);

$templateId = Html::getUniqueId(null, Component::getUniqueId($this));

$visual = $arResult['VISUAL'];

$picture = Picture::getInstance()
    ->setResizeType(Picture::$resizeExact)
    ->setLazyLoad($visual['LAZYLOAD']['USE'])
    ->setOriginal(550, 410)
    ->addSources([
        ['media' => 1024, 'width' => 310, 'height' => 232],
        ['media' => 768, 'width' => 350, 'height' => 262],
        ['media' => 500, 'width' => 460, 'height' => 345],
    ]);
?>
<div class="ns-bitrix c-photo-sections-top c-photo-sections-top-gallery-1" id="<?= $templateId ?>">
    <div class="template-container">
        <div class="flex flex--wrap ind-m-ng-h-15 ind-500-m-ng-h-12">
            <?php foreach ($arResult['SECTIONS'] as $section) { ?>
                <?php

                    if(count($section['GALLERY']) == 1 && is_object($section['GALLERY'][0]))
                        continue;
                    if(count($section['GALLERY']) == 0)
                        continue;

                    $id = $templateId . '_' . $section['ID'];
                    $areaId = $this->GetEditAreaId($id);
                    $this->AddEditAction($id, $section['EDIT_LINK']);
                    $this->AddDeleteAction($id, $section['DELETE_LINK']);

                    $isSlider = count($section['GALLERY']) > 1;

                ?>
                <?= Html::beginTag('div', [
                    'class' => Html::cssClassFromArray([
                        'photo-sections-top-section-container' => true,
                        'flex-item' => true,
                        'flex-item-' => [
                            $visual['COLUMNS'] => true,
                            '1024-3' => $visual['COLUMNS'] > 3,
                            '768-2' => true,
                            '500-1' => true
                        ]
                    ], true)
                ]) ?>
                    <?= Html::beginTag('a', [
                        'class' => [
                            'photo-sections-top-section',
                            'ind' => [
                                'm-15',
                                '500-m-12',
                                '500-m-t-15'
                            ],
                            'ui-round-tiny'
                        ],
                        'href' => $section['SECTION_PAGE_URL'],
                        'data' => [
                            'role' => 'photo.item',
                            'loaded' => $isSlider ? 'false' : 'true',
                            'slider' => $isSlider ? 'true' : 'false'
                        ],
                        'id' => $areaId
                    ]) ?>
                        <div class="ui-ratio-4x3">
                            <?= Html::beginTag('div', [
                                'class' => Html::cssClassFromArray([
                                    'photo-sections-top-section-pictures' => $isSlider,
                                    'swiper' => $isSlider,
                                    'ui' => [
                                        'ratio-4x3' => !$isSlider,
                                        'img-cover' => !$isSlider
                                    ]
                                ], true),
                                'data-role' => $isSlider ? 'photo.item.slider' : null
                            ]) ?>
                                <?php if ($isSlider) { ?>
                                    <?= Html::beginTag('div', [
                                        'class' => 'swiper-wrapper'
                                    ]) ?>
                                <?php } ?>
                                <?php if (!empty($section['GALLERY'])) { ?>
                                    <?php foreach ($section['GALLERY'] as $pictureArray) { ?>
                                        <?= Html::beginTag('div', [
                                            'class' => Html::cssClassFromArray([
                                                'swiper-slide' => $isSlider,
                                            ], true)
                                        ]) ?>
                                            <picture class="photo-sections-top-section-picture ui-img-cover ui-ratio-4x3">
                                                <?= $picture->setFile($pictureArray)->render($section['NAME'], $section['NAME']) ?>
                                            </picture>
                                        <?= Html::endTag('div') ?>
                                    <?php } ?>
                                <?php } else { ?>
                                    <?= Html::beginTag('div', [
                                        'class' => Html::cssClassFromArray([
                                            'swiper-slide' => $isSlider,
                                            'ui-ratio-4x3' => true,
                                            'ui-img-cover' => true
                                        ], true)
                                    ]) ?>
                                        <?= Html::img($picture->getStub(), [
                                            'class' => 'photo-sections-top-section-picture'
                                        ]) ?>
                                    <?= Html::endTag('div') ?>
                                <?php } ?>
                                <?php if ($isSlider) { ?>
                                    <?= Html::endTag('div') ?>
                                <?php } ?>
                            <?= Html::endTag('div') ?>
                            <?php if ($isSlider) { ?>
                                <?= Html::tag('div', null, [
                                    'class' => [
                                        'photo-sections-top-section-navigation',
                                        'flex',
                                        'flex--a-v-end',
                                        'ind-p-24'
                                    ],
                                    'data-role' => 'photo.item.navigation'
                                ]) ?>
                                <?= Html::beginTag('span', [
                                    'class' => [
                                        'photo-sections-top-loader',
                                        'flex',
                                        'flex-' => [
                                            'o-vertical',
                                            'a-h-end'
                                        ],
                                        'ui-bg-ntr-sb',
                                        'ind' => [
                                            'p-24',
                                            '768-p' => [
                                                'v-16',
                                                'h-12'
                                            ],
                                            '500-p-24'
                                        ]
                                    ],
                                    'data-role' => 'photo.item.loader'
                                ]) ?>
                                    <span class="photo-sections-top-loader-count ui-bg-ntr-qd ind-m-b-4 ui-500-hidden"></span>
                                    <span class="photo-sections-top-loader-name ui-bg-ntr-qd ui-500-hidden"></span>
                                    <span class="photo-sections-top-loader-navigation ui-bg-ntr-qd"></span>
                                <?= Html::endTag('span') ?>
                            <?php } ?>
                        </div>
                        <?= Html::beginTag('span', [
                            'class' => [
                                'photo-sections-top-section-information',
                                'flex',
                                'flex-' => [
                                    'a-h-end',
                                    'o-vertical',
                                    '500-o-vertical-reverse'
                                ],
                                'ind' => [
                                    'p-24',
                                    '768-p' => [
                                        'v-16',
                                        'h-12'
                                    ],
                                    '500-p' => [
                                        'h-none',
                                        'b-none'
                                    ]
                                ]
                            ]
                        ]) ?>
                            <?php if (empty($section['ITEMS'])) { ?>
                                <span class="flex-item ui-text-ntr-qd ui-text-small ind-m-b-4">
                                    <?= Loc::getMessage('C_PHOTO_SECTIONS_TOP_GALLERY_1_TEMPLATE_SECTION_EMPTY') ?>
                                </span>
                            <?php } ?>
                            <?= Html::tag('span', count($section['GALLERY']) . ' ' . Loc::getMessage('C_PHOTO_SECTIONS_TOP_GALLERY_1_PHOTO'), [
                                'class' => [
                                    'photo-sections-top-section-count',
                                    'flex-item',
                                    'ui-text' => [
                                        'height-4',
                                        'ntr-qd'
                                    ],
                                    'ind' => [
                                        'p-b-4',
                                        '500-p' => [
                                            'b-none',
                                            't-6'
                                        ]
                                    ]
                                ]
                            ]) ?>
                            <?= Html::tag('span', $section['NAME'], [
                                'class' => [
                                    'photo-sections-top-section-name',
                                    'flex-item',
                                    'ui-text' => [
                                        'height-4',
                                        'ntr-b'
                                    ]
                                ]
                            ]) ?>
                        <?= Html::endTag('span') ?>
                    <?= Html::endTag('a') ?>
                <?= Html::endTag('div') ?>
            <?php } ?>
            <?php unset($section) ?>
        </div>
    </div>
</div>
<?php include(__DIR__ . '/parts/script.php') ?>