{% extends layout %}
{% block title %}{{ post.title }} | Stiletto.fr - magazine de mode{% endblock %}
{% block metadescription %}{{ post.shortdescription }}{% endblock %}
{% block metaimage %}{% if post.medias.0 is defined %}{{ resizer(post.medias.0, {height:400}) }}{% endif %}{% endblock %}

{% block breadcrumb %}
    >
    <div itemtype="http://data-vocabulary.org/Breadcrumb" itemscope>
        <a itemprop="url" href="{{ url('category', {'categorySlug': post.categories.0.slug}) }}">
            <span itemprop="title">{{ post.categories.0.title }}</span>
        </a>
    </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 }}" rel="{{ 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="700" 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, {'thumbnail':true, height:100})|raw }}</a></li>
                    {#% if media.type == 1 %}
                    <li><a href="#"><img src="{{ asset(media.image) }}"></a></li>
                    {% elseif media.type == 2 %}
                    <li><a href="#"><img src="{{ media.image }}"></a></li>
                    {% endif %#}
                {% endfor %}
            </ul>
            <div id="social_interaction">
                <!-- facebook -->
                <div class="fb-like" data-href="{{ url('permalink', {'categorySlug': post.categories.0.slug, '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('permalink', {'categorySlug': post.categories.0.slug, '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.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">{% for category in post.categories %}{{ category }} {% endfor %}</strong>
        <h2 class="title post-title">{{ post.title }}</h2>
    </header>
    <div class="post-content">
        <blockquote>
            {{ post.shortdescription|autolink|raw }}
        </blockquote>
        <div>
        {{ post.description|autolink|raw }}
        </div>
        {# <p>Mots-clés : {{ post.tags|join(', ') }} </p> #}
        {% if post.commentEnabled == 'open' %}
        <div class="fb-comments" data-href="{{ url('permalink', {'categorySlug': post.categories.0.slug, 'postSlug': post.slug }) }}" data-num-posts="2" data-width="470"></div>
        {% endif %}
        
            {{ cmscommentbox(post) }}
    </div>
    {#<footer class="post-footer">
        Ici on pourrait avoir une navigation interarticle, si l'article a plusieurs pages. avec l'element NAV.
    </footer>#}
    <aside class="related-posts">
        {% for post in relatif %}
        <article class="post">
            {% if post.art.categories.0 is defined and post.art.medias.0 is defined %}
            <h3 class="title post-title"><a href="{{ url('permalink', {'categorySlug': post.art.categories.0.slug, 'postSlug': post.art.slug }) }}">{{ post.art.title }}</a></h3>

            <div class="post-content">
                <div style="height:145px;width:180px;">
                    <figure>
                        <a href="{{ url('permalink', {'categorySlug': post.art.categories.0.slug, 'postSlug': post.art.slug }) }}" rel="nofollow"><img src="{{ asset(post.art.medias.0.image) }}" alt="{{ post.art.medias.0.title|default(post.art.title)}}" /></a>
                    </figure>
                </div>
                <div style="background-color: #FDFDFB;opacity: 0.8;filter:alpha(opacity=80);-moz-opacity:0.8; width:180px;">
                {{ post.art.shortdescription|truncate(50) }}
                </div>
                {#{ post.pertinence }} {% for tag in post.art.tags %} {{ tag.title }} {% endfor %#}
            </div>
            {% else %}
            <h3 class="title post-title"><a href="{{ url('permalink', {'categorySlug': post.art.categories.0.slug, 'postSlug': post.art.slug }) }}">{{ post.art.title }}</a></h3>
            {% endif %}
        </article>
        {% else %}
        {% endfor %}
    </aside>
</article>

{% endblock %}

{% block footer %}{{ post.categories.0.description }}{% endblock %}