<?php $__env->startSection('content'); ?>

    <div
        class="cop"
        data-controller="pages/cop"
        data-items="<?php echo e(json_encode($items)); ?>"
        data-topics="<?php echo e(json_encode($topics)); ?>"

    >
        <div class="cop__blur-mask _show" data-role="mask"></div>

        <div class="cop__map" data-aos="simplefade" data-aos-delay="1000"></div>

        <div class="cop__initial-modal" data-role="initial-modal">
            <button class="cop__initial-modal-close" data-action="explore">
                <?php echo $__env->make('frontend.svg.icon-close', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
            </button>
            <div class="cop__logo-container">
                <img src="<?php echo e(path_asset('path.frontend.images_path') . '/logo-secundary-color.png'); ?>" alt="logo" />
            </div>
            <h2><?php echo e($object->title); ?></h2>
            <?php echo $object->summary; ?>

            <div class="cop__divider"></div>
            <div class="cop__initial-theme-container">

                <?php $__currentLoopData = $topics; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $topic): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <span class="cop__initial-theme-item" data-action="initial-filter" data-filter="theme-<?php echo e($topic['id']); ?>" data-id="<?php echo e($topic['id']); ?>">
                        <div class="_background-color theme-<?php echo e($topic['id']); ?>-color"><?php echo $topic['svg']; ?></div>
                        <?php echo e($topic['title']); ?>

                    </span>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

            </div>
            <button class="std-button cop__initial-explore-button" data-action="explore">Explore the Map <?php echo $__env->make('frontend.svg.icon-arrow-forward', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?></button>
        </div>

        <div class="cop__title-mobile" data-role="title-mobile">
            <h1><?php echo e($object->title); ?></h1>
        </div>

        <div class="cop__topics-container" data-role="topics-container">
            <div class="cop__topics-wrapper">
                <div class="cop__title">
                    <h1><?php echo e($object->title); ?></h1>
                </div>

                <?php $__currentLoopData = $topics; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $topic): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="cop__topic _theme-<?php echo e($topic['id']); ?>" data-action="filter" data-filter="theme-<?php echo e($topic['id']); ?>" data-id="<?php echo e($topic['id']); ?>">
                        <div class="cop__topic-image theme-<?php echo e($topic['id']); ?>-color">
                            <?php echo $topic['svg']; ?>

                        </div>

                        <div class="cop__topic-info">
                            <h4><?php echo e($topic['title']); ?></h4>
                            <p><?php echo $topic['shortDescription']; ?></p>
                            <a href="#" data-filter="theme-<?php echo e($topic['id']); ?>">Read more <?php echo $__env->make('frontend.svg.icon-arrow', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?></a>
                        </div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                <a href="#" class="cop__clear-filter" data-action="clear-filter">
                    Clear Filter
                </a>
            </div>
        </div>

        <div class="cop__topics-mobile-container" data-role="topics-mobile-container">

            <div class="cop__topics-mobile-bar">
                <?php $__currentLoopData = $topics; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $topic): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="cop__topic-mobile _theme-<?php echo e($topic['id']); ?> theme-<?php echo e($topic['id']); ?>-color" data-action="filter" data-filter="theme-<?php echo e($topic['id']); ?>" data-id="<?php echo e($topic['id']); ?>">
                        <div class="cop__topic-image-mobile theme-<?php echo e($topic['id']); ?>-color">
                            <?php echo $topic['svg']; ?>

                        </div>
                        <h4><?php echo e($topic['title']); ?></h4>
                        <div class="cop__topic-divider-mobile"></div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>

            <div class="cop__topics-mobile-info-container">
                <?php $__currentLoopData = $topics; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $topic): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="cop__topics-mobile-info _background-color _theme-<?php echo e($topic['id']); ?> theme-<?php echo e($topic['id']); ?>-color" data-filter-id="theme-<?php echo e($topic['id']); ?>" data-role="description-mobile">
                        <span><?php echo e($topic['shortDescription']); ?></span>
                        <button data-action="open-description" data-filter="theme-<?php echo e($topic['id']); ?>">
                            <?php echo $__env->make('frontend.svg.icon-plus', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
                        </button>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>

            <a href="#" class="cop__clear-filter-mobile" data-action="clear-filter">
                Clear Filter
            </a>
        </div>

        <div class="cop__video-layout _background-color" data-role="video-sidebar">
            <button class="cop__close-video-layout" data-action="close-sidebar">
                <?php echo $__env->make('frontend.svg.icon-sidebar-close', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
            </button>
            <h3>Close and Back to map</h3>
            <div class="cop__video-container" data-role="video-container"></div>
            <div class="cop__video-content" data-role="video-content"></div>
        </div>

        <div class="cop__embed-layout _background-color" data-role="embed-sidebar">
            <button class="cop__close-embed-layout" data-action="close-sidebar">
                <?php echo $__env->make('frontend.svg.icon-sidebar-close', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
            </button>
            <h3>Close and Back to map</h3>
            <div class="cop__embed-container" data-role="embed-container"></div>
        </div>

        <div class="cop__description-layout" data-role="description-sidebar">
            <button class="cop__toggle-description-layout" data-action="toggle-description">
                <span class="_icon_desktop">
                    <?php echo $__env->make('frontend.svg.icon-arrow', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
                </span>
                <span class="_icon_mobile">
                    <?php echo $__env->make('frontend.svg.icon-sidebar-close', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
                </span>
            </button>

            <h3>Close and Back to map</h3>


            <?php $__currentLoopData = $topics; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $topic): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="cop__description-container" data-role="description-container" data-filter="theme-<?php echo e($topic['id']); ?>">
                    <div class="cop__description-container-scroll">
                        <div class="cop__description-image">
                            <img src="<?php echo e($topic['image']); ?>" alt="<?php echo e($topic['title']); ?>-image">
                        </div>
                        <div class="cop__description-content">
                            <h1><?php echo e($topic['title']); ?></h1>
                            <h4>
                                <?php echo $topic['shortDescription']; ?>

                            </h4>
                            <p>
                                <?php echo $topic['longDescription']; ?>

                            </p>
                        </div>
                    </div>
                    <?php if(!empty($topic['cta'])): ?>
                        <?php echo $topic['cta']; ?>

                    <?php endif; ?>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>

    <style>
        <?php $__currentLoopData = $topics; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $topic): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            ._background-color.theme-<?php echo e($topic['id']); ?>-color {
                background-color: <?php echo e($topic['color']); ?>;
            }

            .cop__topic-image.theme-<?php echo e($topic['id']); ?>-color {
                background-color: <?php echo e($topic['color']); ?>;
            }
            ._filter-active .cop__topic-image.theme-<?php echo e($topic['id']); ?>-color {
                background-color: white;
            }
            ._filter-active .cop__topic-image.theme-<?php echo e($topic['id']); ?>-color path {
                fill: <?php echo e($topic['color']); ?>;
            }
            ._active .cop__topic-image.theme-<?php echo e($topic['id']); ?>-color {
                background-color: <?php echo e($topic['color']); ?>;
            }
            ._active .cop__topic-image.theme-<?php echo e($topic['id']); ?>-color path {
                fill: white;
            }
            .cop__topic:hover .cop__topic-image.theme-<?php echo e($topic['id']); ?>-color {
                background-color: <?php echo e($topic['color']); ?>;
            }
            .cop__topic:hover .cop__topic-image.theme-<?php echo e($topic['id']); ?>-color path {
                fill: white;
            }

            .cop__description-layout.theme-<?php echo e($topic['id']); ?>-color {
                background-color: <?php echo e($topic['color']); ?>;
            }

            .copitem-marker.theme-<?php echo e($topic['id']); ?>-color {
                background: <?php echo e($topic['color']); ?>;
            }

            .cop__topic-image-mobile.theme-<?php echo e($topic['id']); ?>-color path {
                fill: <?php echo e($topic['color']); ?>;
            }
            .cop__topic-mobile.theme-<?php echo e($topic['id']); ?>-color h4 {
                color: <?php echo e($topic['color']); ?>;
            }
            ._active.cop__topic-mobile.theme-<?php echo e($topic['id']); ?>-color {
                background-color: <?php echo e($topic['color']); ?>;
            }
            ._active .cop__topic-image-mobile.theme-<?php echo e($topic['id']); ?>-color path {
                fill: white;
            }
            ._active.cop__topic-mobile.theme-<?php echo e($topic['id']); ?>-color h4 {
                color: white;
            }

            ._color.theme-<?php echo e($topic['id']); ?>-color {
                color: <?php echo e($topic['color']); ?>;
            }
            ._path.theme-<?php echo e($topic['id']); ?>-color path {
                fill: <?php echo e($topic['color']); ?>;
            }
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </style>

<?php $__env->stopSection(); ?>


<?php echo $__env->make('frontend.layouts.main', array('body_class' => 'cop-template', 'hasMaps' => true, 'noFade' => true), \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/html-staging/resources/views/frontend/templates/page/cop.blade.php ENDPATH**/ ?>