{% 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();
        $('html, body').animate({
            scrollTop: $('#' + $(this).data('log')).offset().top
        }, 500);
    });
 });
</script>
{% endblock %}


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

{#                                   #}
{# Popups to edit or delete the logs #}
{#                                   #}
{% if is_owner %}
{% for date, value in logs.items %}
{% for exercise, logs in value.logs.items %}
{% for log in logs %}
<div class="modal fade" id="log-popup-{{log.pk}}">
    <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 "Options" %} - {{log.reps}} × {{log.weight}}</h4>
            </div>
            <div class="modal-body">
                <a href="{% url 'manager:log:delete' log.pk %}"
                   title="{% trans 'Delete' %}"
                   class="btn btn-default btn-block">
                       <img src="{% static 'images/icons/trash.svg' %}"
                            width="22"
                            height="22"
                            alt="{% trans 'Delete' %}">
                {% trans 'Delete' %}
                </a>
                <a href="{% url 'manager:log:edit' log.pk %}"
                   title="{% trans 'Edit' %}"
                   class="btn btn-default btn-block">
                       <img src="{% static 'images/icons/edit.svg' %}"
                            width="22"
                            height="22"
                            alt="{% trans 'Edit' %}">
                {% trans 'Edit' %}
                </a>
            </div>
        </div>
    </div>
</div>
{% endfor %}
{% endfor %}
{% endfor %}
{% endif %}

{% 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' %}



    {#      #}
    {# Logs #}
    {#      #}
    <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">{{ exercise }}</div>
            <div class="panel-body" style="min-height: 8em;">
                <ul>
                    {% for log in logs %}
                    <li>
                        {% if is_owner %}
                            <a href="#log-popup-{{log.pk}}" data-toggle="modal">
                                {{log.reps}} × {{log.weight}}
                            </a>
                        {% else %}
                            {{log.reps}} × {{log.weight}}
                        {% endif %}
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        </div>
    {% endfor %}
    </div>
</div>
{% endfor %}

{% endblock %}


{#          #}
{# Side bar #}
{#          #}
{% block sidebar %}
<div class="modal fade" id="calendar-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 %} {{current_workout}}</p>

                     <div class="list-group">
                        {% for day in current_workout.day_set.all %}
                            <a href="{% url 'manager:day:log' day.pk %}" class="list-group-item wger-list-group-item">
                                <span class="glyphicon glyphicon-chevron-right pull-right"></span>
                                {{day.description}}
                            </a>
                        {% endfor %}
                     </div>
                 {% else %}
                     <p><em>{% trans "No workouts found." %}</em></p>
                     <a href="{% url 'manager:workout:add' %}" class="btn btn-default btn-block">
                        <img src="{% static 'images/icons/add.svg' %}"
                             width="22"
                            height="22"
                            alt="">
                         {% trans "Add one now." %}
                     </a>
                 {% 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>
    <a href="{% url 'manager:workout:calendar' owner_user %}" class="btn btn-default btn-block">
        <img src="{% static 'images/icons/calendar.svg' %}"
             width="32"
             height="32"
             alt="{% trans 'Go to current month' %}"
             >
    {% trans "Go to current month" %}</a>

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

{% regroup month_list by year as year_list %}
{% for year in year_list reversed %}
<div class="panel panel-default" style="margin-top: 1em;">
    <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 %}
