{% macro tab_menu(title, location_menu, location_menus, fail_text, css_id='menu') -%}
    <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 p-2">
        <h2>{{ title }} </h2>
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="{{ title }}-daily-tab" data-toggle="tab" href="#{{ title }}-daily"
                   role="tab" aria-controls="{{ title }}-daily"
                   aria-selected="true">Daily</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="{{ title }}-weekly-tab" data-toggle="tab" href="#{{ title }}-weekly" role="tab"
                   aria-controls="{{ title }}-weekly" aria-selected="false">Weekly</a>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="{{ title }}-daily" role="tabpanel"
                 aria-labelledby="{{ title }}-daily-tab">
                {{ day_menu(title, location_menu, fail_text, css_id='menu') }}
            </div>
            <div class="tab-pane fade" id="{{ title }}-weekly" role="tabpanel" aria-labelledby="{{ title }}-weekly-tab">
                {{ week_menu(title, location_menus, fail_text) }}
            </div>
        </div>
    </div>
{% endmacro %}

{% macro day_menu(title, location_menu, fail_text, css_id='menu') -%}
    <div id="{{ css_id }}" class="menu">
        <div class="p-3 border border-dark rounded bg-light text-dark">
            {% if location_menu %}
                <p>{{ location_menu.date.strftime('%d.%m.%Y') }}</p>
                {{ get_menu(location_menu.menu.all(), title+"daily") }}
            {% else %}
                <p> {{ fail_text }}</p>
            {% endif %}
        </div>
    </div>
{% endmacro %}

{% macro week_menu(title, location_menus, fail_text) -%}
    <div>
        <div class="p-3 border border-dark rounded bg-light text-dark">
            {% if location_menus %}
                {% for menu in location_menus %}
                    <div class="menu">
                        <p><strong>{{ menu.date.strftime('%A, %d.%m.%Y') }}</strong></p>
                        {{ get_menu(menu.menu.all(), title+"weekly") }}
                    </div>
                {% endfor %}
            {% else %}
                <p> {{ fail_text }}</p>
            {% endif %}
        </div>
    </div>
{% endmacro %}

{% macro get_menu(menu, title="") -%}
    <ul class="border media-list">
        {% for single_food in menu %}
            <li data-food="{{ single_food.id }}" data-rating="{{ single_food.rating }}" class="food-item media mb-2">
                <div class="mr-2 media-left media-middle">
                    {# TODO: without many to many #}
                    {% if single_food.image %}
                        <a href="{{ single_food.image.image.url }}" data-lightbox="{{ title }}"
                           data-title="{{ single_food.name }}">
                            <img src="{{ single_food.image.thumb.url }}" class="media-object" alt="Bild" width="80px">
                        </a>
                    {% else %}
                        <a href="{{ static('img/food/default.jpg') }}" data-lightbox="{{ title }}"
                           data-title="{{ single_food.name }}">
                            <img src="{{ static('img/food/default.jpg') }}" class="media-object"
                                 alt="Bild" width="80px">
                        </a>
                    {% endif %}
                </div>
                <div class="media-body">
                    <div class="row">
                        <div class="food-name col-8">
                            <a href="{{ url('food-detail', args=[single_food.id]) }}">
                                <p>{{ single_food.name }}</p></a>
                        </div>
                        {% if single_food.price_student %}
                            <div class="col-4"><span class="float-right">{{ single_food.price_student }}</span></div>
                        {% endif %}
                        {#<div class="image-wrapper col-4"><img src="" class="img-rounded img" alt="" width="1024"
                                                          height="800"><i
                            class="img-placeholder fa fa-cutlery text-right"></i></div>#}
                    </div>
                    <div class="row">
                        <div class="rating-wrapper col-6 text-left"></div>
                        {# <div class="col-6 text-right">
                        <label for="pic-upload-{{ single_food.id }}" class="custom-pic-upload">
                            <i class="fa fa-camera" aria-hidden="true"></i>
                        </label>
                        <div class="pic-input-wrapper">
                            #}{# TODO: extract style to external css file#}{#
                            <input id="pic-upload-{{ single_food.id }}" class="pic-upload" type="file" name="photo"
                                   id="upload-photo" style="display: none !important;"/>
                        </div>
                    </div>#}
                    </div>
                </div>
            </li>
        {% endfor %}
    </ul>
{% endmacro %}

{% macro happy_hours(happy_hours) %}
    <div class="col p-2">
        <div class="p-3 border border-dark rounded bg-light text-dark">
            <h2>Happy Hours
                <small>von Feki.de</small>
            </h2>
            {% if happy_hours %}
                {% for happy_hour in happy_hours %}
                    <div class="row border">
                        <div class="col-7 col-sm-8 col-md-4 col-lg-4 col-xl-4">{{ happy_hour.location }}</div>
                        <div class="col-5 col-sm-4 col-md-3 col-lg-3 col-xl-3">{{ happy_hour.starttime.strftime('%H:%M') }}
                            - {{ happy_hour.endtime.strftime('%H:%M') }}</div>
                        <div class="col-sm-12 col-md-5 col-lg-5 col-xl-5">{{ happy_hour.description }}</div>
                    </div>
                {% endfor %}
            {% else %}
                <p>Leider gibt es heute keine Happy Hours :(</p>
            {% endif %}
        </div>
    </div>
{% endmacro %}