@extends('dashboard::layouts.app-user')

@section('app-user-content')
<div class="row">
    <div class="hackathons-main-block clearfix">
        @include('dashboard::partials.session')

        {{--<div class="hackathons-block">--}}
            {{--<h2 class = "hackathons-heading">--}}
                {{--@if(isset($myHackathonsTitle))--}}
                    {{--{{ $myHackathonsTitle }}--}}
                {{--@else--}}
                    {{--RECENT HACKATHONS--}}
                {{--@endif--}}
            {{--</h2>--}}
        {{--</div>--}}

        @if(!$hackathons->isEmpty())
            @if($hackathons->count() > 1)
                <div class="slider slider-for">
                    @foreach($hackathons as $hackathon)
                        <div class = "pos-rel slider-element">
                            @if(!$hackathon->files->isEmpty())
                                <img src="/thumbnails/modules/hackathon/entities/hackathon/{{ $hackathon->id }}/1920x1080/{{ $hackathon->files->first()->name }}" alt="Image" />
                            @else
                                <div class="slider-image-not-found">
                                    No image found
                                </div>
                            @endif
                            {{--<div class="hackathon-slider-wrapper"></div>--}}
                            <div class="gradient">
                                <div class="slider-hackathon-info-container">
                                    <div class="slider-hackathon-info-centered">
                                        <div class="slider-hackathon-title slider-bottom-margin">
                                            <h2 class = "text-uppercase medium-font">
                                                {!! str_limit(strip_tags($hackathon->title, '<br>'), 60) !!}
                                            </h2>
                                        </div>
                                        <div class="slider-hackathon-rating slider-bottom-margin clearfix">
                                            <input type="hidden" name = "_token" value="{{ csrf_token() }}">
                                            <div class="rating-container {{ isset($userRatedHackathonIds) && in_array($hackathon->id, $userRatedHackathonIds) || $hackathon->is_demo !== 1 && isset($userBoughtHackathonIds) && !in_array($hackathon->id, $userBoughtHackathonIds) ? 'unavailable-ratings' : ''}}" data-id="{{$hackathon->id}}">
                                                <i class="demo-icon icon-flash-outline {{ $hackathon->is_demo == 1 || isset($userRatedHackathonIds) && !in_array($hackathon->id, $userRatedHackathonIds) && isset($userBoughtHackathonIds) && in_array($hackathon->id, $userBoughtHackathonIds) ? 'customized-class' : ''}}" data-value="1"></i>
                                                <i class="demo-icon icon-flash-outline {{ $hackathon->is_demo == 1 || isset($userRatedHackathonIds) && !in_array($hackathon->id, $userRatedHackathonIds) && isset($userBoughtHackathonIds) && in_array($hackathon->id, $userBoughtHackathonIds) ? 'customized-class' : ''}}" data-value="2"></i>
                                                <i class="demo-icon icon-flash-outline {{ $hackathon->is_demo == 1 || isset($userRatedHackathonIds) && !in_array($hackathon->id, $userRatedHackathonIds) && isset($userBoughtHackathonIds) && in_array($hackathon->id, $userBoughtHackathonIds) ? 'customized-class' : ''}}" data-value="3"></i>
                                                <i class="demo-icon icon-flash-outline {{ $hackathon->is_demo == 1 || isset($userRatedHackathonIds) && !in_array($hackathon->id, $userRatedHackathonIds) && isset($userBoughtHackathonIds) && in_array($hackathon->id, $userBoughtHackathonIds) ? 'customized-class' : ''}}" data-value="4"></i>
                                                <i class="demo-icon icon-flash-outline {{ $hackathon->is_demo == 1 || isset($userRatedHackathonIds) && !in_array($hackathon->id, $userRatedHackathonIds) && isset($userBoughtHackathonIds) && in_array($hackathon->id, $userBoughtHackathonIds) ? 'customized-class' : ''}}" data-value="5"></i>
                                            </div>
                                            <div class="hackathon-loader">
                                                <img src="/images/app/hackathon/loader.gif" alt="Loader" />
                                            </div>
                                            <div class="rating-status"></div>
                                        </div>
                                        <div class="slider-hackathon-teaser slider-bottom-margin">
                                            <p>
                                                {!! str_limit(strip_tags($hackathon->teaser, '<br>'), 430) !!}
                                            </p>
                                        </div>
                                        <div class="slider-hackathon-price">
                                            <p>
                                                {!! $hackathon->present()->showLinkToPayPalOrButtonStartHackathon($hackathon) !!}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="slider slider-nav">
                    @foreach($hackathons as $hackathon)
                        <div id = "slider-nav-hackathon-{{ $hackathon->slug }}" class = "pos-rel slider-element slider-navigation-element transition">
                            <div class="bordered transition">
                                <div class="internal-padding">
                                    @if(!$hackathon->files->isEmpty())
                                        <img src="/thumbnails/modules/hackathon/entities/hackathon/{{ $hackathon->id }}/420x180/{{ $hackathon->files->first()->name }}" alt="Image" />
                                    @else
                                        <div class="slider-image-not-found">
                                            No image found
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="hackathon-slider-wrapper transition"></div>
                            {{--<div class="hackathon-slider-arrow-active transition">--}}
                                {{--<i class="fa fa-2x fa-caret-down active-slider-nav-indicator orange-colour" aria-hidden="true"></i>--}}
                            {{--</div>--}}
                        </div>
                    @endforeach
                </div>

                <div class="loader-before-slider-initialization text-center">
                    <img src="/images/app/hackathon/loader.gif" alt="Loader" />
                </div>
            @else