{% if courses|length > 0 %}
<div class="table-responsive">
    {% for course in courses %}
        {% set courseId = course.getId() %}
        <div id="course-box-{{ courseId }}">
            <span data-toggle="collapse"
                  href="#sessions-collapse-{{ courseId }}"
                  class="label label-primary pointer-hand"
            >
                {{ course.getTitle() }}
                <small>
                    ({{ course.getCode() }})
                </small>
            </span>
            &nbsp;
            <i class="fa fa-caret-right pointer-hand"
               data-toggle="collapse"
               href="#sessions-collapse-{{ courseId }}"
            >
            </i>
            <div id="sessions-collapse-{{ courseId }}"
                 class="collapse {% if sessionsList[courseId] is defined %}in{% endif %} sessions-choices-group"
                 data-choices-name="options-course-{{ courseId }}"
            >            
                {% if sessionsList[courseId] is defined %}

                    {% for session in sessionsList[courseId] %}
                        <div class="radio col-md-offset-1">
                            <small>
                                <label>
                                    <input type="radio"
                                           name="options-course-{{ courseId }}"
                                           id="options-course-{{ courseId }}"
                                           value="{{ session.getId() }}"
                                    >
                                    {{ session.getName() }}
                                    &nbsp;

                                    {% if session.getSessionStatus() == 0 %}
                                        <i class="fa fa-circle"
                                           data-toggle="tooltip"
                                           data-placement="top"
                                           title="{{ 'session_not_started'|trans({}, 'cursus') }}"
                                           style="color: #706c6c"
                                        >
                                        </i>
                                    {% elseif session.getSessionStatus() == 1 %}
                                        <i class="fa fa-circle"
                                           data-toggle="tooltip"
                                           data-placement="top"
                                           title="{{ 'session_open'|trans({}, 'cursus') }}"
                                           style="color: #5CB85C"
                                        >
                                        </i>
                                    {% endif %}
                                </label>
                            </small>
                        </div>
                    {% endfor %}
                {% endif %}
                <div class="radio col-md-offset-1">
                    <small><code>
                        <label>
                            <input type="radio"
                                   name="options-course-{{ courseId }}"
                                   id="options-course-{{ courseId }}"
                                   value="0"
                                   {% if sessionsList[courseId] is not defined %}checked{% endif %}
                            >
                            <i class="fa fa-plus"></i>
                            {{ 'create_new_session'|trans({}, 'cursus') }}
                        </label></code>
                    </small>
                </div>
            </div>
        </div>
    {% endfor %}
</div>
{% else %}
    <div class="alert alert-info">
        {{ 'no_course'|trans({}, 'cursus') }}
    </div>
{% endif %}

<div id="multiple-datas-box"
     data-type="{{ type }}"
     {% if type == 'user' %}
         data-user-id="{{ user.getId() }}"
     {% elseif type == 'group' %}
         data-group-id="{{ group.getId() }}"
     {% endif %}
>
</div>