{% extends "base.html" %}
{% load i18n staticfiles wger_extras %}


{#           #}
{# Opengraph #}
{#           #}
{% block opengraph %}
    {{ block.super }}
    <meta property="og:title" content="{% trans 'Calendar' %}">

    {% with username=owner_user.username %}
        <meta property="og:description" content="{% blocktrans %}Calendar for {{username}}{% endblocktrans %}">
    {% endwith %}
{% endblock %}


{#       #}
{# Title #}
{#       #}
{% block title %}{% trans "Calendar" %}{% endblock %}


{#        #}
{# Header #}
{#        #}
{% block header %}
<script>
$(document).ready(function() {
    $('.calendar-log-data').hide();
    $('table.month td a.btn').click(function(e){
        e.preventDefault();
        $('.calendar-log-data').hide();
        $('#' + $(this).data('log')).toggle();
    });
 });
</script>
{% endblock %}


{#         #}
{# Content #}
{#         #}
{% block content %}
{{calendar|safe}}

{% for date, value in logs.items %}
    <div id="log-{{date|date:'Y-m-d'}}" class="calendar-log-data">

        <h3>
            {{date}}
            <small><a href="{% url 'manager:workout:calendar-day' owner_user date.year date.month date.day %}">{% trans 'Detail page' %}</a></small>
        </h3>

        {% include 'calendar/partial_overview_table.html' %}

        <div class="row" style="margin-top: 2em;">
            {% for exercise, logs in value.logs.items %}
                <div class="col-sm-4">
                <div class="panel panel-default">
                    <div class="panel-heading" style="min-height: 4em;">{{ exercise }}</div>
                    <div class="panel-body" style="min-height: 9em;">
                    <ul>
                    {% for log in logs %}
                        <li>
                            {{log.reps}} × {{log.weight}}
                            {% if is_owner %}
                            <span class="editoptions">
                                <a href="{% url 'manager:log:delete' log.pk %}"
                                   title="{% trans 'Delete' %}"
                                   class="wger-modal-dialog">
                                       <img src="{% static 'images/icons/trash.svg' %}"
                                            width="16"
                                            height="16"
                                            alt="{% trans 'Delete' %}"></a>
                                <a href="{% url 'manager:log:edit' log.pk %}"
                                   title="{% trans 'Edit' %}"
                                   class="wger-modal-dialog">
                                       <img src="{% static 'images/icons/edit.svg' %}"
                                            width="16"
                                            height="16"
                                            alt="{% trans 'Edit' %}"></a>
                            </span>
                            {% endif %}
                        </li>
                    {% endfor %}
                    </ul>
                    </div>
                </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endfor %}
{% endblock %}


{#          #}
{# Side bar #}
{#          #}
{% block sidebar %}
<div class="modal fade" id="ecalendar-day-select-popup">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{% trans 'Add log to day' %}</h4>
            </div>
            <div class="modal-body">
                {% if current_workout %}
                <p>{% blocktrans %}Click to add weight logs to a training
day in your current workout:{% endblocktrans %} <strong>{{current_workout}}</strong></p>

                {% for day in current_workout.day_set.all %}
                    <a href="{% url 'manager:day:log' day.pk %}" class="btn btn-block btn-default">{{day.description}}</a>
                {% endfor %}

                {% else %}
                <p><em>{% trans "No workouts found." %}</em></p>
                <p>
                <a href="{% url 'manager:workout:add' %}" class="btn btn-block btn-default">
                   <img src="{% static 'images/icons/add.svg' %}"
                        width="22"
                        height="22"
                        alt="">
                    {% trans "Add one now." %}
                </a>
                </p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<h4>{% trans 'Info' %}</h4>
<p>{% blocktrans %}The coloured days in the calendar have weight logs,
you can click on them to see the details.{% endblocktrans %}</p>

<p>
    <span style="background-color: #C9302C; display: inline;">&nbsp;</span> {{ impressions.0.1 }}<br>
    <span style="background-color: #EC971F; display: inline;">&nbsp;</span> {{ impressions.1.1 }}<br>
    <span style="background-color: #449D44; display: inline;">&nbsp;</span> {{ impressions.2.1 }}
</p>

<h4>{% trans 'Log' %}</h4>
<p>
    <a href="{% url 'manager:workout:calendar' owner_user %}">
        <img src="{% static 'images/icons/calendar.svg' %}"
             width="32"
             height="32"
             alt="{% trans 'Go to current month' %}">
    {% trans "Go to current month" %}</a>
</p>

{% if is_owner %}
<p>
    <a href="#" id="calendar-day-select-link" data-toggle="modal" data-target="#ecalendar-day-select-popup">
        <img src="{% static 'images/icons/add.svg' %}"
             width="32"
             height="32"
             alt="{% trans 'Add new log' %}">
    {% trans "Add new log" %}</a>
</p>
{% endif %}

{% regroup month_list by year as year_list %}
{% for year in year_list reversed %}
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">{{ year.grouper }}</h3>
        </div>

        <ul class="list-group">
        {% for month in year.list %}
            <a href="{% url 'manager:workout:calendar' owner_user year.grouper month.month %}" class="list-group-item">{{month|date:"F"}}</a>
        {% endfor %}
        </ul>
    </div>
{% endfor %}
{% endblock %}
