{% extends 'blog/category_base.html' %}
{% load i18n staticfiles %}

{% block additional_css %}
    <link rel="stylesheet" href="{% static 'css/style_promo.css' %}"
          xmlns="http://www.w3.org/1999/html"/>
    <link rel="stylesheet"
          href="{% static 'js/fancybox/jquery.fancybox.css' %}"/>
{% endblock %}


{% block content %}
    {{ block.super }}

    <div class="row-comic">

        <h1><img src="{{ category.image.url }}" alt="{{ category.image.alt }}">
        </h1>

        <div class="oobik">

            <div class="pre-oobik">
                {{ category.content|safe }}
            </div>

            <ul>
                {% for entry in category.published_entries %}
                    <li>
                        <h2>Página {{ forloop.counter }}</h2>
                        <a href="{{ entry.main_image }}"
                           rel="gallery1"
                           class="comic-pages"
                           title="Página {{ forloop.counter }}">
                            <img src="{{ entry.listed_image }}"
                                 alt="The OOBIK página {{ forloop.counter }}">
                        </a>
                    </li>

                {% endfor %}

            </ul>

        </div>


    </div>

{% endblock content %}

{% block scripts_footer %}
    {{ block.super }}
    <script src="{% static 'js/fancybox/jquery.fancybox.js' %}"></script>
    <script src="{% static 'js/fancybox/jquery.fancybox.pack.js' %}"></script>
    <script src="{% static 'js/fancybox/helpers/jquery.fancybox-media.js' %}"></script>
    <script>
        $(document).ready(function () {
            $('.comic-pages')
                    .attr('rel', 'media-gallery')
                    .fancybox({
                        autoSize: true,
                        scrolling: 'auto',
                        fitToView: false,
                        width: 'auto',
                        maxWidth: '100%',
                        openEffect: 'none',
                        closeEffect: 'none',
                        prevEffect: 'none',
                        nextEffect: 'none',
                        arrows: true,
                        helpers: {
                            media: {},
                            buttons: {},
                            title: {
                                type: 'inside',
                                position: 'top'
                            }
                        }
                    });


        });
    </script>
{% endblock scripts_footer %}