{% extends 'base.html.twig' %}

{% block title %}Rediff{% endblock %}

{% block body %}
{% set backgroundImage = 'images/rediffs/default-no-image.png' %}
<div class="row">
    <div class="col-md-12 grid-margin">
        <div class="d-flex justify-content-between flex-wrap">
            <div class="d-flex align-items-end flex-wrap">
                <div class="d-flex">
                    <i class="mdi mdi-home text-muted hover-cursor"></i>
                    <p class="text-muted mb-0 hover-cursor">
                        &nbsp;/&nbsp;
                        <a class="student-dashbord-service" href="{{ path('home') }}">Tableau de bord</a>
                        &nbsp;/&nbsp;
                    </p>
                    <p class="text-primary mb-0 hover-cursor">rediff</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    {% if ("now"|date('Y-m-d') > app.user.liveCoursesDeadline|date('Y-m-d') and is_granted('ROLE_ADMIN') == false) %}
        <div class="col-sm-6">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <span>Votre accès aux cours en live a expiré le <b>{{app.user.liveCoursesDeadline|date('d/m/Y')}}</b>, veuillez contacter votre agence.</span>
            </div>
        </div>
    {% else %} 
        {# common flash messages bloc #}
        {{ include('common/flash_messages_bloc.html.twig') }}
        {% if is_granted('ROLE_ADMIN') == false %}
            <div class="col-md-12 grid-margin text-center">
                <div class="col-md-4 badge rounded-pill bg-success">Votre abonnement aux cours en live expire le {{app.user.liveCoursesDeadline|date('d/m/Y')}}</div>
            </div>
        {% endif %}

        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div id="content-table" class="row">
                        {% for conference in conferences %}
                            <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 mb-3">
                                <div class="shadow bloc-wraper-theme border bloc-radius bloc-conference" data-id={{ conference.id }}>
                                    <div class="bloc-conference-image" data-id={{ conference.id }}>
                                        <img src="{% if conference.image %}{{ asset(conference.image) }}{% else %} {{asset('/images/default-rect-no-image.jpg')}}{% endif %}" alt="image" class="bloc-radius-top-left bloc-radius-top-right conference-image">
                                    </div>
                                    <div class="bloc-theme-content" style="height: auto !important" data-id={{ conference.id }} >
                                        <div class="p-3 w-100 ">
                                            <h5 class="py-3 mb-2 bloc-title-ellipsis text-hover text-standard-color" style="height:40px">{{ conference.name|capitalize }}</h5>
                                        </div>
                                    </div>
                                </div>

                                {# <div class="shadow bloc-wraper-theme border border bloc-radius bloc-conference" data-id={{ conference.id }}>
                                    <div class="bloc-theme-img" data-id={{ conference.id }} >
                                        <div class="w-100 ">
                                            <img src="{% if conference.image %}{{ asset(conference.image) }}{% else %} {{asset('/images/default-no-image.png')}}{% endif %}" alt="image" class="bloc-radius-top-left bloc-radius-top-right conference-image">
                                        </div>
                                    </div>
                                    <div class="bloc-theme-content" style="height: auto !important" data-id={{ conference.id }} >
                                        <div class="p-3 w-100 ">
                                            <h3 class="py-3 mb-2 bloc-title-ellipsis text-hover" style="height:40px">{{ conference.name|capitalize }}</h3>
                                        </div>
                                    </div>  
                                </div>  #}
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
</div>
<!-- Hidden routs -->
<input type="hidden" id="route_show_replays" value="{{ path('conference_recordings') }}" />

{% endblock %}
{% block pageJavascript %}
    <script>
        //row click
        $(document).on('click', '.bloc-conference', function (e) {
            e.stopPropagation()
            var id = $(this).attr('data-id');
            url = $("#route_show_replays").val() + '/' + id;
            setTimeout(() => {
                $(location).attr('href',url);
            }, 100);
        });
    </script>
{% endblock %}