{% assign activities_count = 0 %}
{% for course_section in course.sections %}
    {% for course_activity in course_section.activities %}
        {% assign activities_count = activities_count | plus: 1 %}
    {% endfor %}
{% endfor %} 
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}

{% if course.enrolled? %}
  {% assign wrapperClassName = "course-header-left-button" %}
{% else %}
  {% assign wrapperClassName = "course-header-left-button enroll-button" %}
{% endif %}


{% include 'header' %}
{% if course.enrolled? %}
    <script>
        console.log('course enrolled')
        window.location.replace('{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}')
    </script>
{% else %}
    <div class="course">
        <div class="course-header row">
            <div class="course-header-left col-lg-6">
                <div class="course-header-left-title">
                    {{ course.name }}
                </div>
                <div class="course-header-left-subtitles">
                    <div class="course-header-left-subtitles-text" style="margin-right: 30px;">
                        {{ activities_count }} LESSONS COURSE
                    </div>
                    <div class="course-header-left-subtitles-text" time>
                        {{ course.properties.course_time }} 
                    </div>
                </div>
                <a class="{{wrapperClassName}}"  
                {% if course.enrolled? %}
                    href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
                {% else %}
                    href="{% route course_enrollment, code: course.enrollment_code %}"
                {% endif %}>
                    {% if course.started? %}
                        Continue Watching
                    {% else %}
                        {% if course.enrolled? %}
                            Start Course
                        {% else %}
                            Watch Video
                        {% endif %}
                    {% endif %}
                </a>
            </div>
            <div class="course-header-right col-lg-5">
                <img class="course-header-right-image" src="{{ course.image_url }}">
                <div class="course-header-right-background"></div>
            </div>
        </div>
        <div class="course-description">
            <div class="course-description-left">
                <div class="course-description-title">
                    DESCRIPTION
                </div>
                <div class="course-description-text">
                    {{ course.full_description }}
                </div>
            </div>
            <div class="course-description-right">
                <div class="course-description-title">
                    WHAT YOU WILL LEARN
                </div>
                <div class="course-description-text">
                    {% for section in course.sections %}
                        <div class="course-description-text-item">
                            <i class="fa-solid fa-check"></i> {{ section.name }}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% if course.instructors.size != 0 %}
    </div>
        {% assign instructor = course.instructors.first %}
        <div class="course-instructor-wrapper">
            <div class="course-instructor">
                <div class="row">
                    <div class="course-instructor-left-wrapper col-md-6">
                        <div class="course-instructor-left">
                            <div class="course-instructor-left-pretext">
                                THIS COURSE BROUGHT BY
                            </div>
                            <div class="course-instructor-left-about">
                                <img class="course-instructor-left-about-image" src="{{ instructor.avatar_url }}">
                                <div class="course-instructor-left-about-right">
                                    <div class="course-instructor-left-about-right-name">
                                        {{ instructor.name }}
                                    </div>
                                    <div class="course-instructor-left-about-right-title">
                                        {{ instructor.title }}
                                    </div>
                                </div>
                            </div>
                            <div class="course-instructor-left-bio">
                                {{ instructor.bio }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <div class="course" style="display: inline-block">
        {% endif %}
        <div class="course-similar">
            {% include 'similar_courses' %}
        </div>
    </div>
{% endif %}
{% include 'footer' %}

<style>
    .course {
        padding: 0 4% 100px;
    }
    .course-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 80px;
        margin-top: 50px;
    }
    .course-header-left {
        margin: auto 0;
    }
    .course-header-left-title {
        font-family: 'Faktum', sans-serif;
        font-size: 4.75rem;
        font-weight: 800;
        line-height: 80px;
    }
    .course-header-left-subtitles {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        margin-bottom: 50px;
        width: min-content;
        white-space: nowrap;
    }
    .course-header-left-subtitles-text {
        font-weight: 500;
        font-size: 0.9375rem;
        line-height: 24px;
        letter-spacing: 3px;
    }
    .course-header-left-button {
        background: #2F8481;
        color: white;
        font-size: 1.06rem;
        border: none;
        border-radius: 10px;
        padding: 10px 100px;
        text-decoration: none;
        text-align: center;
    }
    .course-header-left-button:hover {
        background: #246b69;
        color: white;
    }
    .course-header-right {
        position: relative;
        display: flex;
    }
    .course-header-right-image {
        width: 100%;
        position: relative;
        border-radius: 10px;
        margin: auto;
        object-fit: contain;
        right: -15%;
    }
    .course-header-right-background {
        height: 100%;
        top: 0;
        z-index: -1;
        width: 100%;
        background: #88D880;
        border-radius: 20px;
        right: -40%;
        position: absolute;
    }
    .course-description {
        display: flex;
        justify-content: space-between;
        margin-bottom: 80px;
    }
    .course-description-left {
        width: 45%;
    }
    .course-description-right {
        width: 40%;
    }
    .course-description-title {
        font-weight: 500;
        font-size: 0.9375rem;
        line-height: 24px;
        letter-spacing: 3px;
        margin-bottom: 20px;
    }
    .course-description-text {
        font-size: 1.375rem;
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
        line-height: 32px;
    }
    .course-description-text-item {
        padding-bottom: 10px;
    }
    .course-description-text-item .fa-check {
        color: #88D880;
        padding: 5px;
    }
    .course-instructor-wrapper {
        margin-bottom: 80px;
        background: #F9F3E9;
    }
    .course-instructor {
        display: flex;
        justify-content: space-evenly;
        position: relative;
        padding: 4%;
    }
    .course-instructor-left-wrapper {
        margin: auto 0;
    }
    .course-instructor-left {
        width: 90%;
    }
    .course-instructor-left-pretext {
        font-weight: 500;
        font-size: 0.9375rem;
        line-height: 24px;
        letter-spacing: 3px;
        margin-bottom: 20px;
    }
    .course-instructor-left-about {
        display: flex;
        padding-bottom: 30px;
        border-bottom: 1px solid #2F8481;
    }
    .course-instructor-left-about-image {
        border-radius: 50%;
        margin-right: 40px;
        height: 160px;
        width: 160px;
    }
    .course-instructor-left-about-right{
        margin: auto 0;
    }
    .course-instructor-left-about-right-name {
        font-weight: 800;
        font-size: 2.125rem;
        line-height: 46px;
        font-family: 'Faktum', sans-serif;
        padding-bottom: 15px;
    }
    .course-instructor-left-about-right-title {
        font-size: 1.5rem;
        line-height: 32px;
        color: black;
        font-family: 'Faktum', sans-serif;
    }
    .course-instructor-left-bio {
        margin-top: 30px;
        font-weight: 300;
        font-size: 1.125rem;
        line-height: 32px;
    }
    .course-instructor-right {
        margin: auto;
    }
    .course-instructor-right-image {
        width: 100%;
    }
    @media only screen and (min-width: 1800px) {
        .course {
            padding: 0 10% 100px;
        }
        .course-instructor {
            padding: 72px 10%;
        }
        .course-header-right-image {
            right: -31%;
        }
    }
    @media only screen and (min-width: 1200px) {
        .course-header-right-image {
            margin: 30px 0;
        }
    }
    @media only screen and (max-width: 1050px) {
        .course {
            padding: 0 4%;
        }
        .course-header {
            flex-direction: column-reverse;
        }
        .course-header-left {
            width: 100%;
            display: inline-flex;
            flex-direction: column;
        }
        .course-header-right {
            margin: auto 0;
            width: 100%;
        }
        .course-header-right-image {
            float: none;
            height: auto;
            margin-bottom: 20px;
            margin-left: 0;
            right: 0;
        }
        .course-header-right-background {
            display: none;
        }
        .course-description-left {
            width: 50%;
        }
        .course-description-right {
            width: 45%;
        }
    }
    @media only screen and (max-width: 850px) {
        .course-header-left-title {
            font-size: 4rem;
            line-height: 60px;
        }
        .course-header-right-image {
            width: 100%;
        }
        .course-header-left {
            width: 100%;
        }
        .course-instructor-left-about {
            width: 100%;
        }
        .course-instructor-left-bio {
            width: 100%;
        }
        .course-instructor-right {
            display: none;
        }
        .course-description {
            flex-direction: column;
        }
        .course-description-left {
            width: 90%;
            margin: auto auto 20px;
        }
        .course-description-right {
            width: 90%;
            margin: auto;
        }
    }
    @media only screen and (max-width: 850px) {
        .course-description-left {
            width: 100%;
        }
        .course-description-right {
            width: 100%;
        }
    }
</style>

<script>
    /* parse time property to human format */
    var a = parseInt($('[time]').text());
    var minutes = a % 60;
    var hours = Math.floor(a / 60);
    var time = '';
    if (hours != 0) {
        time = time + hours.toString() + 'h ';
    }
    if (minutes != 0) {
        time = time + minutes.toString() + 'm';
    }
    $('[time]').text(time);

    // document.querySelector('.enroll-button').addEventListener('click', redirectToCoursePage);

    let redirectToCoursePage = () => {
        setTimeout(1000, () => {
            window.location.replace('{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}')
        })
    }
</script>