{% load i18n %}
<div class="row align-center">
    <h4 class="bold max">{{ recipe.title }}</h4>
    {% if user.is_authenticated %}
    <a href="{% url 'toggle_favorite' recipe.pk %}" id="favorite-toggle-button" class="button circle transparent" title="{% trans 'Toggle Favorite' %}">
        <i class="{% if recipe in user.favorites.all %}red-text{% else %}primary-text{% endif %}">
            {% if recipe in user.favorites.all %}favorite{% else %}favorite_border{% endif %}
        </i>
    </a>
    {% endif %}
</div>

<div class="row align-center">
     {% if recipe.uploaded_by %}
        <a href="{% url 'index' %}?uploader={{ recipe.uploaded_by.username }}" class="row align-center" style="color: inherit; text-decoration: none;">
            {% if recipe.uploaded_by.avatar %}
            <img src="{{ recipe.uploaded_by.avatar.url }}" class="circle small" alt="{{ recipe.uploaded_by.username }}">
            {% else %}
            <i class="small circle surface">person</i>
            {% endif %}
            <div class="ml-2">
                <span class="small-text">{% trans "Uploaded by" %}</span>
                <div class="bold">{{ recipe.uploaded_by.get_full_name|default:recipe.uploaded_by.username }}</div>
            </div>
        </a>
    {% else %}
        <i class="small circle surface">person_off</i>
        <div class="ml-2">
            <span class="small-text">{% trans "Unknown uploader" %}</span>
        </div>
    {% endif %}
</div>

<div class="space"></div>

<div class="row wrap gap-3">
    {% if recipe.prep_time %}
    <div class="row align-center">
        <i class="small">timer</i>
        <span class="ml-1">{% trans "Prep:" %} {{ recipe.prep_time }}m</span>
    </div>
    {% endif %}
    {% if recipe.cook_time %}
    <div class="row align-center">
        <i class="small">cooking</i>
        <span class="ml-1">{% trans "Cook:" %} {{ recipe.cook_time }}m</span>
    </div>
    {% endif %}
    {% if recipe.calories %}
    <div class="row align-center">
        <i class="small">bolt</i>
        <span class="ml-1">{{ recipe.calories }} kcal</span>
    </div>
    {% endif %}
    <div class="row align-center">
        <i class="small">group</i>
        <span class="ml-1">{{ recipe.servings }} {% trans "servings" %}</span>
    </div>
</div>

<div class="space"></div>
{% if recipe.price %}
<div class="row align-center">
    <i class="primary-text">euro_symbol</i>
    <h5 class="bold ml-1">{{ recipe.price }}</h5>
    {% if user.is_authenticated %}
    <form action="{% url 'add_to_cart' recipe.pk %}" method="post" class="ml-2">
        {% csrf_token %}
        <button type="submit" class="button primary round">
            <i>add_shopping_cart</i>
            <span>{% trans "Add to Cart" %}</span>
        </button>
    </form>
    {% endif %}
</div>
{% endif %}