{% extends 'layout.html.twig' %}

{% do pimcore_head_title().set(article.getTitle()) %}
{% do pimcore_head_meta().setDescription(article.getText(), 160) %}

{% block content %}

    <div class="area-wysiwyg">
        <div class="page-header">
            <h1>{{ article.getTitle() }}</h1>
        </div>

        {% include 'Blog/meta.html.twig' with { article: article } only %}

        <hr />

        {% if article.getPosterImage() %}
            {# @var posterImage \Pimcore\Model\DataObject\Data\Hotspotimage #}
            {% set posterImage = article.getPosterImage() %}

            <div class="image-container" style="width: {{ posterImage.getThumbnail('content').getWidth() }}px">
                {{ posterImage.getThumbnail('content').getHTML({ class: 'img-responsive' })|raw }}

                {% for hotspot in posterImage.getHotspots()|default([]) %}
                    <div class="image-hotspot" style="top: {{ hotspot.top }}%; left: {{ hotspot.left }}%; width: {{ hotspot.width }}%; height: {{ hotspot.height }}%"></div>
                {% endfor %}

                {% for marker in posterImage.getMarker()|default([]) %}
                    <div class="image-marker" style="top: {{ marker.top }}%; left: {{ marker.left }}%"></div>
                {% endfor %}
            </div>

            <br /><br />
        {% endif %}

        {{ article.getText()|raw }}

        <div class="disqus">
            <div id="disqus_thread"></div>
            <script type="text/javascript">
                /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
                var disqus_shortname = 'pimcore'; // required: replace example with your forum shortname

                /* * * DON'T EDIT BELOW THIS LINE * * */
                (function() {
                    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
                    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                })();
            </script>
            <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
            <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
        </div>
    </div>

{% endblock %}