{% extends 'portal/layout/default.html.twig' %}

  {% block meta %}
      {% include 'portal/components/_meta.html.twig' with {'meta':lesson.meta} %}
  {% endblock meta %}

{% block body %}






        <div class="bg-primary content-space-b-1 content-space-t-2 content-space-t-lg-3 ">
            <div class="container">
                <h1 class="text-white">{{ lesson.title }}</h1>

            </div>
        </div>

        <div class="bg-primary content-space-1 ">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 mb-10 mb-lg-0">
                        <div class="card bg-dark shadow-none h-100 rounded">
                            <div class="card-body">

                                <a href="{{ path('app_lesson_category',{'category':lesson.category.slug}) }}" class="mb-3 d-block">
                                <span class="icon icon-sm icon-primary icon-circle me-1">
                                  <i class="bi-grid-fill"></i>
                                </span>
                                    <span class="badge bg-soft-primary text-white">{{ lesson.category.title }}</span>
                                </a>
                                <div class="text-white">
                                <span class="icon icon-sm icon-primary icon-circle me-1 ">
                                  <i class="bi-calendar"></i>
                                </span>
                                    {{ lesson.category.updatedAt|date('Y. m. d.') }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <img class="img-fluid rounded" src="{{ (lesson.image) ? asset(lesson.image) : '' }}" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div id="letoltes" class="container ">
            <p class="h3 content-space-1">{{ lesson.intro }}</p>


            <div class="text-center">
                <p class="h3 mb-5 fw-normal text-primary">A lecke megtekintéséhez kattints a képre. Ha pdf formátumban kéred a leckét, nyomd meg a „PDF LETÖLTÉSE” gombot. Vizsgát tenni a „VIZSGÁZOM” gombra kattintva tudsz, abban az időszakban, amikor az adott témakör aktív. A vizsgaidőszakokat a „Vizsgák” menüpont alatt tudod megnézni. </p>

                <div class="" id="flipbookViewer">
                    <img class="img-fluid rounded" src="{{ (lesson.preview) ? asset(lesson.preview) : '' }}" alt="">
                </div>

                <a class="btn btn-primary rounded-pill mt-5" target="_blank" href="{{ (lesson.pdf) ? asset(lesson.pdf) : '' }}">
                    PDF letöltése
                </a>

                {% if lesson.category.isApply %}
                    <a class="btn btn-primary rounded-pill mt-5 ms-4 {{ (lesson.category.link and lesson.category.startDate|date < 'now'|date and lesson.category.endDate|date > 'now'|date) ? '' : 'disabled' }}" target="_blank" href="{{ lesson.category.link }}">
                        Vizsgázom
                    </a>
                {% endif %}
                
            </div>

        </div>


    <script type="text/javascript" >
        $(document).ready(function () {
            $("#flipbookViewer").flipBook({
                pdfUrl: '{{ (lesson.pdf) ? asset(lesson.pdf) : '' }}',
                lightBox: true,
                viewMode: 'swipe',
                singlePageMode: true,
                btnPrev: false,
                btnZoomIn: false,
                btnZoomOut: false,
                btnAutoplay: false,
                btnBookmark: false,
                btnShare: false,
                btnToc: {
                    enabled: true,
                    order:1
                },
                btnPrint: false,
                btnDownloadPages: false,
                btnDownloadPdf: {
                    order:0,
                    forceDownload: false,
                    enabled: true,
                    title: "Download PDF",
                    iconFA: "flipbook-icon-file",
                    url: null,
                    openInNewWindow: true
                },
                btnExpand: {
                    enabled: true,
                    title: "Toggle fullscreen",
                    iconFA: "flipbook-icon-expand",
                    iconM: "flipbook-icon-fullscreen",
                    iconFA_alt: "flipbook-icon-compress",
                    iconM_alt: "flipbook-icon-fullscreen_exit"
                },
            });
        })
    </script>
{% endblock body %}

{% block javascripts %}
    {{ encore_entry_script_tags('portal',null,'portal') }}
{% endblock %}