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

{% block title %}Tutoriel{% endblock %}
{% block title_page %}Tutoriel{% endblock %}

{% block container_start %}





    <section class="content">

        <!-- Default box -->
        <div class="card">
            <div class="card-header">
                #{{ tutorial.id }}

                <div class="text-center"
                    <h1 style="font-size: 1.4em;" class="card-title"><b>{{ tutorial.name }}</b></h1>
                </div>

                <div class="card-tools">
                    {% if is_granted("ROLE_EDIT_TUTORIAL") %}
                        <button type="button" class="btn btn-success btn-sm">
                            <a class="btn-sm btn-success" href="{{ path('package_tutorial_tutorial_edit', {'id': tutorial.id}) }}">
                                <i class="fas fa-edit"></i> Modifier
                            </a>
                        </button>
                    {% endif %}
                    {% if is_granted("ROLE_DELETE_TUTORIAL") %}
                        {{ include('package_tutorial/tutorial/_delete_form.html.twig') }}
                    {% endif %}
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12 col-md-12 col-lg-12 order-2 order-md-1">

                        {# La vidéo #}
                        {% if tutorial.lien is defined and tutorial.lien is not null %}
                            <h4 class="text-center">Vidéo</h4>
                            <div class="sm-col-12 text-center">
                                <iframe {%  if  is_mobile () %} width="300" {% else %} width="600" {%  endif  %}  height="315" src="{{ tutorial.lien | raw }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        {% endif %}

                        {# Exploration des fichiers pour determination des differents type#}
                        {% set document = 0 %}
                        {% set image = 0 %}
                        {% if tutorial.tutorialFiles is defined and tutorial.tutorialFiles is not empty %}
                            {% for file in tutorial.tutorialFiles %}
                                {% if 'pdf' in file.mimeType %}
                                    {% set document = 1 %}
                                {% elseif 'jpeg' in file.mimeType %}
                                    {% set image = 1 %}
                                {% endif %}
                            {% endfor %}
                        {% endif %}


                        {# Les documents #}
                        {% if document %}
                        <div>
                            <h4>Les Documents</h4>
                            <ul style="list-style: none;">
                                {% for file in tutorial.tutorialFiles %}
                                <li>
                                    {% if 'pdf' in file.mimeType %}
                                        <a href="{{ vich_uploader_asset(file, 'tutorialFile') }}" download="{{ file.originalName }}">
                                            <i class="bi bi-download" style="font-size: 1.5rem; color: black;"></i>
                                        </a>
                                        <i class="bi bi-file-earmark-pdf-fill" style="font-size: 1.5rem; "></i>
                                        <i class="bi bi-arrow-right" style="font-size: 1rem;"></i>
                                        <a href="{{ vich_uploader_asset(file, 'tutorialFile') }}">{{ file.originalName }}</a>


                                    {% endif %}
                                </li>
                                {% endfor %}
                            </ul>

                        </div>
                        {% endif %}


                        {# Les images #}
                        {% if image %}
                        <div class="row">
                            <h4>Les Images</h4>

                            {% for image in tutorial.tutorialFiles %}
                                {% if 'jpeg' in image.mimeType %}
                                <div class="col-sm-2">
                                        <img src="{{ vich_uploader_asset(image, 'tutorialFile')| imagine_filter('img_list') }}" class="img-fluid mb-2" alt="{{ image.name }}">
                                </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                        {% endif %}



                        {# La description #}
                        {% if tutorial.description is defined and tutorial.description is not null and tutorial.description is not empty %}
                            <div class="row">
                                <div class="col-12">
                                    {#<h5>Description</h5>#}
                                    {{ tutorial.description | raw }}
                                </div>
                            </div>
                        {% endif %}

                    </div>

                </div>
            </div>
            <!-- /.card-body -->
            <div class="card-footer">
                <div class="row" style="margin-top: 10px;">
                    <div class="col-12">
                        <h4  style="font-size: 20px;">Tags</h4>
                        <p>{{ tutorial.tags }}</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.card -->

    </section>
    <!-- /.content -->
{% endblock %}