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

{% block title %}{% trans 'Meal-Plan' %}{% endblock %}

{% block extra_head %}
    {{ form.media }}
{% endblock %}

{% block content %}

    <h3>
        {% trans 'Meal-Plan' %} <a href="{% url 'new_plan' %}"><i class="fas fa-plus-circle"></i></a>
    </h3>

    <div class="row">
        <div class="col-md-12">
            <form action="{% url 'view_plan' %}" method="post">
                {% csrf_token %}
                <label>{% trans 'Week' %}
                    <input name="week" id="id_week" class="form-control" type="week"
                           onchange="document.forms[0].submit()" value="{{ js_week }}">
                </label>
            </form>
        </div>
    </div>
    <br/>
    <div class="row">
        <div class="col-md-12 table-responsive">
            <table class="table table-bordered">
                <tr style="text-align: center">
                    {% for d in days %}
                        <th>{{ d }}</th>
                    {% endfor %}
                </tr>
                {% for plan_key, plan_value in plan.items %}

                    <tr>
                        <td colspan="7" style="text-align: center"><h5>{{ plan_value.type_name }}</h5></td>
                    </tr>
                    <tr>
                        {% for day_key, days_value in plan_value.days.items %}
                            <td>
                                {% for mp in days_value %}
                                    <a href="{% url 'edit_plan' mp.pk %}"><i class="fas fa-edit"></i></a>
                                    <a href="#" onclick="openRecipe({{ mp.recipe.id }})">{{ mp.recipe.name }}</a><br/>
                                {% endfor %}
                            </td>
                        {% endfor %}
                    </tr>
                {% endfor %}

            </table>
        </div>
    </div>

    {% include 'include/recipe_open_modal.html' %}

{% endblock %}