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

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

{% block extra_head %}
    {{ form.media }}
    <script src="{% static 'js/vue.min.js' %}"></script>
    <script src="{% static 'js/vue-resource.js' %}"></script>
    <script src="{% static 'js/moment-with-locales.min.js' %}"></script>
{% endblock %}

{% block content %}
    <style>
        .mealplan-cell .mealplan-add-button {
            text-align: center;
            display: block;
        }

        @media (hover: hover) {
            .mealplan-cell .mealplan-add-button {
                visibility: hidden;
                float: right;
                display: inline;
            }

            .mealplan-cell:hover .mealplan-add-button {
                visibility: initial;
            }
        }

    </style>

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

    <div id="app">
        [[plan_entries]]
    </div>

    <script type="application/javascript">
        var app = new Vue({
            delimiters: ['[[', ']]'],
            el: '#app',
            data: {
                message: 'Hello Vue!',
                plan_entries: []
            },
            mounted: function () {
                this.getArticles();
            },
            methods: {
                getArticles: function () {
                    this.loading = true;
                    this.$http.get("{% url 'api:mealplan-list' %}?week=" + moment().format('W')).then((response) => {
                        this.plan_entries = response.data;
                        this.loading = false;
                    })
                        .catch((err) => {
                            this.loading = false;
                            console.log(err);
                        })
                },
            }
        });

    </script>
{% endblock %}