<?php $__env->startSection('css'); ?>
    <?php echo Html::style('css/general/owl-carrusel/owl.carousel.css'); ?>

    <style>
        .center-flex {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .btn-danger {
            color: rgba(1, 87, 77, 1);
            background-color: transparent;
            border: 2px solid #0098A6;
            border-radius: 20px;
        }

        .btn-danger:hover {
            color: #0098A6;
            background-color: #EEEEEE;
            border: 2px solid #0098A6;
            border-radius: 20px;
        }

        .hipervinculo {
            color: black;
            background: none;
            border: none;
        }

        .hipervinculo p {
            font-size: 12px;
        }

        .hipervinculo:hover {
            color: #FC510C;

        }
        .carousel-control.left {
            background-image: none !important;
        }
    </style>

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

<?php $__env->startSection('js'); ?>
    <?php echo Html::script('js/general/owl-carrusel/owl.carousel.js'); ?>

    <?php echo Html::script('https://platform.twitter.com/widgets.js'); ?>

    <?php echo Html::script('js/general/ajax.js'); ?>

    <?php echo Html::script('js/general/alert-message.js'); ?>

    <?php echo Html::script('js/general/jquery.functions.js'); ?>

    <?php echo Html::script('js/general/owl-carrusel/owl.carousel.js'); ?>

    <?php echo Html::script('https://platform.twitter.com/widgets.js'); ?>

    <script>
        $(document).on('click', '#leer-noticia', function (event) {
            event.preventDefault();
            var boton_nuevo = $(this);
            boton_nuevo.loadModalAjax({
                afterLoad: function (content, modal, btn_accept, btn_cancel, spinner) {
                    btn_cancel.text('Atras');
                    btn_accept.remove();
                }
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $(".owl-carousel").owlCarousel({
                loop: true,
                margin: 10,
                items: 4,
                nav: false
            });
        });
    </script>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('contenido'); ?>
    <div class="container-fluid">
        <div class="row margen-cuerpo padre">
            <div class="col-md-8 col-sm-8 col-xs-12 col-md-push-1 col-sm-push-1 col-xs-push-0 hijo">
                <div class="row">
                    <div class="col-md-10 col-sm-10 col-xs-10">
                        <div class="col-md-12 col-sm-12 col-xs-12" style="margin-top: 30px;">
                            <i><?php echo e('Noticia / '.$noticia->titulo); ?></i>
                            <hr>
                        </div>

                        <?php if($lista_imagen->count()>1): ?>
                            <div id="carousel-noticia" class="carousel slide" data-ride="carousel">
                                <!-- Indicators -->
                                <ol class="carousel-indicators">
                                    <?php foreach($lista_imagen as $cont =>$imagen): ?>
                                        <li data-target="#carousel-noticia" data-slide-to="<?php echo e($cont); ?>"
                                            class="<?php if($cont ==0): ?>active <?php endif; ?> "></li>
                                    <?php endforeach; ?>
                                </ol>
                                <!-- Wrapper for slides -->
                                <div class="carousel-inner" role="listbox">
                                    <?php foreach($lista_imagen as $cont =>$imagen): ?>
                                        <div class="item <?php if($cont ==0): ?>active <?php endif; ?> ">
                                            <img src="<?php echo e($imagen->imagen); ?>"  class="img-responsive center-block" style='max-height: 500px; min-height: 500px' alt="Tehuelche Noticias">
                                            <div class="carousel-caption">
                                            </div>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                                <!-- Controls -->
                                <a class="left carousel-control" href="#carousel-noticia" role="button"
                                   data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left" style="color: #000000;" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="right carousel-control" href="#carousel-noticia" role="button"
                                   data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right" style="color: #000000;" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                                <hr>
                            </div>
                        <?php else: ?>
                            <div class="col-md-12 col-sm-12 col-xs-12" style="margin-top: 10px">
                                <img src="<?php echo e($noticia->imagen); ?>"
                                     class="img-responsive center-block" alt="tehuelche noticias Aysen">
                            </div>
                        <?php endif; ?>

                        <?php if($noticia->audio!=null): ?>
                            <div class="col-md-12 col-sm-12 col-xs-12 col-xs-push-0 text-center">
                                <hr>
                                <h3 class="text-center titulo gris"><?php echo e('Clip de Audio'); ?></h3>
                                <audio controls="controls" >
                                    <source src="<?php echo e($noticia->audio); ?>" type="audio/mpeg">
                                    Este navegador no se encuentra actualizado.
                                </audio>
                            </div>
                        <?php endif; ?>
                        <div class="col-md-12 col-sm-12 col-xs-12 col-xs-push-0" style="margin-top: 20px">
                            <h1 class="text-center titulo gris"><?php echo e($noticia->titulo); ?></h1>
                            <p class="text-center texto gris">
                                <?php echo e($noticia->date); ?>

                            </p>
                            <hr>
                            <span class="texto gris"><?php echo $noticia->texto; ?></span>
                            <p class="texto gris text-right">Autor: <?php echo e($noticia->autor); ?></p>
                            <hr>
                        </div>
                    </div>
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="row text-center" style="margin-top: 8em">
                            <div class="col-md-12">
                                <h4 class="titulo gris"><b> Ver Noticias Relacionadas:</b></h4>
                                <?php foreach($articulos_relacionados as $cont=>$articulo): ?>
                                    <a href="<?php echo e(route('get-ver-noticias',['id'=>$articulo->id])); ?>" class="">
                                        <br>
                                        <p class="texto hipervinculo"><?php echo e($articulo->titulo); ?></p>
                                    </a>
                                <?php endforeach; ?>
                            </div>
                        </div>
                        <?php /*}}<div class="row">
                            <div class="col-md-12">
                                <h5><b>Etiquetas:</b></h5>
                                <?php foreach($etiquetas as $etiqueta): ?>
                                    <p><?php echo e($etiqueta->nombre); ?></p>
                                <?php endforeach; ?>
                            </div>
                        </div>*/ ?>
                    </div>
                </div>
            </div>
            <div id="barra-lateral"
                 class="col-md-3 col-sm-3 col-xs-12  col-md-push-1 col-sm-push-1 col-xs-push-0 center-flex hijo">
                <?php echo $__env->make('pagina.inicio.parciales.lateral', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
            </div>
        </div>
    </div>

    <section id="video">
        <?php echo $__env->make('pagina.inicio.parciales.videos', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
    </section>
    <section id="apoyanos">
        <?php echo $__env->make('pagina.inicio.parciales.apoyanos', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
    </section>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('templates.public.public-template', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>