{% extends layout %}
{% block title %}{{ featured.title }} | Stiletto.fr - magazine de mode{% endblock %}
{% block metadescription %}{{ featured.shortdescription }}{% endblock %}
{% block metaimage %}{% if featured.medias.0 is defined %}{{ asset(featured.medias.0.image) }}{% endif %}{% endblock %}

{% block breadcrumb %}
    >
    <div itemtype="http://data-vocabulary.org/Breadcrumb" itemscope>
        <a itemprop="url" href="{{ path('featured_list') }}">
            <span itemprop="title">A la une</span>
        </a>
    </div>
    &gt;
    <div itemtype="http://data-vocabulary.org/Breadcrumb" itemscope>
        <span itemprop="title">{{ featured.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 featured.medias %}
                    {% if media.type == 1 %}
                    <div><a class="lightbox" href="{{ resizer(media, {width:825})|raw }}" rel="{{ resizer(media, {width:825})|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 featured.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('featured_permalink', {'postSlug': featured.slug}) }}" data-send="false" data-layout="box_count" data-width="50" 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('featured_permalink', {'postSlug': featured.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 featured.art.medias.0 is defined %}
                <!-- pinterest -->
                <a href="http://pinterest.com/pin/create/button/?url={{ asset(featured.medias.0.image) }}&description={{ featured.title }}" class="pin-it-button" count-layout="vertical"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
                {% endif %}
            </div>
        </div>
    </figure>
    <header class="post-header">
        <time class="pubdate" datetime="{{ featured.publishedat|date('Y-m-d\\Th:m:sP') }}">{% if featured.status.id != 1 %}<blink>BROUILLON</blink>{% else %}{{ featured.publishedat|datetrans }} <span class="year">{{ featured.publishedat|date('Y') }}</span>{% endif %}</time>
        <h2 class="title post-title">{{ featured.title }}</h2>
    </header>
    <div class="post-content">
        <blockquote>
            {{ featured.shortdescription|autolink|nl2br }}
        </blockquote>
        <p>
        {{ featured.description|autolink|raw|nl2br }}
        </p>
        <div class="fb-comments" data-href="{{ path('featured_permalink', {'postSlug': featured.slug}) }}" data-num-posts="2" data-width="470"></div>
    </div>
</article>

{% endblock %}

{% block footer %}A la une. L'édito de la semaine.{% endblock %}