{% 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_medium.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:"Y-m-d" }}",
  "description": "{{ recipe.description|striptags|truncatechars:200 }}",
  {% if recipe.tags.all %}
  "recipeCategory": [{% for tag in recipe.tags.all %}"{{ tag.name }}"{% if not forloop.last %},{% endif %}{% endfor %}],
  {% endif %}
  "recipeIngredient": [
    {% for ingredient in recipe.ingredients|linebreaksbr|striptags|split:"\n" %}
    "{{ ingredient|escapejs }}"{% if not forloop.last %},{% endif %}
    {% endfor %}
  ],
  "recipeInstructions": {
    "@type": "ItemList",
    "itemListElement": [
      {% for instruction in recipe.instructions|linebreaksbr|striptags|split:"\n" %}
      {
        "@type": "HowToStep",
        "text": "{{ instruction|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 class="grid">
  <!-- Left Column: Image and Main Info -->
  <div class="s12 m12 l5">
     <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 %}
                   <span class="tiny-text">
                       {% 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 %}
                   </span>
                {% endif %}
            </div>

            <div class="space"></div>
            <div class="divider"></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>
  </div>

  <!-- Right Column: Details -->
  <div class="s12 m12 l7">
      <div class="padding">

          <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="large-space"></div>

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

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

          {% include "components/instructions_section.html" %}
      </div>
  </div>
</div>
{% endblock %}

{% block extra_scripts %}

{{ block.super }}

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

{% endblock %}