{% extends layout %}
{% block title %}{{ post.title }} | {{ app.request.attributes.get('domain').title }} | Blog  | Stiletto.fr{% endblock %}
{% block metadescription %}{{ post.shortdescription }}{% endblock %}
{% block metaimage %}{% if post.medias.0 is defined %}{{ asset(post.medias.0.image) }}{% endif %}{% endblock %}

{% block breadcrumb %}
    >
    <div itemtype="http://data-vocabulary.org/Breadcrumb" itemscope>
        <span itemprop="title">
            <a href="{{ path('index') }}">Le blog de {{ app.request.attributes.get('domain').title }}</a>
        </span>
    </div>
    &gt;
    <div itemtype="http://data-vocabulary.org/Breadcrumb" itemscope>
        <span itemprop="title">Articles</span>
    </div>
    &gt;
    <div itemtype="http://data-vocabulary.org/Breadcrumb" itemscope>
        <span itemprop="title">{{ post.title }}</span>
    </div>
{% endblock %}


{% block body %}
<script>
$(function() {
    $( "a.lightbox" ).colorbox({rel:'group1'});
});
</script>
<article class="post" id="main">{#<!-- je n'ai pas utilisé #main dans la CSS, mais ça pourrait etre utile éventuellement -->#}
    <figure>
        <div class="gallery">
            <div class="slides_container">
                {#<!-- FIXME : il faut faire attention ici que soit les images sont moins hautes que le conteneur, soit on adapte la hauteur du conteneur. La hauteur est ecrite dans la css et fait 400px -->#}
                {% for media in post.medias %}
                    {% if media.type == 1 %}
                    <div><a class="lightbox" href="{{ resizer(media, {width:600})|raw }}">
                    {{ media(media, {'thumbnail':true,  height:400})|raw }}
                    </a>
                    <p>{{ media.description }}</p>
                    </div>
                    {% elseif media.type == 2 %}
                    <div><iframe width="600" height="400" src="{{ media.source }}" frameborder="0" allowfullscreen></iframe>
                    <p>{{ media.description }}</p></div>
                    {% endif %}
                {% endfor %}
                </div>
                <ul class="pagination">
                    {% for media in post.medias %}
                        <li><a href="#">{{ media(media, {'original':false, 'width':100, 'height': 100})|raw }}</a></li>
                    {% endfor %}
                </ul>
            <div id="social_interaction">
                <!-- facebook -->
                <div class="fb-like" data-href="{{ url('blog_permalink', {'postSlug': post.slug }) }}" data-send="false" data-layout="box_count" data-width="80" data-show-faces="false" data-font="arial"></div>
                <!-- twitter -->
                <a href="https://twitter.com/share" class="twitter-share-button" data-related="stilettofr" data-lang="fr" data-count="vertical" data-url="{{ url('blog_permalink', {'postSlug': post.slug }) }}">Tweet</a>
                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

                <!-- google plus -->
                <div class="g-plusone" data-size="tall"></div>
                <!-- Place this tag after the last +1 button tag. -->
                <script type="text/javascript">
                window.___gcfg = {lang: 'fr'};
                (function() {
                    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                    po.src = 'https://apis.google.com/js/plusone.js';
                    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                })();
                </script>
                {% if post.art.medias.0 is defined %}
                <!-- pinterest -->
                <a href="http://pinterest.com/pin/create/button/?url={{ asset(post.medias.0.image) }}&description={{ post.title }}" class="pin-it-button" count-layout="vertical"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
                {% endif %}
                {{ cmsvotebox(post) }}
            </div>
        </div>
    </figure>
    <header class="post-header">
        <time class="pubdate" datetime="{{ post.publishedat|date('Y-m-d\\Th:m:sP') }}">{% if post.status.id != 1 %}<blink>BROUILLON</blink>{% else %}{{ post.publishedat|datetrans }} <span class="year">{{ post.publishedat|date('Y') }}</span>{% endif %}</time>
        <strong class="title category-title"></strong>
        <h2 class="title post-title">{{ post.title }}</h2>
    </header>
    <div class="post-content">
        <blockquote>
            {{ post.shortdescription|autolink|raw|nl2br }}
        </blockquote>
        <p>
        {{ post.description|autolink|raw|nl2br }}
        </p>
        {% if post.commentEnabled == 'open' %}
        <div class="fb-comments" data-href="{{ url('blog_permalink', {'postSlug': post.slug }) }}" data-lang="fr" data-num-posts="2" data-width="470"></div>
        {% endif %}
    </div>

</article>

<script src="{{ asset('twtools/javascript/cluetip/jquery.cluetip.all.min.js') }}"></script>
<script>
    $("a.lightbox").cluetip({'width': 600, tracking: true, showTitle: false, positionBy: 'mouse'});
</script>

{% endblock %}

{% block footer %}{{ app.request.attributes.get('domain').description }}{% endblock %}