{% extends "Intranet/Global.php.twig" %}

{% block body %}



    {{ R.js('moussajax/moussaSwitch') }}

    <style>
        .ui-state-highlight {
            border: 1px solid #d5bc2c;
            box-shadow: inset 0 0 5px #d5bc2c;
            background: #fff6bf;
            color: #6b6b6b;
            width: 25%;
            position: relative;
            padding-left: 15px;
            padding-right: 15px;
            min-height: 200px;
            float:left;
        }

        .poignee {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-right: 5px;
            /*float: left;*/
            cursor: move;
            background-color: #000000;
            position: absolute;
            border: 1px solid white;
            padding: 3px;
            color: white;
            border-radius: 3px;
            text-align: center;
        }

        .unhighlight {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-right: 5px;
            right: 10px;
            cursor: pointer;
            background-color: #b02600;
            position: absolute;
            border: 1px solid white;
            padding: 3px;
            color: white;
            border-radius: 3px;
            text-align: center;
        }

        .thumbdiv {
            margin-bottom: 30px;
        }

        .thumbdiv .encartThumb {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 110px;
            padding: 10px;
            background-color: rgba(255, 255, 255, 0.8);
        }

        .thumbdiv .thinraleway {
            font-family: 'Roboto';
            font-weight: 300;
        }

        .thumbdiv a {
            font-family: 'Roboto';
            font-weight: 400;
        }

        .selart {
            cursor: pointer
        }

        h1 {
            font-size: 20px;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        h2 {
            font-size: 18px;
            line-height: 1.4em;
            font-weight: 400;
        }

        h3 {
            font-size: 17px;
            font-weight: bold;
            margin-top: 10px;
        }

        h4 {
            font-size: 14px; /*text-transform: uppercase; */
            margin-bottom: 4px;
        }

        .comment {
            font-size: 12px;
            color: #000;
        }
    </style>

    <script>

        $(function () {

            var H = 0;

            $('.thumbdiv').each(function () {


                if ($(this).height() > H) H = $(this).height();
                console.log(H);

            });
            $('.thumbdiv').height(H);
            $('.ui-state-highlight').css('height' , H);

            $("img").error(function () {

                {#{% set filename =  C.conf.baseURL~"Graphisme/mediasSpip/arton"~ item.articleId ~"Formated.jpg" %}#}
                
                $(this).unbind("error").attr("src", "medias/noimage.jpg");
            });



            $('#list-home .unhighlight').bind( "click", function (e) {
                var idart = $(this).data('artid');
                console.log('click:' + idart);

                var T = $(this);


                $.ajax({
                    type: 'post',
                    url: 'ajax/highlightArticle?' + idart + '&unlight',
                    success: function (ret) {
                        // console.log('ddd');
                        console.log(ret);
                        T.closest('.thumbdiv').fadeOut();



                    }
                });

            });

        });


    </script>

    <div class="col-lg-3">

        <div>
            <a href="http://ancienslouislumiere.org/newHome" target="_blank" class="btn btn-default btn-info"><span
                        class="glyphicon glyphicon glyphicon-edit"></span> Voir en ligne</a>
        </div>

        <br/>

        <div class="input-group">
            <input type="text" class="form-control" id="autoSearchHome"
                   data-moussabind="moussajax.moussaListSearch"
                   data-target="list-Article"
                   data-url="{{ R.url('ajaxSearchArticleToHighlight',{'context' : 'Intranet',param: {} }) }}"
                   placeholder="Recherche Article"
                   aria-describedby="basic-addon2">
            <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search "
                                                                    aria-hidden="true"></span></span>
        </div>


        <div id="list-Article">

            {% include 'Intranet/GenericAjax/searchListArticle.php.twig'  with {'listArticles':articles } %}


        </div>

    </div>


    <div class="col-lg-9" id="list-home" data-moussabind="moussajax.moussaSortable"
         data-url="{{ R.url('ajaxSortHomeNew',{'context' : 'Intranet',param: {} }) }}"
         data-placeholder="ui-state-highlight"  data-item="" data-handle=".poignee">

        {#<div class="col-lg-9">#}

        {#{{ homeArticles |length }}#}


        {% for item in homeArticles %}

            {% set Rubrik = item.getOneRubrique() %}




            <div class="col-md-3  thumbdiv" id="item-{{ item.articleId}}">
                <span class="poignee"><span class="glyphicon glyphicon-move" aria-hidden="true"></span></span>

                <span class="unhighlight" data-artid="{{ item.articleId }}"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></span>

                {% set filename =  C.conf.baseURL~"Graphisme/mediasSpip/arton"~ item.articleId ~"Formated.jpg" %}


                {% set link = item.urlRewrite %}


                <a href="{{ link }}"><img src="{{ filename }}" class="img-responsive"/></a>


                <div style="position: relative">


                    <div class="encartThumb">


                        <h3><span><a href="Rubrique?{{ item.rubriqueId }}">
                                        {{ Rubrik.title }}

                                    </a></span></h3>

                        <span style="    font-size: 12px;">{{ item.getTitle() }}</span><br/>


                        <a href="{{ link }}#1{##{{ loop.index0 }}#}" class="comment thinraleway"
                           style="font-size: 14px"><b>{{ Art.title|length > 50 ? Art.title|slice(0, 77) ~ '...' : Art.title }} </b></a><br/>

                    </div>
                </div>
            </div>
        {% endfor %}


    </div>


    {{ R.js('helpers') }}
    {{ R.js('vendor/*') }}

    {{ R.js('moussajax/moussaSortable') }}
    {{ R.js('moussajax/moussaListSearch') }}

    <link rel="stylesheet" type="text/css" href="/css/cropit/cropimg.css" media="all"/>
    {{ R.incCss() | raw }}

{% endblock %}