ivan

<?php
/**
 * Template Name: LANG_CP_LISTVIEW_STYLE_TILES
 * Template Type: content
 * Template Options: {«cols»: «4»}
 */
// Встраиваем CSS и JS один раз на странице
static $icms_grid_css_injected = false;
if (!$icms_grid_css_injected) {
    $icms_grid_css_injected = true;
    echo '<style>';
    echo '
    .icms-tiles-template .icms-grid-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:16px 0}
    .icms-tiles-template .icms-grid-container .icms-grid-card{background:#fff;border:1px solid #e9ecef;border-radius:8px;box-shadow:0 2px 8px rgba(100,52,245,0.15);transition:all .2s ease;min-height:320px;display:flex;cursor:pointer}
    .icms-tiles-template .icms-grid-card:hover{box-shadow:0 6px 16px rgba(100,52,245,0.25);border-color:#6434f5}
    .icms-tiles-template .icms-content-fields{display:flex;flex-direction:column;padding:12px;height:100%!important}
    .icms-tiles-template .field.f_title{flex-shrink:0;margin-bottom:12px}
    .icms-tiles-template .field.f_title h3{font-size:1rem;font-weight:600;line-height:1.35;color:#212529;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:2.7em;margin:0}
    .icms-tiles-template .field.f_title h3 a{color:inherit;text-decoration:none}
    .icms-tiles-template .field:not(.f_title){flex-grow:1;margin-bottom:10px;overflow:hidden}
    .icms-tiles-template .field .title_left,
    .icms-tiles-template .field .title_top{font-weight:500;margin-bottom:3px;font-size:.85rem;color:#6c757d}
    .icms-tiles-template .field .value{color:#495057;line-height:1.4;font-size:.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    
    /* Центрирование изображений */
    .icms-tiles-template .field.f_photo img,
    .icms-tiles-template .field.f_image img,
    .icms-tiles-template .field.f_cover img,
    .icms-tiles-template .field.f_gallery img{display:block;margin:0 auto 8px auto;max-width:100%;height:auto;border-radius:4px}
    
    .icms-tiles-template .tags_bar,
    .icms-tiles-template .info_bar{flex-shrink:0;margin-top:auto;padding-top:12px;border-top:1px solid #f5f5f5;font-size:.75rem;color:#6c757d}
    .icms-tiles-template .icms-btn-tag{font-size:.7rem!important;padding:2px 6px!important}
    
    /* Адаптивность */
    @media (max-width:575px){
        .icms-tiles-template .icms-grid-container{grid-template-columns:1fr}
    }
    @media (min-width:576px) and (max-width:1199px){
        .icms-tiles-template .icms-grid-container{grid-template-columns:repeat(2,1fr)}
    }
    @media (min-width:1200px){
        .icms-tiles-template .icms-grid-container{grid-template-columns:repeat(4,1fr)}
    }
    ';
    echo '</style>';
    
    // JavaScript для кликабельных карточек
    echo '<script>';
    echo '
    document.addEventListener(«DOMContentLoaded», function() {
        // Добавляем обработчик для всех карточек с data-url
        document.querySelectorAll(".icms-grid-card[data-url]").forEach(function(card) {
            card.addEventListener(«click», function(e) {
                // Проверяем, что клик не по ссылке или кнопке
                if (!e.target.closest(«a») && !e.target.closest(".dropdown") && !e.target.closest(«button»)) {
                    window.location.href = this.getAttribute(«data-url»);
                }
            });
        });
    });
    ';
    echo '</script>';
}
?>
<?php
if($ctype['options']['list_show_filter']) {
    $this->renderAsset('ui/filter-panel', [
        'css_prefix'   => $ctype['name'],
        'page_url'     => $page_url,
        'fields'       => $fields,
        'props_fields' => $props_fields,
        'props'        => $props,
        'filters'      => $filters,
        'ext_hidden_params' => $ext_hidden_params,
        'is_expanded'  => $ctype['options']['list_expand_filter']
    ]);
}
?>
<?php if (!$items){ ?>
    <p class=«alert alert-info mt-3 alert-list-empty»>
        <?php if(!empty($ctype['labels']['many'])){ ?>
            <?php echo sprintf(LANG_TARGET_LIST_EMPTY, $ctype['labels']['many']); ?>
        <?php } else { ?>
            <?php echo LANG_LIST_EMPTY; ?>
        <?php } ?>
    </p>
<?php return; } ?>

<!-- Обёртка с уникальным классом -->
<div class=«icms-tiles-template»>
    <div class=«content_list tiled <?php echo $ctype['name']; ?>_list icms-grid-container»>

        <?php foreach($items as $item){ ?>
            <?php 
            // Определяем URL для карточки
            $item_url = (!empty($item['is_private_item']) || !$ctype['options']['item_on'])? '': href_to($ctype['name'], $item['slug'].'.html');
            ?>

            <!-- Карточка с data-url атрибутом -->
            <div class=«tile <?php echo $ctype['name']; ?>_list_item icms-grid-card<?php echo $item_url? ' cursor-pointer': ''; ?>»<?php echo $item_url? ' data-url="'.htmlspecialchars($item_url).'"': ''; ?>>
                <div class=«icms-content-fields d-flex flex-column h-100»>
                <?php foreach($item['fields'] as $field){ ?>

                    <div class=«field ft_<?php echo $field['type']; ?> f_<?php echo $field['name']; ?> <?php html($field['options']['wrap_style'].' '.$field['options']['wrap_style_list']); ?>»>

                        <?php if ($field['label_pos'] !== 'none'){ ?>
                            <div class=«title_<?php echo $field['label_pos']; ?>»>
                                <?php echo string_replace_svg_icons($field['title']). ($field['label_pos']==='left'? ': ': ''); ?>
                            </div>
                        <?php } ?>

                        <?php if ($field['name'] === 'title' && $ctype['options']['item_on']){ ?>
                            <h3 class=«h5 m-0»>
                            <?php if (!empty($this->menus['list_actions_menu'])){ ?>
                                <div class=«dropdown float-end»>
                                    <button class=«btn p-0» type=«button» data-toggle=«dropdown»>
                                        <?php html_svg_icon('solid', 'ellipsis-vertical', 12); ?>
                                    </button>
                                    <ul class=«dropdown-menu»>
                                        <?php foreach($this->menus['list_actions_menu'] as $menu){ ?>
                                            <li>
                                                <a class=«dropdown-item <?php echo isset($menu['options']['class'])? $menu['options']['class']: ''; ?>» href="<?php echo string_replace_keys_values($menu['url'], $item); ?>" title="<?php html($menu['title']); ?>">
                                                    <?php echo $menu['title']; ?>
                                                </a>
                                            </li>
                                        <?php } ?>
                                    </ul>
                                </div>
                            <?php } ?>
                            <?php if ($item['parent_id']){ ?>
                                <a class=«parent_title small text-muted» href="<?php echo rel_to_href($item['parent_url']); ?>"><?php html($item['parent_title']); ?></a>
                                →
                            <?php } ?>

                            <?php if (!empty($item['is_private_item'])) { ?>
                                <?php html($item[$field['name']]); ?>
                                <span class=«text-muted ms-1» title="<?php html($item['private_item_hint']); ?>">
                                    <?php html_svg_icon('solid', 'lock', 10); ?>
                                </span>
                            <?php } else { ?>
                                <a href="<?php echo $item_url; ?>">
                                    <?php html($item[$field['name']]); ?>
                                </a>
                                <?php if ($item['is_private']) { ?>
                                    <span class=«text-muted ms-1» title="<?php echo LANG_PRIVACY_HINT; ?>">
                                        <?php html_svg_icon('solid', 'lock', 10); ?>
                                    </span>
                                <?php } ?>
                            <?php } ?>
                            </h3>
                        <?php } else { ?>
                            <div class=«value»>
                                <?php echo $field['html']; ?>
                            </div>
                        <?php } ?>
                    </div>
                <?php } ?>

                <?php if (!empty($item['show_tags'])){ ?>
                    <div class=«tags_bar»>
                        <?php echo html_tags_bar($item['tags'], 'content-'.$ctype['name'], 'btn btn-xs btn-outline-secondary icms-btn-tag px-2 py-1', ''); ?>
                    </div>
                <?php } ?>

                <?php if (!empty($item['info_bar'])){ ?>
                    <div class=«info_bar p-0 bg-transparent border-0»>
                        <?php foreach($item['info_bar'] as $bar){ ?>
                            <div class=«bar_item <?php echo !empty($bar['css'])? $bar['css']: ''; ?>» title="<?php html(!empty($bar['title'])? $bar['title']: ''); ?>">
                                <?php if (!empty($bar['icon'])){ ?>
                                    <?php html_svg_icon('solid', $bar['icon'], 10); ?>
                                <?php } ?>
                                <?php if (!empty($bar['href'])){ ?>
                                    <a class=«stretched-link» href="<?php echo $bar['href']; ?>">
                                        <?php echo $bar['html']; ?>
                                    </a>
                                <?php } else { ?>
                                    <?php echo $bar['html']; ?>
                                <?php } ?>
                            </div>
                        <?php } ?>
                    </div>
                <?php } ?>
                </div>
            </div>

        <?php } ?>

    </div>
</div>

<?php echo html_pagebar($page, $perpage, $total, $page_url, $filter_query); ?>