{% autoescape false %}
<div id="about-course" class="about">
    <div id="course-info-top">
        <h2 class="session-title">{{ course.title }}</h2>
        <div class="course-short">
            <ul>
                <li class="author">{{ "Professors"|get_lang }}</li>
                {%  for teacher in course.teachers %}
                    <li>{{ teacher.complete_name }} | </li>
                {% endfor %}
            </ul>
        </div>
    </div>

    {% set course_video = '' %}
    {% for extra_field in course.extra_fields %}
    {% if extra_field.value.getField().getVariable() == 'video_url' %}
    {% set course_video = extra_field.value.getValue() %}
    {% endif %}
    {% endfor %}

    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-sm-5">
                    {% if course_video %}
                    <div class="course-video">
                        <div class="embed-responsive embed-responsive-16by9">
                            {{ essence.replace(course_video) }}
                        </div>
                    </div>
                    {% else %}
                    <div class="course-image">
                        <img src="{{ course.image }}" class="img-fluid" />
                    </div>
                    {% endif %}

                    {% if "display.hide_social_media_links" | api_get_setting == 'false' %}
                    <div class="share-social-media">
                        <ul class="sharing-buttons">
                            <li>
                                {{ "ShareWithYourFriends"|get_lang }}
                            </li>
                            <li>
                                <a href="https://www.facebook.com/sharer/sharer.php?u={{ url }}"
                                   target="_blank" class="btn btn-facebook btn-inverse btn-sm">
                                    <em class="fab fa-facebook-square"></em> Facebook
                                </a>
                            </li>
                            <li>
                                <a href="https://twitter.com/home?{{ {'status': course.title ~ ' ' ~ url }|url_encode }}"
                                   target="_blank" class="btn btn-twitter btn-inverse btn-sm">
                                    <em class="fab fa-twitter"></em> Twitter
                                </a>
                            </li>
                            <li>
                                <a href="https://www.linkedin.com/shareArticle?{{ {'mini': 'true', 'url': url , 'title': course.title }|url_encode }}"
                                   target="_blank" class="btn btn-linkedin btn-inverse btn-sm">
                                    <em class="fab fa-linkedin-in"></em> Linkedin
                                </a>
                            </li>
                        </ul>
                    </div>
                    {% endif %}
                </div>
                <div class="col-sm-7">
                    <div class="course-description">
                        {{ course.description }}
                    </div>
                </div>
            </div>
            {% if course.tags %}
                <ul class="list-inline course-tags d-flex flex-row bd-highlight mb-3">
                    <li class="px-2 bd-highlight">{{ 'Tags'|get_lang }} :</li>
                    {% for tag in course.tags %}
                        <li class="px-2 bd-highlight">
                            <span>{{ tag.getTag }}</span>
                        </li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>
    </div>
    <section id="course-info-bottom" class="course">
        <div class="row">
            <div class="col-sm-8">
                <div class="card">
                    <div class="card-body">
                        <h3 class="sub-title">{{ "CourseInformation"|get_lang }}</h3>
                        <div class="course-information">
                            {% for topic in course.syllabus %}
                                {% if topic.content != '' %}
                                    <div class="topics">
                                        <h4 class="title-info">
                                            <em class="fa fa-book"></em> {{ topic.title }}
                                        </h4>
                                        <div class="content-info">
                                            {{ topic.content }}
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="card">
                    <div class="card-body">
                        {% if is_premium == false %}
                            <h5>{{ 'CourseSubscription'|get_lang }}</h5>
                            <div class="session-subscribe">
                                {% if _u.logged == 0 %}
                                    {% if 'allow_registration'|api_get_setting != 'false' %}
                                        <a href="{{ _p.web_main ~ 'auth/inscription.php' ~ redirect_to_session }}" class="btn btn-success btn-block btn-lg">
                                            <i class="fa fa-pencil" aria-hidden="true"></i> {{ 'SignUp'|get_lang }}
                                        </a>
                                    {% endif %}
                                {% elseif course.subscription %}
                                    <a href="{{ _p.web }}courses/{{ course.code }}/index.php?id_session=0" class="btn btn-lg btn-success btn-block">{{ 'CourseHomepage'|get_lang }}</a>
                                {% else %}
                                    <a href="{{ _p.web }}courses/{{ course.code }}/index.php?action=subscribe&sec_token={{ token }}" class="btn btn-lg btn-success btn-block">{{ 'Subscribe'|get_lang }}</a>
                                {% endif %}
                            </div>
                        {% else %}
                            <div class="session-price">
                                <div class="sale-price">
                                    {{ 'SalePrice'|get_lang }}
                                </div>
                                <div class="price-text">
                                    {{ is_premium.iso_code }} {{ is_premium.price }}
                                </div>
                                <div class="buy-box">
                                    <a href="{{ _p.web }}plugin/buycourses/src/process.php?i={{ is_premium.product_id }}&t={{ is_premium.product_type }}" class="btn btn-lg btn-primary btn-block">{{ 'BuyNow'|get_lang }}</a>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <div class="panel-teachers">
                            <h5 class="sub-title">{{ "Coaches"|get_lang }}</h5>
                        </div>
                        {%  for teacher in course.teachers %}

                        <div class="coach-information">
                            <div class="coach-header">
                                <div class="coach-avatar">
                                    <img class="img-fluid rounded-circle" src="{{ teacher.image }}" alt="{{ teacher.complete_name }}">
                                </div>
                                <div class="coach-title">
                                    <h6>{{ teacher.complete_name }}</h6>
                                    <p> {{ teacher.diploma }}</p>
                                </div>
                            </div>
                            <div class="open-area  {{ course.teachers | length >= 2 ? 'open-more' : ' ' }}">
                                {{ teacher.openarea }}
                            </div>
                        </div>
                        {% endfor %}

                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
    $(function() {
        $('.course-information').readmore({
            speed: 100,
            lessLink: '<a class="hide-content" href="#">{{ 'SetInvisible' | get_lang }}</a>',
            moreLink: '<a class="read-more" href="#">{{ 'ReadMore' | get_lang }}</a>',
            collapsedHeight: 730,
            heightMargin: 100
        });
        $('.open-more').readmore({
            speed: 100,
            lessLink: '<a class="hide-content" href="#">{{ 'SetInvisible' | get_lang }}</a>',
            moreLink: '<a class="read-more" href="#">{{ 'ReadMore' | get_lang }}</a>',
            collapsedHeight: 90,
            heightMargin: 20
        });
    });
</script>
{% endautoescape %}