{% load i18n %}
<div class="grid justify-center" id="recipe-grid">
  {% for recipe in recipes %}
  <div class="s12 m6 l4 xl3 recipe-card">
    <article class="round no-padding elevate secondary-container">
       <div style="position: relative;">
         {% if recipe.image %}
         <img src="{{ recipe.image_medium.url }}" class="responsive top-round" style="height:220px; width:100%; object-fit:cover; cursor:pointer;" loading="lazy" alt="{{ recipe.title }}" onclick="location.href='{% url 'recipe_detail' recipe.slug %}';">
         {% else %}
         <div class="primary medium-height top-round middle-align center-align" style="height:220px; cursor:pointer;" onclick="location.href='{% url 'recipe_detail' recipe.slug %}';">
           <i class="extra">lunch_dining</i>
         </div>
         {% endif %}

         {% if user.is_authenticated %}
         <div class="absolute top left padding">
             <a href="{% url 'toggle_favorite' recipe.pk %}" class="button circle transparent">
                <i class="{% if recipe in user.favorites.all %}red-text{% else %}black-text{% endif %}">
                    {% if recipe in user.favorites.all %}favorite{% else %}favorite_border{% endif %}
                </i>
             </a>
         </div>
         {% endif %}
        {% if user.is_authenticated and recipe.price %}
         <div class="absolute top right padding">
          <form action="{% url 'add_to_cart' recipe.pk %}" method="post" class="ml-1">
              {% csrf_token %}
              <button type="submit" class="button circle primary" title="{% trans 'Add to Cart' %}">
                <i>add_shopping_cart</i>
              </button>
          </form>
         </div>
         {% endif %}
       </div>

       <div class="padding grow">
         <h5 class="truncate pointer" onclick="location.href='{% url 'recipe_detail' recipe.slug %}';">{{ recipe.title }}</h5>
         {% if recipe.price %}
         <div class="row align-center mb-1">
            <i class="small-text primary-text">euro_symbol</i>
            <span class="bold">{{ recipe.price }}</span>
         </div>
         {% endif %}

         <div class="row align-center">
            {% if recipe.uploaded_by %}
                <a href="{% url 'index' %}?uploader={{ recipe.uploaded_by.username|urlencode }}" class="row align-center" style="color: inherit; text-decoration: none;">
                    {% if recipe.uploaded_by.avatar %}
                    <img src="{{ recipe.uploaded_by.avatar.url }}" class="circle tiny" alt="{{ recipe.uploaded_by.username }}">
                    {% else %}
                    <i class="tiny circle surface">person</i>
                    {% endif %}
                    <span class="tiny-text left-margin">{{ recipe.uploaded_by.username }}</span>
                </a>
            {% else %}
                <i class="tiny circle surface">person_off</i>
                <span class="tiny-text left-margin">{% trans "Unknown" %}</span>
            {% endif %}
         </div>
         <div class="space"></div>
         <div class="row wrap">
             {% with favoriters=recipe.favorited_by.all %}
             {% with count=favoriters.count %}
             {% if count > 0 %}
                <span class="tiny-text">
                    {% trans "Liked by" %}
                    {% if count == 1 %}
                        {{ favoriters.0.username }}
                    {% elif count == 2 %}
                        {{ favoriters.0.username }} {% trans "and" %} {{ favoriters.1.username }}
                    {% else %}
                        {{ favoriters.0.username }}, {{ favoriters.1.username }} {% trans "and" %} {{ count|add:"-2" }} {% trans "others" %}
                    {% endif %}
                </span>
             {% endif %}
             {% endwith %}
             {% endwith %}
         </div>

         <div class="space"></div>
         <div class="row wrap">
           {% for tag in recipe.tags.all %}
           <a href="{% url 'index' %}?tag={{ tag.name|urlencode }}" class="chip small round surface margin-bottom">{{ tag.name }}</a>
           {% endfor %}
         </div>
       </div>

       <div class="padding pt-0 row no-space">
         <a href="{% url 'recipe_detail' recipe.slug %}" class="button fill round max">
           <span>{% trans 'View' %}</span>
           <i class="suffix">arrow_forward</i>
         </a>
       </div>
    </article>
  </div>
  {% empty %}
  <div class="s12 center-align">
    <div class="large-space"></div>
    <i class="extra gray-text">no_food</i>
    <h5 class="gray-text">{% trans "No sandwitches found." %}</h5>
    <p>{% trans "Be the first to create one!" %}</p>
    {% if user.is_authenticated %}
    <a href="{% url 'admin:sandwitches_recipe_add' %}" class="button primary round">{% trans "Add Recipe" %}</a>
    {% endif %}
  </div>
  {% endfor %}
</div>