{% load static %}
{% load i18n %}
{% load template_filters %}



<div class="ep-sect eps-opened">
    <div class="ep-sect-title"><a class="eps-open" href="#">{% trans 'визуализация' %}</a></div>
    <div class="ep-sect-body calenadar-body">
        <header>
            <div class="pc-month-wrap">
                <a class="pcm-prev" href="/profile/calendar/?year={{ days.15|add_month:'-1'|date:'Y' }}&month={{ days.15|add_month:'-1'|date:'m' }}">&lt;</a>
                <div class="pc-month">{{ days.15|date:"F"}}’{{ days.15|date:"y"}}</div>
                <a class="pcm-next" href="/profile/calendar/?year={{ days.15|add_month:'1'|date:'Y' }}&month={{ days.15|add_month:'1'|date:'m' }}">&gt;</a>
            </div>
        </header>
        <div class="cal-wrap">
            <div class="calendar-container" >
                <div class="scroll-content" id="calendar-scroll-box">
                    {% with events=events %}
                    <table id="calendar-table">
                        <tbody class="cal-days">
                            <tr>
                            {% for day in days %}
                                {% ifnotequal day current_day %}
                                <td width="115"><div><b>{{ day|date:"d" }}</b>/<i>{% if LANGUAGE_CODE == 'ru' %}{{ day|get_rus_day }}{% else %}{{ day|date:"D" }}{% endif %}</i></div></td>
                                {% else %}
                                <td class="c-cur">
                                    <div>
                                        <div class="cur-mark">{% trans 'Сегодня' %}</div>
                                        <b>{{ day|date:"d" }}</b>/<i>{% if LANGUAGE_CODE == 'ru' %}{{ day|get_rus_day }}{% else %}{{ day|date:"D" }}{% endif %}</i>
                                    </div>
                                </td>
                                {% endifnotequal %}
                            {% endfor %}
                            </tr>
                            </tbody>

                        <tbody class="cal-body">
                        {# первый ряд с отображениями дней где нет событий #}
                        <tr>
                            {% for day in days %}

                                {% if day_colspan|get_item:day|get_item:'event' %}
                                    {% ifnotequal day current_day %}
                                        <td></td>
                                    {% else %}
                                        <td class="c-cur"></td>
                                    {% endifnotequal %}

                                {% else %}
                                    {% if day_colspan|get_item:day|get_item:'counter' %}
                                        {# здесь ячейка с днями без событий #}
                                        <td class="c-cur no-events" colspan="{{ day_colspan|get_item:day|get_item:'counter' }}">
                                            <div class="c-event">
                                                <div class="ce-wrap"><div class="message">{% trans "Нет отмеченых событий" %}</div></div>
                                            </div>
                                        </td>

                                    {% endif %}

                                {% endif %}


                            {% endfor %}
                        </tr>
                        <tr class="c-sep">
                            {% for day in days %}
                            {% ifnotequal day current_day %}
                            <td></td>
                            {% else %}
                            <td class="c-cur"></td>
                            {% endifnotequal %}
                            {% endfor %}


                        </tr>
                        {% for event in events %}
                        <tr>
                            {% for day in days %}

                                {% if event|in_event:day %}
                                    {% if day.month == event.data_begin.month %}
                                        {% if day.day == event.data_begin.day %}
                                            <td class="c-cur" colspan="{{ event|duration:day.month }}">
                                                <div class="c-event active-event {% if day.month != event.data_end.month %}cont-next{% endif %}">
                                                    <div class="ce-wrap">
                                                        <h3><a href="{{ event.get_permanent_url }}">{{ event.name|safe }}</a></h3>

                                                        <div class="ce-info">
                                                            <div class="cei-icons">
                                                                <span class="ce-ico icon-check"></span>
                                                                <span class="ce-ico icon-fav"></span>
                                                            </div>
                                                            <div class="cei-place">{{ event.country }}, {{ event.city }}
                                                                {% if event.plave %}
                                                                , {{ event.place.address.address }}
                                                                {% endif %}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        {% endif %}
                                    {% else %}
                                        {% if day.day == event.data_end.day %}
                                            <td class="c-cur" colspan="{{ event|duration:day.month }}">
                                                <div class="c-event cont-prev">
                                                    <div class="ce-wrap">
                                                        <h3><a href="{{ event.get_permanent_url }}">{{ event.name|safe }}</a></h3>

                                                        <div class="ce-info">
                                                            <div class="cei-icons">
                                                                <span class="ce-ico icon-check"></span>
                                                                <span class="ce-ico icon-fav"></span>
                                                            </div>
                                                            <div class="cei-place">{{ event.country }}, {{ event.city }}
                                                                {% if event.plave %}
                                                                , {{ event.place.address.address }}
                                                                {% endif %}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        {% endif %}
                                    {% endif %}
                                {% else %}
                                    {% ifnotequal day current_day %}
                                        <td></td>
                                    {% else %}
                                    <td class="c-cur"></td>
                                    {% endifnotequal %}

                                {% endif %}
                            {% endfor %}

                        </tr>
                        <tr class="c-sep">
                            {% for day in days %}
                                {% ifnotequal day current_day %}
                                    <td></td>
                                {% else %}
                                    <td class="c-cur"></td>
                                {% endifnotequal %}
                            {% endfor %}


                        </tr>
                        {% endfor %}
                        </tbody>

                    </table>
                    {% endwith %}
                </div>

            </div>
        </div>
    </div>
    <div class="cal-scroll-button to-left" id="cal-scroll-left"><span class="sprite">&nbsp;</span></div>
    <div class="cal-scroll-button to-right" id="cal-scroll-right"><span class="sprite">&nbsp;</span></div>
</div>
{% block scripts %}
<!--todo: вернуть минифицированную версию-->
<!--<script src="{% static 'client/js' %}{% if debug %}/{% else %}_min/{% endif %}_modules/page.profile.calendar{% if debug %}{% else %}.min{% endif %}.js"></script>-->
<script src="{% static 'client/js/_modules/page.profile.calendar.js' %}"></script>
<script>
    EXPO.profile.calendar.init({
        calenadrId:'calendar-table',
        scrollBoxId: 'calendar-scroll-box',
        currentDayClass:'c-cur',
        daysClass:'cal-days',
        bodyClass: 'cal-body',
        scrollLeftId: 'cal-scroll-left',
        scrollRightId: 'cal-scroll-right',
        calendarToggleClass:'eps-open',
        noEventsClass:'no-events',
        eventsClass:'active-event',
        eventWrapClass:'ce-wrap',
        cellWidth: 137,
        cellsToScroll:7

    });
</script>

{% endblock %}