{# author: Marius Hofmann #}

{% macro format_money(float_value) -%}
    {{ '{:10.2f} €'.format(float_value).replace('.', ',') }}
{% endmacro %}

{% macro format_mass(float_value) -%}
    {{ '{:10.2f} kg'.format(float_value).replace('.', ',') }}
{% endmacro %}

{% macro format_distance(float_value) -%}
    {{ '{:10.2f}m'.format(float_value).replace('.', ',') }}
{% endmacro %}

{% macro get_item_default_image(item) -%}
    {% if item.images.all()[0] %}
        <img class="card-img-top" src="{{ item.images.all()[0].file.url }}" alt="Item default image">
    {% else %}
        <i class="far fa-image fa-10x" title="Kein Standard-Bild definiert" alt="Kein Standard-Bild definiert!"></i>
    {% endif %}
{% endmacro %}

{% macro get_item_shortened_desc(item) -%}
    {% if item.description %}
        {{ item.description|truncate(20, True, '...') }}
    {% endif %}
{% endmacro %}

{% macro get_item_image_ligthbox(item) -%}
    {% if item.images.all()[0] %}
        {# Used this https://lokeshdhakar.com/projects/lightbox2/ to realize the lightbox#}
        <script type="text/javascript">
            $(document).ready(function () {
                $('#lightbox-trigger').click(function () {
                    $('.lightbox-item').first().trigger('click');
                });
            });
        </script>
        <div class="row">
            <div class="col-12">
                <a id="lightbox-trigger" href="#">
                    <img class="img-fluid" src="{{ item.images.all()[0].file.url }}"
                         alt="Item default image">
                </a>
            </div>
        </div>
        <div class="row px-2">
            {% for image in item.images.all() %}
                <div class="col-2 px-1">
                    <a class="lightbox-item" href="{{ image.file.url }}" data-lightbox="{{ title }}"
                       data-title="{{ item.title }}">
                        <img src="{{ image.thumb.url }}" class="media-object img-thumbnail" alt="Bild">
                    </a>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <i class="far fa-image fa-10x" title="Kein Standard-Bild definiert" alt="Kein Standard-Bild definiert!"></i>
    {% endif %}
{% endmacro %}


{% macro print_item_images(item, include_default=False) -%}
    {% for image in item.images.all() %}
        {% if loop.index0 > 0 or include_default %}
            <div class="col-12 col-xs-12 col-md-6 col-lg-6 col-xl-3 pb-2">
                <div class="card w-100" style="width: 18rem;">
                    <img class="img-fluid" src="{{ image.file.url }}" alt="Item image">
                </div>
            </div>
        {% endif %}
    {% endfor %}
{% endmacro %}

{% macro mini_map(location, zoomlevel=13, width=300, height=300) -%}
    <script>
        document.addEventListener("DOMContentLoaded", function (event) {
            let map = L.map('mini-map').setView([{{ location.latitude }}, {{ location.longitude }}], {{ zoomlevel }});


            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
            marker = L.marker([{{ location.latitude }}, {{ location.longitude }}]);
            marker.addTo(map);
            map.addControl(new L.Control.Fullscreen());
        });
    </script>
    <div id="mini-map" style="width: {{ width }}px; height: {{ height }}px;">
    </div>
{% endmacro %}

{% macro filter_panel(types) %}
    <div class="row justify-content-center">
        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-2 text-center">
            <div class="btn-group" role="group" aria-label="Basic example">
                <button type="button" class="btn btn-secondary type-button" value="{{ types.venue }}">Venue</button>
                <button type="button" class="btn btn-secondary type-button" value="{{ types.service }}">Service</button>
                <button type="button" class="btn btn-secondary type-button" value="{{ types.object }}">Objekt</button>
            </div>
        </div>
        <div class="col-6 col-sm-6 col-md-12 col-lg-12 col-xl-12 mb-1">
            <button class="btn btn-secondary w-100" type="button" data-toggle="collapse"
                    data-target="#categories-collapse"
                    aria-expanded="false" aria-controls="categories-collapse">
                Kategorien
            </button>
            <div id="categories-collapse" class="collapse bg-secondary text-dark p-1 border-top border-primary">
                <div id="category-sidebar"></div>
            </div>
        </div>
        <div class="col-6 col-sm-6 col-md-12 col-lg-12 col-xl-12 mb-1">
            <button class="btn btn-secondary w-100" type="button" data-toggle="collapse"
                    data-target="#options-collapse"
                    aria-expanded="false" aria-controls="options-collapse">
                Optionen
            </button>
            <div id="options-collapse" class="collapse bg-secondary text-dark p-1 border-top border-primary">
                <input type="number" class="form-control mb-2 mr-sm-2" id="min-amount"
                       placeholder="Minimale Anzahl" min="0">
                <input type="number" step="0.01" class="form-control mb-2 mr-sm-2" id="max-weight"
                       placeholder="Maximales Gewicht" min="0">
            </div>
        </div>
        <div class="col-6 col-sm-6 col-md-12 col-lg-12 col-xl-12 mb-1">
            <button class="btn btn-secondary w-100" type="button" data-toggle="collapse"
                    data-target="#sizing-collapse"
                    aria-expanded="false" aria-controls="sizing-collapse">
                Abmessungen
            </button>
            <div class="collapse bg-secondary text-dark p-1 border-top border-primary" id="sizing-collapse">
                <div class="row">
                    <div class="col-6">
                        <input type="number" step="0.01" class="form-control mb-2 mr-sm-2" id="min-height"
                               placeholder="Min. Höhe" min="0">
                    </div>
                    <div class="col-6">
                        <input type="number" step="0.01" class="form-control mb-2 mr-sm-2" id="max-height"
                               placeholder="Max. Höhe" min="0">
                    </div>
                </div>
                <div class="row">
                    <div class="col-6">
                        <input type="number" step="0.01" class="form-control mb-2 mr-sm-2" id="min-width"
                               placeholder="Min. Breite" min="0">
                    </div>
                    <div class="col-6">
                        <input type="number" step="0.01" class="form-control mb-2 mr-sm-2" id="max-width"
                               placeholder="Max. Breite" min="0">
                    </div>
                </div>
                <div class="row">
                    <div class="col-6">
                        <input type="number" step="0.01" class="form-control mb-2 mr-sm-2" id="min-depth"
                               placeholder="Min. Tiefe" min="0">
                    </div>
                    <div class="col-6">
                        <input type="number" step="0.01" class="form-control mb-2 mr-sm-2" id="max-depth"
                               placeholder="Max. Tiefe" min="0">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-sm-6 col-md-12 col-lg-12 col-xl-12 mb-1">
            <button class="btn btn-secondary w-100" type="button" data-toggle="collapse"
                    data-target="#lender-collapse"
                    aria-expanded="false" aria-controls="lender-collapse">
                Verleiher
            </button>
            <div id="lender-collapse" class="collapse bg-secondary text-dark p-1 border-top border-primary">
                <select multiple class="form-control" id="lenderSelect"></select>
            </div>
        </div>
        <div class="col-6 col-sm-6 col-md-12 col-lg-12 col-xl-12 mb-1">
            <button class="btn btn-secondary w-100" type="button" data-toggle="collapse"
                    data-target="#loan-agreement-collapse"
                    aria-expanded="false" aria-controls="loan-agreement-collapse">
                Leihvereinbarung
            </button>
            <div id="loan-agreement-collapse" class="collapse bg-secondary text-dark p-1 border-top border-primary">
                <input type="number" class="form-control mb-2 mr-sm-2" id="max-caution"
                       placeholder="Max. Kaution" min="0">
                <input type="number" class="form-control mb-2 mr-sm-2" id="max-single-rent"
                       placeholder="Max. einmalige Leihgebühr" min="0">
                <div id="rental-fee-selection-group" class="form-group">
                    <label for="rentalFeeIntervalSelect">Zahlungsintervall</label>
                    <select class="form-control" id="rentalFeeIntervalSelect"></select>
                </div>
                <input type="number" class="form-control mb-2 mr-sm-2" id="max-rental-fee-costs"
                       placeholder="Max. Mietkosten" min="0">
            </div>
        </div>
        <div class="col-6 col-sm-6 col-md-12 col-lg-12 col-xl-12 mb-1">
            <button class="btn btn-secondary w-100" type="button" data-toggle="collapse"
                    data-target="#availability-collapse"
                    aria-expanded="false" aria-controls="availability-collapse">
                Verfügbarkeit
            </button>
            <div id="availability-collapse" class="collapse bg-secondary text-dark p-1 border-top border-primary">
                <div class="form-group row">
                    <label for="start-date" class="col-2 col-form-label">Von</label>
                    <div class="col-10">
                        <input class="form-control" type="date" value="" id="start-date">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="end-date" class="col-2 col-form-label">Bis</label>
                    <div class="col-10">
                        <input class="form-control" type="date" value="" id="end-date">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6 col-sm-6 col-md-12 col-lg-12 col-xl-12 mb-1">
            <button class="btn btn-secondary w-100" type="button" data-toggle="collapse"
                    data-target="#radius-based-search-collapse"
                    aria-expanded="false" aria-controls="radius-based-search-collapse">
                Umkreissuche
            </button>
            <div id="radius-based-search-collapse"
                 class="collapse bg-secondary text-dark p-1 border-top border-primary">
                <input type="number" class="form-control mb-2 mr-sm-2" id="house-number"
                       placeholder="Hausnummer" min="0">
                <input class="form-control  mb-2 mr-sm-2" type="text" placeholder="Straße" id="street">
                <input class="form-control mb-2 mr-sm-2" type="text" placeholder="Ort" id="city">
                <input type="number" step="0.1" class="form-control mb-2 mr-sm-2" id="distance"
                       placeholder="Distanz in km" min="0">
            </div>
        </div>
        <div class="col-6 col-sm-6 col-md-12 col-lg-12 col-xl-12 mb-1 text-center">
            <button id="reset-filter" class="btn btn-light w-50" type="button">Filter zurücksetzen</button>
        </div>
    </div>
{% endmacro %}

{% macro mailto(lender, subject, content) -%}
    mailto:{{ lender.user.email }}?subject={{ subject|urlencode }}&body={{ content|urlencode }}
{% endmacro %}

{% macro request_mail_subject(items) -%}
    Resourcenpool Bamberg: Anfrage zu {{ items|length }} Artikeln
{% endmacro %}

{% macro request_mail_content(lender, items, requesting_user=None) -%}
    Guten Tag {{ lender.user.first_name }} {{ lender.user.last_name }}

    Ich habe mich über den Resourcenpool Bamberg über Ihre Angebot informiert und würde gerne folgende{{ 'n' if items|count == 1 else '' }} Artikel ausleihen/buchen:
    {% for item in items %}
        - {{ item.title }}
    {% endfor %}
    Ich freue mich auf Ihre Antwort.

    Mit freundlichen Grüßen
    {% if requesting_user %}
        {{ requesting_user.first_name }} {{ requesting_user.last_name }}
    {% endif %}
{% endmacro %}