<?php defined('_JEXEC') or die; ?>

<style>
    .course-card_progress {
        -webkit-transform: translatex(-50%);
        -moz-transform: translatex(-50%);
        -ms-transform: translatex(-50%);
        -o-transform: translatex(-50%);
        transform: translatex(-50%);
        position: absolute;
        bottom: -20px;
        left: 50%;
        width: 60px;
        height: 60px;
        margin: 0 auto;
        padding-top: 10px;
        text-align: left;
        z-index: 103;
    }

    .course-card_img-container {
        display: block;
        width: 100%;
        height: 200px;
        margin: 0 auto;
        background-color: #f7f7f7;
    }

    .products_list {
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -1rem;
        margin-left: -1rem;
        padding-right: 0;
        padding-left: 0;
    }

    .course-card_progress .circle .mask {
        clip: rect(0, 60px, 60px, 30px);
    }

    <?php foreach ($applications as $application) : ?>.course-card_progress[data-progress="<?= $application->percentage ?>"] .circle .fill,
    .course-card_progress[data-progress="<?= $application->percentage ?>"] .circle .mask.full {
        -webkit-transition-delay: 1s;
        -moz-transition-delay: 1s;
        transition-delay: 1s;
        -webkit-transform: rotate(<?= (360 * ($application->percentage / 100)) / 2 ?>deg);
        -moz-transform: rotate(<?= (360 * ($application->percentage / 100)) / 2 ?>deg);
        -ms-transform: rotate(<?= (360 * ($application->percentage / 100)) / 2 ?>deg);
        -o-transform: rotate(<?= (360 * ($application->percentage / 100)) / 2 ?>deg);
        transform: rotate(<?= (360 * ($application->percentage / 100)) / 2 ?>deg);
    }

    .course-card_progress[data-progress="<?= $application->percentage ?>"] .circle .fill.fix {
        -webkit-transform: rotate(<?= 360 * ($application->percentage / 100) ?>deg);
        -moz-transform: rotate(<?= 360 * ($application->percentage / 100) ?>deg);
        -ms-transform: rotate(<?= 360 * ($application->percentage / 100) ?>deg);
        -o-transform: rotate(<?= 360 * ($application->percentage / 100) ?>deg);
        transform: rotate(<?= 360 * ($application->percentage / 100) ?>deg);
    }

    <?php endforeach; ?>.course-card_progress .circle .mask .fill {
        background-color: <?= $color ?>;
        clip: rect(0, 30px, 60px, 0);
    }

    .course-card_link:hover {
        background-color: <?= $color ?>;
    }

    .course-card_details>a:hover {
        background-color: <?= $color ?>;
    }

    .course-card_progress .progress_percentage {
        position: absolute;
        width: 54px;
        height: 54px;
        margin-top: 3px;
        margin-left: 3px;
        border-radius: 50%;
        background-color: #fff;
        color: <?= $color ?>;
        line-height: 54px;
        text-align: center;
    }

    .course-card_progress .progress_percentage:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 54px;
        height: 54px;
        border: 1px solid #eceeef;
        border-radius: 50%;
        content: "";
    }

    .course-card_progress .circle .fill,
    .course-card_progress .circle .mask {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: -webkit-transform 400ms ease;
        -moz-transition: -moz-transform 400ms ease;
        transition: transform 400ms ease;
        position: absolute;
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }

    .products_list-item {
        position: relative;
        width: 100%;
        padding-right: 1rem !important;
        padding-left: 1rem !important;
        flex: 0 0 100%;
        max-width: 380px;
        padding-bottom: 2rem !important;
        display: list-item;
    }

    .course-card_dashboard .course-card_link {
        text-decoration: none;
    }

    .course-card_dashboard .course-card__img {
        position: relative;
    }

    .course-card {
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
        -webkit-box-direction: normal;
        -moz-box-direction: normal;
        box-direction: normal;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        flex-direction: column;
        -ms-flex-direction: column;
        -webkit-transition: -webkit-transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
        -moz-transition: -moz-transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
        transition: transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
        position: relative;
        max-width: 479px;
        height: 100%;
        border: 1px solid #eceeef;
        background-color: #fff;
        color: #191919;
        text-decoration: none;
    }

    .course-card_details {
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-top: auto;
        margin-right: 0;
        margin-left: 0;
        font-size: 0;
    }

    .course-card_details>*:last-child,
    .course-card_details>*:only-child {
        border-right: 0;
    }

    .course-card_details>a {
        font-size: 14px !important;
        cursor: pointer;
    }

    .course-card_details a:first-child {
        border-right: 1px solid #eceeef;
    }

    .course-card_details a {
        -webkit-transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
        -moz-transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
        transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
        background-color: #fff;
        color: #191919;
        text-decoration: none;
    }

    .course-card_details>* {
        position: relative;
        width: 100%;
        flex: 0 0 50%;
        max-width: 50%;
        display: inline-block;
        padding: 1rem;
        border-top: 1px solid #eceeef;
        border-bottom: 0;
        font-weight: 600;
        line-height: 1.4rem;
        text-align: center;
    }

    .products_list,
    .products_list-item {
        list-style-type: none;
        padding: 0;
    }

    .course-card_dashboard .course-card_title {
        flex: 100%;
        width: 100%;
        max-width: 100%;
        margin-top: 40px;
        margin-bottom: 5px;
        padding: 1rem;
        font-size: 1rem;
        text-align: center;
    }

    .course-card h2,
    .course-card h3 {
        color: #191919;
        font-size: 18px !important;
    }

    #sbox-window {
        /*left: 10vw !important;
        width: 80vw !important;
        top: 1% !important;
        height: 46vw !important;*/

        left: 6vw !important;
        width: 84vw !important;
        height: 30vw !important;
    }

    @media only screen and (max-width: 900px) {
        .modal {
            height: 100% !important;
            margin-top: 0% !important;
        }

        #sbox-window {
            height: 20% !important;
        }
    }
</style>

<ul class="products_list">
    <?php foreach ($courses as $course) : ?>
        <?php $percentage = ModCourseListHelper::getApplicationPercentage($course->id, $user->id); ?>
        <li class="products_list-item">
            <div class="course-card course-card_dashboard">
                <a href="<?= $course->url ?>" class="course-card_link" tabindex="-1" aria-hidden="true">
                    <div class="course-card__img">
                        <img class="course-card_img-container" src="<?= $course->image ?>">
                        <div class="course-card_progress" data-progress="<?= $percentage ?>">
                            <span class="circle">
                                <span class="mask full">
                                    <span class="fill"></span>
                                </span>
                                <span class="mask half">
                                    <span class="fill"></span>
                                    <span class="fill fix"></span>
                                </span>
                                <span class="progress_percentage">
                                    <?= $percentage ?>%
                                </span>
                            </span>
                        </div>
                    </div>

                    <h3 class="course-card_title"><b><?= strip_tags($course->title) ?> </b></h3>
                </a>

                <div class="course-card_details">
                    <?php if ($course->overviewID != '' && $course->overviewID > 0) : ?>
                        <a class="modal" href="/index.php?option=com_content&amp;view=article&amp;id=<?= $course->overviewID ?>&amp;ml=1">
                            <i class="fa fa-edit" aria-hidden="true"></i>
                            <br>
                            <?= JText::_('MOD_COURSE_LIST_OVERVIEW') ?>
                        </a>
                    <?php else : ?>
                        <a href="#">
                            <i class="fa fa-edit" aria-hidden="true"></i>
                            <br>
                            <?= JText::_('MOD_COURSE_LIST_OVERVIEW') ?>
                        </a>
                    <?php endif; ?>

                    <a href="<?= $course->url ?>">
                        <i class="fa fa-play" aria-hidden="true"></i>
                        <br>
                        <?= $percentage == 0 ? JText::_('MOD_COURSE_LIST_START') : JText::_('MOD_COURSE_LIST_RESUME') ?>
                    </a>
                </div>
            </div>
        </li>
    <?php endforeach; ?>
</ul>