{% extends '_types/orders/index.html' %}


{% block orders_header_child %}
  {% from '_types/root/_n/macros.html' import index_row with context %}
  {% call index_row('order-header-child', '_types/order/header/_header.html') %}
    {% block order_header_child %}
    {% endblock %}
  {% endcall %}
{% endblock %}

{% block _main_mobile_menu %}
  {% include '_types/order/_nav.html' %}
{% endblock %}



{% block filter %}
  <header class="mb-6 sm:mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4">
    <div class="space-y-1">
      <p class="text-xs sm:text-sm text-stone-600">
        Placed {% if order.created_at %}{{ order.created_at.strftime('%-d %b %Y, %H:%M') }}{% else %}—{% endif %} &middot; Status: {{ order.status or 'pending' }}
      </p>
    </div>
    <div class="flex w-full sm:w-auto justify-start sm:justify-end gap-2">
      <a
        href="{{ url_for('orders.list_orders')|host }}"
        class="inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
      >
        <i class="fa-solid fa-list mr-2" aria-hidden="true"></i>
        All orders
      </a>

      {# Re-check status button #}
      <form
        method="post"
        action="{{ url_for('orders.order.order_recheck', order_id=order.id)|host }}"
        class="inline"
      >
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button
          type="submit"
          class="inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-stone-300 bg-white hover:bg-stone-50 transition"
        >
          <i class="fa-solid fa-rotate mr-2" aria-hidden="true"></i>
          Re-check status
        </button>
      </form>

      {% if order.status != 'paid' %}
        <a
          href="{{ url_for('orders.order.order_pay', order_id=order.id)|host }}"
          class="inline-flex items-center px-3 py-2 text-xs sm:text-sm rounded-full border border-emerald-600 bg-emerald-600 text-white hover:bg-emerald-700 transition"
        >
          <i class="fa fa-credit-card mr-2" aria-hidden="true"></i>
          Open payment page
        </a>
      {% endif %}
    </div>
  </header>
{% endblock %}

{% block content %}
  {% include '_types/order/_main_panel.html' %}
{% endblock %}

{% block aside %}
{% endblock %}
