{% extends "base.html" %}
{% load render_bundle from webpack_loader %}
{% load static %}
{% load i18n %}
{% load l10n %}
{% load custom_tags %}

{% block title %}{{ recipe.name }}{% endblock %}

{% block content %}
    {% recipe_rating recipe request.user as rating %}

    <div id="app">
        <recipe-view recipe_id="5"></recipe-view>
    </div>

    {% if request.user.userpreference.comments %}
        <br/>
        <br/>

        <h5 {% if not comments %}class="d-print-none" {% endif %}><i class="far fa-comments"></i> {% trans 'Comments' %}
        </h5>
        {% for c in comments %}
            <div class="card">
                <div class="card-body">
                    <small class="card-title">{{ c.updated_at }} {% trans 'by' %} {{ c.created_by.username }}</small> <a
                        href="{% url 'edit_comment' c.pk %}" class="d-print-none"><i
                        class="fas fa-pencil-alt"></i></a><br/>
                    {{ c.text | urlize |linebreaks }}
                </div>
            </div>
            <br/>
        {% endfor %}

        {% if request.user.is_authenticated %}
            <div class="d-print-none">

                <form method="POST" class="post-form">
                    {% csrf_token %}
                    <div class="input-group mb-3">
            <textarea name="comment-text" cols="15" rows="2" class="textarea form-control" required
                      id="comment-id_text"></textarea>
                        <div class="input-group-append">
                            <input type="submit" value="{% trans 'Comment' %}" class="btn btn-success">
                        </div>
                    </div>
                </form>
            </div>
        {% endif %}
    {% endif %}

{% endblock %}


{% block script %}
    {% if debug %}
        <script src="{% url 'js_reverse' %}"></script>
    {% else %}
        <script src="{% static 'django_js_reverse/reverse.js' %}"></script>
    {% endif %}


    <script type="application/javascript">

        window.CUSTOM_LOCALE = '{{ request.LANGUAGE_CODE }}'
        window.RECIPE_ID = {{recipe.pk}};
        window.SHARE_UID = '{{ share }}';
        window.USER_PREF = {
            'use_fractions': {% if request.user.userpreference.use_fractions %} true {% else %} false {% endif %},
            'ingredient_decimals': {% if request.user.userpreference.use_fractions %} {{ request.user.userpreference.ingredient_decimals }} {% else %} 2 {% endif %},
            'use_kj': {% if request.user.userpreference.use_kj %} true {% else %} false {% endif %},
        }
    </script>

    {% render_bundle 'recipe_view' %}
{% endblock %}