{% extends 'base.html' %}
{% block content %}

{% if session.username %}

<!--This page needs to simply: view users current orders, cancel user's order -->

<section class="content-card p-4 p-lg-5">
  <h1 class="h3 mb-3">Order Tracking</h1>

  <div class="container py-4" id="orderContainer">

  </div>
</div>
</section>

<div id="getUserOrderSrc" data-link="{{ url_for('order.get_user_order')}}"></div>
<div id="cancelOrderSrc" data-link="{{ url_for('order.cancel_order', order_id=0)}}"></div>
<div id="username" data-name="{{ session.username }}"></div>

<div class="modal fade" id="cancelOrderConfirmModal" tabindex="-1" aria-labelledby="cancelOrderConfirmModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content content-card border-0">
      <div class="modal-header border-secondary-subtle">
        <h2 class="modal-title h5" id="cancelOrderConfirmModalLabel">Confirm Cancellation</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p id="cancelOrderConfirmText" class="mb-0"></p>
      </div>
      <div class="modal-footer border-secondary-subtle">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Keep Order</button>
        <button type="button" class="btn btn-cancel-order" id="confirmCancelOrderBtn">Confirm Cancel</button>
      </div>
    </div>
  </div>
</div>

<script src="{{ url_for('static', filename='js/order.js') }}"></script>
{% else %}
<section class="content-card p-4 text-center">
  <h1 class="h4 mb-2">Sign in required</h1>
  <p class="text-muted mb-3">Please log in to access your order information.</p>
  <a class="btn btn-primary" href="{{ url_for('main.login') }}">Go to Login</a>
</section>
{% endif %}

{% endblock %}