{% extends "base_beer.html" %}
{% load static i18n %}

{% block title %}{% trans "Order Details" %} #{{ order.id }}{% endblock %}

{% block content %}
<div class="large-space"></div>

<div class="grid">
  <div class="s12 m10 l8 xl6 middle-align center-align" style="margin: 0 auto;">
    <article class="round elevate left-align">
      <div class="padding">
          <nav>
              <a href="{% url 'user_profile' %}" class="button transparent circle">
                  <i>arrow_back</i>
              </a>
              <h5 class="max">{% trans "Order" %} #{{ order.id }}</h5>
              <span class="chip {% if order.status == 'PENDING' %}surface-variant{% elif order.status == 'COMPLETED' %}primary{% elif order.status == 'CANCELLED' %}error{% else %}secondary{% endif %}">
                  {{ order.get_status_display }}
              </span>
          </nav>
          <div class="divider"></div>

          <div class="grid">
              <div class="s12 m6">
                  <p class="small-text">{% trans "Date Ordered" %}</p>
                  <p>{{ order.created_at|date:"d F Y, H:i" }}</p>
              </div>
              <div class="s12 m6">
                   <p class="small-text">{% trans "Last Update" %}</p>
                   <p>{{ order.updated_at|date:"d F Y, H:i" }}</p>
              </div>
          </div>

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

          <h6>{% trans "Item Details" %}</h6>
          {% for item in order.items.all %}
          <div class="row">
              <div class="max">
                  <a href="{% url 'recipe_detail' item.recipe.slug %}" class="bold primary-text">{{ item.quantity }}x {{ item.recipe.title }}</a>
                  <p class="small-text">{{ item.recipe.description|truncatewords:20 }}</p>
              </div>
              <div class="min">
                   <!-- Calculate item total: price * quantity -->
                  <span class="bold">{% widthratio item.price 1 item.quantity %} €</span>
              </div>
          </div>

          {% if item.recipe.image %}
          <div class="space"></div>
          <img src="{{ item.recipe.image.url }}" class="responsive round border" alt="{{ item.recipe.title }}" style="max-height: 200px; object-fit: cover;">
          {% endif %}
          <div class="divider"></div>
          {% endfor %}

          <div class="row">
              <div class="max text-right">
                  <span class="bold">{% trans "Total" %}</span>
              </div>
               <div class="min">
                  <span class="bold text-primary">{{ order.total_price }} €</span>
              </div>
          </div>

      </div>
    </article>
  </div>
</div>
{% endblock %}