@extends('layouts/master_hf')

@php
    $pagename = 'video';
    $imgpath = "images/background/services4.png"
@endphp

@section('body')
    <div class="tm-sidebars-1 tm-isblog tm-header-wrapper">
        @include('components.breadcrumb')

        <div class="tm-page-corners"></div>
        <div id="tm-main" class="tm-block-main uk-block uk-block-default">
            <div class="tm-page-padding" style="min-height: 80vh;">
                <div class="uk-container uk-container-center">
                    <div class="tm-middle uk-grid" data-uk-grid-match data-uk-grid-margin>

                        <div class="tm-main uk-width-medium-1-1">

                            <main id="tm-content" class="tm-content">
                                <div id="system-message-container"></div>
                                <article class="uk-article tm-article">

                                    <div class="tm-article-wrapper">

                                        <div class="tm-article-content">

                                            <div class="tm-article">

                                                <h3 class="tm-caps tm-weight-regular">Categorie</h3>
                                                <style>
                                                    .btn.uk-active {
                                                        border-color: #ffc107;
                                                    }

                                                    .video-loading {
                                                        position: absolute;
                                                        top: 50%;
                                                        left: 50%;
                                                        transform: translate(-50%, -50%);
                                                    }

                                                    .video-loading::after {
                                                        content: '';
                                                        display: block;
                                                        width: 40px;
                                                        height: 40px;
                                                        border: 4px solid #f3f3f3;
                                                        border-top: 4px solid #ffc107;
                                                        border-radius: 50%;
                                                        animation: spin 1s linear infinite;
                                                    }

                                                    @keyframes spin {
                                                        0% {
                                                            transform: rotate(0deg);
                                                        }

                                                        100% {
                                                            transform: rotate(360deg);
                                                        }
                                                    }
                                                </style>
                                                <ul id="wk-6b4"
                                                    class="uk-subnav uk-subnav-line tm-grid-filters uk-flex-right hidden-s"
                                                    style="padding-right: 30px;">
                                                    <li class="uk-active d-none d-md-block" data-uk-filter="">
                                                        <a href="#">
                                                            Tutto
                                                        </a>
                                                    </li>
                                                    <li data-uk-filter="pinza-abbattitrice" class="d-none d-md-block">
                                                        <a href="#">
                                                            Abbattitrice
                                                        </a>
                                                    </li>
                                                    <li data-uk-filter="pinza-cesoia" class="d-none d-md-block">
                                                        <a href="#">
                                                            Cesoia
                                                        </a>
                                                    </li>
                                                    <li data-uk-filter="attrezzatura-forestale" class="d-none d-md-block">
                                                        <a href="#">
                                                            Pinza con Kit Motosega
                                                        </a>
                                                    </li>
                                                    <li data-uk-filter="pinza-spaccatronchi" class="d-none d-md-block">
                                                        <a href="#">
                                                            Spacca Tronchi
                                                        </a>
                                                    </li>

                                                    <div class="btn-group-vertical d-block d-md-none w-100 mb-3">
                                                        <button type="button" class="btn btn-default uk-active"
                                                            data-uk-filter="">Tutto</button>
                                                        <button type="button" class="btn btn-default"
                                                            data-uk-filter="pinza-abbattitrice">Abbattitrice</button>
                                                        <button type="button" class="btn btn-default"
                                                            data-uk-filter="pinza-cesoia">Cesoia</button>
                                                        <button type="button" class="btn btn-default"
                                                            data-uk-filter="attrezzatura-forestale">Macchina
                                                            Completa</button>
                                                        <button type="button" class="btn btn-default"
                                                            data-uk-filter="pinza-spaccatronchi">Spacca Tronchi</button>
                                                    </div>
                                                </ul>
                                                <div class="container-fluid">
                                                    <div id="wk-grid6b4" class="row"
                                                        data-uk-grid="{controls: '#wk-6b4', gutter: 30}">

                                                        <div data-uk-filter="attrezzatura-forestale"
                                                            class="col-md-6 col-sm-12 col-xs-12">
                                                            <figure class="" style="border: 2px solid #ddd;">
                                                                <div class="video-container"
                                                                    style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
                                                                    <div class="video-loading"></div>
                                                                    <iframe
                                                                        onload="this.previousElementSibling.style.display='none'"
                                                                        src="https://www.youtube-nocookie.com/embed/M_Z4oh56NBk?loop=1&listType=playlist&rel=0"
                                                                        frameborder="0" allowfullscreen
                                                                        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
                                                                </div>
                                                                <h4 style="text-align: center;">Serie IT1600PF + KIT
                                                                    IT500CTH</h4>
                                                            </figure>
                                                        </div>
                                                        <div data-uk-filter="pinza-abbattitrice"
                                                            class="col-md-6 col-sm-12 col-xs-12">
                                                            <figure class="" style="border: 2px solid #ddd;">
                                                                <div class="video-container"
                                                                    style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
                                                                    <div class="video-loading"></div>
                                                                    <iframe
                                                                        onload="this.previousElementSibling.style.display='none'"
                                                                        src="https://www.youtube-nocookie.com/embed/T_7UOX5IcDU?loop=1&listType=playlist&rel=0"
                                                                        frameborder="0" allowfullscreen
                                                                        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
                                                                </div>
                                                                <h4 style="text-align: center;">Serie IT 650 CA</h4>
                                                            </figure>
                                                        </div>

                                                        <div data-uk-filter="pinza-cesoia"
                                                            class="col-md-6 col-sm-12 col-xs-12">
                                                            <figure class="" style="border: 2px solid #ddd;">
                                                                <div class="video-container"
                                                                    style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
                                                                    <div class="video-loading"></div>
                                                                    <iframe
                                                                        onload="this.previousElementSibling.style.display='none'"
                                                                        src="https://www.youtube-nocookie.com/embed/HJoEYPKRC0c?loop=1&listType=playlist&rel=0"
                                                                        frameborder="0" allowfullscreen
                                                                        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
                                                                </div>
                                                                <h4 style="text-align: center;">Serie IT 400 CE</h4>
                                                            </figure>
                                                        </div>

                                                        <div data-uk-filter="pinza-cesoia"
                                                            class="col-md-6 col-sm-12 col-xs-12">
                                                            <figure class="" style="border: 2px solid #ddd;">
                                                                <div class="video-container"
                                                                    style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
                                                                    <div class="video-loading"></div>
                                                                    <iframe
                                                                        onload="this.previousElementSibling.style.display='none'"
                                                                        src="https://www.youtube-nocookie.com/embed/It9PnyPcSb8?loop=1&listType=playlist&rel=0"
                                                                        frameborder="0" allowfullscreen
                                                                        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
                                                                </div>
                                                                <h4 style="text-align: center;">Serie IT 400 CE</h4>
                                                            </figure>
                                                        </div>

                                                        <div data-uk-filter="pinza-cesoia"
                                                            class="col-md-6 col-sm-12 col-xs-12">
                                                            <figure class="" style="border: 2px solid #ddd;">
                                                                <div class="video-container"
                                                                    style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
                                                                    <div class="video-loading"></div>
                                                                    <iframe
                                                                        onload="this.previousElementSibling.style.display='none'"
                                                                        src="https://www.youtube-nocookie.com/embed/kPoHTrO9Doo?loop=1&listType=playlist&rel=0"
                                                                        frameborder="0" allowfullscreen
                                                                        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
                                                                </div>
                                                                <h4 style="text-align: center;">Serie IT 300 CE</h4>
                                                            </figure>
                                                        </div>

                                                        <div data-uk-filter="pinza-cesoia"
                                                            class="col-md-6 col-sm-12 col-xs-12">
                                                            <figure class="" style="border: 2px solid #ddd;">
                                                                <div class="video-container"
                                                                    style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
                                                                    <div class="video-loading"></div>
                                                                    <iframe
                                                                        onload="this.previousElementSibling.style.display='none'"
                                                                        src="https://www.youtube-nocookie.com/embed/1bhEweXtfmU?loop=1&listType=playlist&rel=0"
                                                                        frameborder="0" allowfullscreen
                                                                        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
                                                                </div>
                                                                <h4 style="text-align: center;">Serie IT 300 CE</h4>
                                                            </figure>
                                                        </div>

                                                        <div data-uk-filter="pinza-spaccatronchi"
                                                            class="col-md-6 col-sm-12 col-xs-12">
                                                            <figure class="" style="border: 2px solid #ddd;">
                                                                <div class="video-container"
                                                                    style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
                                                                    <div class="video-loading"></div>
                                                                    <iframe
                                                                        onload="this.previousElementSibling.style.display='none'"
                                                                        src="https://www.youtube-nocookie.com/embed/74RYWmYc_pQ?loop=1&listType=playlist&rel=0"
                                                                        frameborder="0" allowfullscreen
                                                                        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
                                                                </div>
                                                                <h4 style="text-align: center;">Serie IT Spaccatronchi</h4>
                                                            </figure>
                                                        </div>

                                                    </div>
                                                </div>


                                                <script>
                                                    (function($) {

                                                        // get the iframes of the gallery and replace it by a canvas of the same size to fix the problem with overlapping iframes on load.
                                                        $('iframe:not(.uk-overlay-panel)', $('#wk-grid6b4')).each(function() {

                                                            var $iframe = $(this);

                                                            if (!$iframe.is(':visible')) {
                                                                return;
                                                            }

                                                            var width = $iframe.attr('width') || $iframe.width();
                                                            var height = $iframe.attr('height') || $iframe.height();

                                                            var $canvas = $('<canvas class="uk-responsive-width"></canvas>').attr({
                                                                width: width,
                                                                height: height
                                                            });

                                                            var release = function() {
                                                                $canvas.remove();
                                                                $iframe.css('display', '');
                                                                release = function() {};
                                                            };

                                                            $iframe.css('display', 'none').after($canvas);

                                                            setTimeout(function() {
                                                                release();
                                                            }, 1000);

                                                        });

                                                    })(jQuery);
                                                </script>

                                            </div>
                                        </div>
                                    </div>
                                </article>
                            </main>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection