{% extends "base_beer.html" %}
{% block title %}{{ recipe.title }} — Sandwitch{% endblock %}

{% block extra_head %}
{{ block.super }}
<style>
    @media only screen and (min-width: 992px) {
        main.container {
            padding-left: 10%;
            padding-right: 10%;
        }
    }
    .portion-selector {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
    }
    .portion-selector input[type="number"] {
        width: 60px;
        text-align: center;
    }
</style>
{% load custom_filters %} {# Load your custom filters #}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Recipe",
  "name": "{{ recipe.title }}"
  {% if recipe.image %},
  "image": [
    "{{ request.scheme }}://{{ request.get_host }}{{ recipe.image_large.url }}",
    "{{ request.scheme }}://{{ request.get_host }}{{ recipe.image_medium.url }}",
    "{{ request.scheme }}://{{ request.get_host }}{{ recipe.image_small.url }}"
  ]
  {% endif %},
  "author": {
    "@type": "Person",
    "name": "{% if recipe.uploaded_by %}{{ recipe.uploaded_by.get_full_name|default:recipe.uploaded_by.username }}{% else %}Anonymous{% endif %}"
  },
  "datePublished": "{{ recipe.created_at|date:"c" }}",
  "dateModified": "{{ recipe.updated_at|date:"c" }}",
  "description": "{{ recipe.description|striptags|truncatechars:200 }}"
  {% if recipe.prep_time %},
  "prepTime": "{{ recipe.prep_time|iso8601_duration }}"
  {% endif %}
  {% if recipe.cook_time %},
  "cookTime": "{{ recipe.cook_time|iso8601_duration }}"
  {% endif %}
  {% if recipe.prep_time or recipe.cook_time %},
  "totalTime": "{{ recipe.prep_time|default:0|add:recipe.cook_time|default:0|iso8601_duration }}"
  {% endif %},
  "recipeYield": "{{ recipe.servings }}"
  {% if recipe.tags.all %},
  "recipeCategory": "{% for tag in recipe.tags.all %}{{ tag.name }}{% if not forloop.last %}, {% endif %}{% endfor %}",
  "keywords": "{% for tag in recipe.tags.all %}{{ tag.name }}{% if not forloop.last %}, {% endif %}{% endfor %}"
  {% endif %}
  {% if recipe.calories %},
  "nutrition": {
    "@type": "NutritionInformation",
    "calories": "{{ recipe.calories }} calories"
  }
  {% endif %},
  "recipeIngredient": [
    {% for line in recipe.ingredients|strip_lines %}"{{ line|escapejs }}"{% if not forloop.last %},{% endif %}{% endfor %}
  ],
  "recipeInstructions": [
    {% for line in recipe.instructions|strip_lines %}
    {
      "@type": "HowToStep",
      "text": "{{ line|escapejs }}"
    }{% if not forloop.last %},{% endif %}{% endfor %}
  ]
  {% if avg_rating > 0 %},
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "{{ avg_rating|floatformat:1 }}",
    "reviewCount": "{{ rating_count }}"
  }
  {% endif %}
}
</script>
{% endblock %}

{% block content %}

{% load i18n markdown_extras %} {# Keep existing load tags #}

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

<nav>
  <a href="{% url 'index' %}" class="button transparent circle">
      <i>arrow_back</i>
  </a>
  <h5 class="max ml-2">{% trans "Back to all" %}</h5>
</nav>

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

<div>
  <aside class="left rounded padding">
    <article class="round no-padding elevate">
        {% if recipe.image %}
        <img src="{{ recipe.image_large.url }}"
             srcset="{{ recipe.image_medium.url }} 700w, {{ recipe.image_large.url }} 1200w"
             sizes="(max-width: 768px) 95vw, 600px"
             alt="{{ recipe.title }}"
             loading="lazy"
             class="responsive top-round">
        {% else %}
        <div class="primary medium-height top-round middle-align center-align" style="height:300px;">
           <i class="extra">lunch_dining</i>
        </div>
        {% endif %}
        <div class="padding">
            {% include "components/recipe_header.html" %}

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

            <h6 class="bold">{% trans "Tags" %}</h6>
            <div class="row wrap">
              {% for tag in recipe.tags.all %}
                <a href="{% url 'index' %}?tag={{ tag.name|urlencode }}" class="chip round surface">{{ tag.name }}</a>
              {% endfor %}
            </div>

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

            <div class="row wrap">
                {% if recipe.favorited_by.all or recipe.instagram_likes_count > 0 %}
                   <span class="tiny-text">
                       {% if recipe.favorited_by.all %}
                           {% if recipe.favorited_by.count == 1 %}
                               {% trans "Liked by" %} {{ recipe.favorited_by.first.username }}
                           {% else %}
                               {% trans "Liked by" %} {{ recipe.favorited_by.first.username }} {% trans "and" %} {{ recipe.favorited_by.count|add:"-1" }} {% trans "others" %}
                           {% endif %}
                       {% endif %}

                       {% if recipe.instagram_likes_count > 0 %}
                           {% if recipe.favorited_by.all %} {% trans "and" %} {% endif %}
                           <span class="row align-center display-inline-flex">
                               <i class="small ml-1">favorite</i>
                               <span class="ml-1">{{ recipe.instagram_likes_count }} {% trans "likes from Instagram" %}</span>
                           </span>
                       {% endif %}
                   </span>
                {% endif %}
            </div>

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

            {% include "components/rating_section.html" %}

            {% if user.is_authenticated and user.is_staff %}
            <div class="space"></div>
            <a href="/admin/sandwitches/recipe/{{ recipe.pk }}/change/" class="button transparent border round width-100 center-align">
                <i>edit</i>
                <span>{% trans "Edit Recipe" %}</span>
            </a>
            {% endif %}
        </div>
     </article>
  </aside>
  <h5>{{ recipe.title }}</h5>
    <div class="large-padding">
      <div class="page active">
        <h5 class="primary-text">{% trans "Description" %}</h5>
        <div class="large-text">
          {% if recipe.description %}
              {{ recipe.description|convert_markdown|safe }}
          {% else %}
              <p class="italic">{% trans "No description yet." %}</p>
          {% endif %}
        </div>
        <div class="small-space"></div>
        {% include "components/ingredients_section.html" %}
        <div class="small-space"></div>
        {% include "components/instructions_section.html" %}
        </div>
    </div>
</div>

{% endblock %}

{% block extra_scripts %}

{{ block.super }}

{% include "components/ingredients_scripts.html" %}

{% endblock %}
