{% sw_extends '@Storefront/storefront/base.html.twig' %}

{% block base_header %}{% endblock %}
{% block base_navigation %}{% endblock %}
{% block base_offcanvas_navigation %}{% endblock %}

{% block base_main %}
    <div data-studygood-course style="width: 100%; height: 100%; position: relative">
        <div class="overlay-xl"></div>

        <div data-height class="course-nav sidebar" id="sidebar">
            <div data-height-fix class="d-flex justify-content-end">
                <a
                        title="{{ "general.offcanvasCloseMenu" | trans }}"
                        data-bs-dismiss="sidebar"
                        href="#"
                        class="btn btn-sm btn-outline-primary d-lg-none m-2"
                >
                    {% sw_icon 'times' style {pack: 'fas'} %}
                </a>
            </div>

            <div data-height-fix class="course-information">
                <h1 class="h4"
                    title="{{ course.translated.name }}">
                    {{ course.translated.name }}
                </h1>
            </div>

            <div data-height-auto style="overflow-y: auto;" id="accordion">
                {% sw_include '@Storefront/studygood/course/component/chapter-list.html.twig' %}
            </div>
        </div>

        <div class="course-view">
            <div id="courseHeading" class="sticky-top">
                <div class="p-2 bg-dark d-flex justify-content-between">
                    <div class="text-left">
                        <button data-bs-toggle="sidebar"
                                data-bs-target="#sidebar"
                                aria-label="{{ "studygood.lessons"|trans }}"
                                class="d-lg-none btn btn-sm btn-outline-light">
                            {% sw_icon 'bars' style {pack: 'fas'} %}
                            {{ "studygood.lessons"|trans }}
                        </button>
                    </div>

                    <div class="text-right">
                        {% if fromAccount %}
                            <a href="{{ seoUrl('studygood.account.my-subscriptions') }}"
                               title="{{ "studygood.back"|trans }}"
                               class="btn btn-sm btn-outline-light">
                                {% sw_icon 'times' style {pack: 'fas'} %}
                            </a>
                        {% else %}
                            <a href="{{ seoUrl('frontend.detail.page', {'productId': productId}) }}"
                               title="{{ "studygood.back"|trans }}"
                               class="btn btn-sm btn-outline-light">
                                {% sw_icon 'times' style {pack: 'fas'} %}
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div id="videoContainer" style="height: 70vh;" class="bg-dark">
                {% sw_include '@Storefront/studygood/course/component/main-area.html.twig' with {
                    sgMedia: currentLesson.sgMedia
                } %}
            </div>

            <div id="courseTabs" style="" class="mb-5">
                <div class="nav-tabs-course sticky-top">
                    <div class="container px-0 px-xl-3">
                        <ul class="nav justify-content-center">
                            {% block course_tab_nav_description %}
                                <li class="nav-item">
                                    <a title="{{ "studygood.description"|trans }}" data-bs-toggle="tab" class="nav-link active" href="#lessonDescription">
                                        {% sw_icon 'list-ul' style {size: 'xs', pack: 'fas'} %}
                                        <span class="d-none d-sm-inline">{{ "studygood.description"|trans }}</span>
                                        <span class="triangle-tabs"></span>
                                    </a>
                                </li>
                            {% endblock %}

                            {% block course_tab_nav_files %}
                                <li class="nav-item">
                                    <a title="{{ "studygood.files"|trans }}" data-bs-toggle="tab" class="nav-link" href="#lessonFiles">
                                        {% sw_icon 'file' style {size: 'xs', pack: 'far'} %}
                                        <span class="d-none d-sm-inline">{{ "studygood.files"|trans }}</span>
                                        <span class="badge round badge-light" id="lessonFilesCount">{{ currentLesson.files.count() ?: null }}</span>
                                        <span class="triangle-tabs"></span>
                                    </a>
                                </li>
                            {% endblock %}

                            {% block course_tab_nav_board %}
                                <li class="nav-item">
                                    <a title="{{ "studygood.board"|trans }}" data-bs-toggle="tab" class="nav-link" href="#lessonBoard">
                                        {% sw_icon 'question-circle' style {size: 'xs', pack: 'far'} %}
                                        <span class="d-none d-sm-inline">{{ "studygood.board"|trans }}</span>
                                        <span class="badge round badge-light" id="lessonBoardCount">{{ currentLesson.board.count() ?: null }}</span>
                                        <span class="triangle-tabs"></span>
                                    </a>
                                </li>
                            {% endblock %}

                            {% block course_tab_nav_test %}
                                <li class="nav-item {% if not currentLesson.questions.count() %}d-none{% endif %}" id="lessonMcTestNav">
                                    <a title="{{ "studygood.test"|trans }}" data-bs-toggle="tab" class="nav-link" href="#lessonMcTest">
                                        {% sw_icon 'clipboard-list' style {size: 'xs', pack: 'fas'} %}
                                        <span class="d-none d-md-inline">{{ "studygood.test"|trans }}</span>
                                        <span class="badge round badge-light" id="lessonMcTestCount">{{ currentLesson.questions.count() ?: null }}</span>
                                        <span class="triangle-tabs"></span>
                                    </a>
                                </li>
                            {% endblock %}

                            {% block course_tab_nav_buy_rate %}
                                <li class="nav-item">
                                    {% if esdSubscription %}
                                        {% block course_tab_nav_rate %}
                                            <a title="{{ "studygood.rateCourse"|trans }}" href="{{ seoUrl('frontend.detail.page', { productId: productId }) }}#rating" class="nav-link">
                                                {% sw_icon 'star' style {size: 'xs', pack: 'far'} %}
                                                <span class="d-none d-md-inline">
                                                    {{ "studygood.rateCourse"|trans }}
                                                </span>
                                            </a>
                                        {% endblock %}
                                    {% else %}
                                        {% block course_tab_nav_buy %}
                                            <a title="{{ "studygood.buyCourse"|trans }}" href="{{ seoUrl('frontend.detail.page', { productId: productId }) }}"
                                               class="nav-link">
                                                {% sw_icon 'star' style {size: 'xs', pack: 'far'} %}
                                                <span class="d-none d-md-inline">
                                                    {{ "studygood.buyCourse"|trans }}
                                                </span>
                                            </a>
                                        {% endblock %}
                                    {% endif %}
                                </li>
                            {% endblock %}
                        </ul>
                    </div>
                </div>

                <div class="container">
                    <div class="tab-content">
                        {% block course_tab_content_description %}
                            <div role="tabpanel" id="lessonDescription" class="tab-pane fade active show pt-4 pb-4">
                                {% sw_include '@Storefront/studygood/course/tab/description.html.twig' %}
                            </div>
                        {% endblock %}

                        {% block course_tab_content_files %}
                            <div role="tabpanel" id="lessonFiles" class="tab-pane fade pt-4 pb-4">
                                {% sw_include '@Storefront/studygood/course/tab/files.html.twig' %}
                            </div>
                        {% endblock %}

                        {% block course_tab_content_board %}
                            <div role="tabpanel" id="lessonBoard" class="tab-pane fade pt-4 pb-4">
                                {% sw_include '@Storefront/studygood/course/tab/board.html.twig' %}
                            </div>
                        {% endblock %}

                        {% if currentLesson.questions.count() %}
                            {% block course_tab_content_test %}
                                <div role="tabpanel" id="lessonMcTest" class="tab-pane fade pt-4 pb-4">
                                    {% sw_include '@Storefront/studygood/course/tab/test.html.twig' %}
                                </div>
                            {% endblock %}
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block base_footer %}{% endblock %}