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

{% block title %}{% trans 'View' %}{% endblock %}

{% block content %}

    <h3>{{ recipe.name }} <a href="{% url 'edit_recipe' recipe.pk %}"><i class="fas fa-pencil-alt"></i></a></h3>
    {% if recipe.storage %}
        <small>{% trans 'in' %} <a
                href="{% url 'edit_storage' recipe.storage.pk %}">{{ recipe.storage.name }}</a></small><br/>
    {% endif %}

    {% if recipe.internal %}
        <small>{% trans 'by' %} {{ recipe.created_by.username }}</small><br/>
    {% endif %}

    <br/>

    {% if recipe.all_tags %}
        {{ recipe.all_tags }}
        <br/>
        <br/>
    {% endif %}

    {% if recipe.time and recipe.time != 0 %}
        <small>{% trans 'Preparation time ca.' %} {{ recipe.time }} min </small>
        <br/>
        <br/>
    {% endif %}

    {% if ingredients %}
        <div class="row">
            <div class="col col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">{% trans 'Ingredients' %}</h5>
                        <table class="">
                            {% for i in ingredients %}
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>{{ i.amount.normalize }} {{ i.unit }}</td>
                                    <td style="padding-left: 8px">{{ i.name }}</td>
                                </tr>
                            {% endfor %}
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <br/>
        <br/>
    {% endif %}

    {% if recipe.instructions %}
        {{ recipe.instructions | markdown | safe }}
    {% endif %}

    {% if recipe.storage %}
        <a href='#' onClick='openRecipe({{ recipe.id }})'>{% trans 'View external recipe' %} <i
                class="fas fa-external-link-alt"></i></a>
    {% endif %}

    {% if not recipe.internal %}
        <br/>
        <br/>
        <br/>
        <div class="card border-info">
            <div class="card-body text-info">
                <h5 class="card-title">{% trans 'External recipe' %}</h5>
                <p class="card-text">
                    {% blocktrans %}
                        This is an external recipe, which means you can only view it by opening the link above.
                        You can convert this recipe to a fancy recipe by pressing the convert button. The original file
                        will still be accessible.
                    {% endblocktrans %}.
                    <br/>
                    <br/>
                    <a href="{% url 'edit_convert_recipe' recipe.pk %}"
                       class="card-link btn btn-info">{% trans 'Convert now!' %}</a>
                </p>
            </div>
        </div>
    {% endif %}

    <br/>
    <br/>

    <h5>{% trans 'Comments' %}</h5>

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

    {% 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 %}"><i class="fas fa-pencil-alt"></i></a><br/>
                {{ c.text }}
            </div>
        </div>
        <br/>
    {% endfor %}

    {% if recipe.storage %}
        {% include 'include/recipe_open_modal.html' %}
    {% endif %}
{% endblock %}