{% extends 'base.html' %}

{% block title %}Votre commande{% endblock %}

{% block content %}
  <p class="desktop-hidden mobile-content-title">
    {% block content_title %}Merci, {{ order.author.first_name }} !{% endblock %}
  </p>
  <div class="box">
    <p class="title">Votre commande</p>
    <div class="columns">
      <div class="column">
        <p>Votre participation à la commande groupée «{{ order.grouped_order }}» a bien été confirmée et vous avez normalement reçu un mail de confirmation.
        
        <ul>
            {% for item in order.ordered_items.all %}
            <li>{{ item.nb }} × {{ item.item }} : {{ item.get_price }} €</li>
            {% endfor %}
        </ul>
        <p><strong>Prix total : {{ order.price }} €</strong>

        {% if order.note %}
        <p><strong>Votre commentaire :</strong><br>
        {{ order.note }}</p>
        {% endif %}

        <p class="has-text-dark is-italic">Le paiement n'est pas (encore) pris en charge par la Chariotte. C'est l'organisateur·ice de la commande qui doit vous indiquer les moyens de paiement.
      </div>
      <div class="column">
        <p class="subtitle">Rendez-vous pour la distribution</p>
        <p><i class="fa fa-calendar-check-o mr-3" aria-label="Date de distribution" title="Date de distribution" aria-hidden="true"></i>
          {{ order.grouped_order.delivery_date }} : <a href="{% url 'order:grouped_order_event' order.grouped_order.code %}">Ajouter à mon agenda</a>
        </p>
        {% if order.grouped_order.delivery_slot %}
        <p><i class="fa fa-clock-o mr-3" aria-label="Créneau de distribution" title="Créneau de distribution" aria-hidden="true"></i>
          {{ order.grouped_order.delivery_slot }}
        </p>
        {% endif %}
        {% if order.grouped_order.place %}
        <p><i class="fa fa-map-pin mr-4" aria-label="Lieu de livraison" title="Lieu de livraison" aria-hidden="true"></i>{{ order.grouped_order.place }}</p>
        {% endif %}
        Une question sur cette commande groupée ?
        <div class="buttons"><a class="button is-light" href="mailto:{{ order.grouped_order.orga.username }}">Contacter l'organisateur·ice</a></p>
        </div>
      </div>
    </div>
    
    <div class="buttons">
      <a class="button is-primary" href="{% url 'order:grouped_order_detail' order.grouped_order.code %}">
        <i class="fa fa-arrow-left mr-3" aria-hidden="true"></i>Retour à la page de commande
      </a>
      {% if user == order.grouped_order.orga %}
      <a class="button is-light" href="{% url 'order:grouped_order_overview' order.grouped_order.code %}">Page de gestion de la commande</a>
      {% endif %}
    </div>
  </div>
{% endblock %}