{% extends "trainings/trainingactivity_base_detail.html" %}

{% load i18n template_tools %}

{% block head %}
    {{ block.super }}
    {% include "cms/includes/lightbox-head.html" %}
{% endblock %}

{% block activity_details %}
    {% if presentation.is_accessible_by_trainees %}
        <p><strong>{% trans 'Free presentation' %}</strong> {% trans 'The trainees can access by themselves' %}</p>
    {% else %}
        <p><strong>{% trans 'Restricted presentation' %}</strong> {% trans 'The trainees cannot access by themselves' %}</p>
    {% endif %}
    <div class="media">
        <div class="media-left presentation-thumbnail">
            {% if presentation.pdf.images_url_list %}
                <a href="{{ presentation.pdf.images_url_list.0 }}" data-gallery="pdf-images" data-toggle="lightbox" data-title="{% trans 'Image' %} 1">
                    <div class="thumbnail">
                        <div class="img-wrapper">
                            <img class="media-object" src="{{ presentation.pdf.images_url_list.0 }}" alt="">
                        </div>
                    </div>
                    {% for image in presentation.pdf.images_url_list %}
                        {% if not forloop.first %}
                            <div data-toggle="lightbox" data-gallery="pdf-images" data-remote="{{ image }}" data-title="{% trans 'Image' %} {{ forloop.counter }}"></div>
                        {% endif %}
                    {% endfor %}
                </a>
            {% else %}
                <div class="thumbnail text-center thumbnail-loading">
                    <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
                    <p>{% trans 'Extracting images...' %}</p>
                </div>
            {% endif %}
        </div>
        <div class="media-body">
            <p>{% trans 'Main content' %}</p>
            <a href="{{ presentation.pdf.file.url }}" class="btn btn-default" download target="_blank">
                {% trans 'Download the main content' %}
            </a>
        </div>
    </div>
    {% if presentation.restricted_pdf %}
        <div class="media">
            <div class="media-left presentation-thumbnail">
                {% if presentation.restricted_pdf.images_url_list %}
                    <a href="{{ presentation.restricted_pdf.images_url_list.0 }}" data-gallery="restricted-pdf-images" data-toggle="lightbox" data-title="{% trans 'Image' %} 1">
                        <div class="thumbnail">
                            <div class="img-wrapper">
                                <img class="media-object" src="{{ presentation.restricted_pdf.images_url_list.0 }}" alt="">
                            </div>    
                        </div>
                        {% for image in presentation.pdf.images_url_list %}
                            {% if not forloop.first %}
                                <div data-toggle="lightbox" data-gallery="restricted-pdf-images" data-remote="{{ image }}" data-title="{% trans 'Image' %} {{ forloop.counter }}"></div>
                            {% endif %}
                        {% endfor %}
                    </a>
                {% else %}
                    <div class="thumbnail text-center thumbnail-loading">
                        <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
                        <p>{% trans 'Extracting images...' %}</p>
                    </div>
                {% endif %}
            </div>
            <div class="media-body">
                <p>{% trans 'Content with notes' %}</p>
                <a href="{{ presentation.restricted_pdf.file.url }}" class="btn btn-default" download target="_blank">
                    {% trans 'Download the content with notes' %}
                </a>
            </div>
        </div>
    {% endif %}
{% endblock %}