{% extends 'base.html' %}
{% load static %}

{% block main_content %}

    <!-- Display paragraph if there are no recipes yet-->
    {% if not recipes %}
        <p class="no-articles">There are currently no recipes available.</p>

        <!-- Display a card with information about every recipe (if any)-->
    {% else %}
        <section id="catalogue">
            {% for recipe in recipes %}
                <!-- first recipe-->
                <div class="recipe-card">
                    <div class="image-wrap">
                        <!-- recipe image -->
                        <!-- if there is no image url provided, display the default recipe image -->
                        {% if recipe.image_url %}
                            <img class="recipe-img"
                                 src="{{ recipe.image_url }}"
                                 alt='recipe image'/>
                        {% else %}
                            <img class="recipe-img"
                                 src="{% static '/images/default_recipe_img.png' %}"
                                 alt='recipe image'/>
                        {% endif %}
                    </div>
                    <!-- recipe title -->
                    <h3>{{ recipe.title }}</h3>
                    <!-- recipe cooking time -->
                    <h1>Cooking time: {{ recipe.cooking_time }}min.</h1>
                    <!-- recipe instructions -->
                    <h1>{{ recipe.instructions|truncatechars:35 }}</h1>
                    <div class="details-buttons">
                        <!-- recipe details button -->
                        <a href="{% url 'details-recipe' recipe.pk %}" class="details-btn">Details</a>
                    </div>
                </div>
            {% endfor %}
        </section>
    {% endif %}

{% endblock %}