{% import "@ChamiloTheme/Macros/box.html.twig" as macro %}
{% block content %}
{% autoescape false %}
<script>
    $(function() {
        $('#date').datepicker({
            dateFormat: 'yy-mm-dd'
        });
    });
</script>
<div class="catalog" style="width: 100%;">
    <h2>{{ 'Catalog Sessions'|get_lang }}</h2>
    <div class="search">
        <div class="row">
            <div class="col-md-6">
                <form method="post" action="{{ _p.web_self }}?action=display_sessions">
                    <div class="form-group">
                        <label>{{ "ByDate"|get_lang }}</label>
                        <div class="input-group">
                            <input type="date" name="date" id="date" title="{{ 'Date'|get_lang }}"
                                   class="form-control" value="{{ search_date }}" readonly>
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="submit">
                                    <em class="fa fa-search"></em> {{ 'Search'|get_lang }}
                                </button>
                            </span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-md-6">
                <form method="post" action="{{ _p.web_self }}?action=search_tag">
                    <label>{{ "ByTag"|get_lang }}</label>
                    <div class="input-group">
                        <input type="text" name="search_tag" title="{{ 'ByTag'|get_lang }}" class="form-control"
                               value="{{ search_tag }}"/>
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="submit">
                                <em class="fa fa-search"></em> {{ 'Search'|get_lang }}
                            </button>
                        </span>
                    </div>
                </form>
            </div>
        </div>
        <div class="list-course">
            {% for item in sessions %}
            <div class="item-course">
                {% set image %}
                    {% if item.category != '' %}
                        <div class="category">
                            {{ item.category }}
                        </div>
                    {% endif %}
                    <a href="{{ _p.web ~ 'session/' ~ item.id ~ '/about/' }}" title="{{ item.name }}">
                        <img class="img-fluid" src="{{ item.image ? _p.web_upload ~ item.image : 'session_default.png'|icon() }}">
                    </a>
                {% endset %}
                {% set content %}
                    <div class="card-title">
                        <h5 class="title">
                            <a href="{{ _p.web ~ 'session/' ~ item.id ~ '/about/' }}" title="{{ item.name }}">
                                {{ item.name }}
                            </a>
                        </h5>
                    </div>

                    {% if show_tutor and item.coach_id %}
                    <div class="card-author mb-2">
                        <i class="fa fa-graduation-cap" aria-hidden="true"></i>
                            <a href="{{ item.coach_url }}" class="ajax" data-title="{{ item.coach_name }}">
                                {{ item.coach_name }}
                            </a>
                            <p>{{ 'SessionGeneralCoach'|get_lang }}</p>
                    </div>
                    {% endif %}

                    <div class="card-info">
                        <ul class="info list-inline">
                            <li>
                                <i class="fa fa-book" aria-hidden="true"></i>
                                {{ item.nbr_courses ~ ' ' ~ 'Courses'|get_lang }}
                            </li>
                            <li>
                                <i class="fa fa-user" aria-hidden="true"></i>
                                {{ item.nbr_users ~ ' ' ~ 'NbUsers'|get_lang }}
                            </li>
                        </ul>
                    </div>

                    <div class="card-date">
                        {{ item.duration ? 'SessionDurationXDaysLeft'|get_lang|format(item.duration) : item.date }}
                    </div>

                    <div class="card-sequence">
                        {% if item.price %}
                            <div class="col-sm-4">
                                {{ item.price }}
                            </div>
                        {% endif %}
                        {% if _u.logged %}
                            <div class="col-sm-8">
                                <div class="btn-group btn-group-sm" role="group">
                                    {% if not item.sequences is empty %}
                                        <a class="btn btn-primary btn-sm" role="button"
                                           title="{{ 'SeeSequences'|get_lang }}" data-toggle="popover"
                                           id="session-{{ item.id }}-sequences">
                                            <i class="fas fa-sitemap"></i>
                                        </a>
                                    {% endif %}
                                    {% if item.is_subscribed == false %}
                                        {{ item.subscribe_button }}
                                    {% endif %}
                                </div>
                            </div>
                        {% endif %}
                        {% if _u.logged %}
                            <script>
                                $('#session-{{ item.id }}-sequences').popover({
                                    placement: 'bottom',
                                    html: true,
                                    trigger: 'click',
                                    content: function () {
                                        var content = '';
                                        {% if item.sequences %}
                                        {% for sequence in item.sequences %}
                                        content += '<p class="lead">{{ sequence.name }}</p>';
                                        {% if sequence.requirements %}
                                        content += '<p><em class="fa fa-sort-amount-desc"></em> {{ 'RequiredSessions'|get_lang }}</p>';
                                        content += '<ul>';

                                        {% for requirement in sequence.requirements %}
                                        content += '<li>';
                                        content += '<a href="{{ _p.web ~ 'session/' ~ requirement.id ~ '/about/' }}">{{ requirement.name }}</a>';
                                        content += '</li>';
                                        {% endfor %}

                                        content += '</ul>';
                                        {% endif %}

                                        {% if sequence.dependencies %}
                                        content += '<p><em class="fa fa-sort-amount-desc"></em> {{ 'DependentSessions'|get_lang }}</p>';
                                        content += '<ul>';

                                        {% for dependency in sequence.dependencies %}
                                        content += '<li>';
                                        content += '<a href="{{ _p.web ~ 'session/' ~ dependency.id ~ '/about/' }}">{{ dependency.name }}</a>';
                                        content += '</li>';
                                        {% endfor %}

                                        content += '</ul>';
                                        {% endif %}

                                        {% if item.sequences|length > 1 %}
                                        content += '<hr>';
                                        {% endif %}
                                        {% endfor %}
                                        {% else %}
                                        content = "{{ 'NoDependencies'|get_lang }}";
                                        {% endif %}

                                        return content;
                                    }
                                });
                            </script>
                        {% endif %}
                    </div>

                {% endset %}
                {{ macro.panel_course(item.id, '', content, '', '', '', image) }}
            </div>
            {% else %}
                <div class="alert alert-warning" role="alert">
                    {{ 'No registered courses were found'|get_lang }}
                </div>
            {% endfor %}
        </div>
</div>
    {{ catalog_pagination }}
{% endautoescape %}
{% endblock %}