75 lines
4.4 KiB
HTML
75 lines
4.4 KiB
HTML
{% extends 'base/layout.html' %}
|
|
|
|
{% block content %}
|
|
<div class="container" style="max-width: 800px; margin: 0 auto; padding: 2rem;">
|
|
<div style="margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center;">
|
|
<h1 style="margin: 0;">Order #{{ order.id }}</h1>
|
|
<a href="{% url 'users:profile' %}" class="btn" style="background-color: var(--card-bg); border: 1px solid var(--border-color); color: var(--text-color);">Back to Profile</a>
|
|
</div>
|
|
|
|
<div style="background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color); margin-bottom: 2rem;">
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem;">
|
|
<div>
|
|
<p style="color: #94a3b8; font-size: 0.875rem; margin-bottom: 0.5rem;">Date Placed</p>
|
|
<p style="font-weight: 600;">{{ order.created_at|date:"F j, Y, P" }}</p>
|
|
</div>
|
|
<div>
|
|
<p style="color: #94a3b8; font-size: 0.875rem; margin-bottom: 0.5rem;">Status</p>
|
|
<span style="display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px; background: #334155; font-size: 0.875rem; font-weight: 600;">
|
|
{{ order.get_status_display }}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<p style="color: #94a3b8; font-size: 0.875rem; margin-bottom: 0.5rem;">Total Amount</p>
|
|
<p style="font-weight: 600; font-size: 1.25rem;">${{ order.total_price }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{% if order.insurance_purchased %}
|
|
<div style="margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color);">
|
|
<p style="display: flex; align-items: center; gap: 0.5rem; color: #10b981;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
|
|
Shipping Insurance Included
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<h3 style="margin-bottom: 1.5rem;">Order Items</h3>
|
|
<div style="display: grid; gap: 1rem;">
|
|
{% for item in order.items.all %}
|
|
<div style="background: var(--card-bg); padding: 1.5rem; border-radius: 0.5rem; border: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center;">
|
|
<div style="display: flex; align-items: center; gap: 1rem;">
|
|
{% if item.listing and item.listing.card.image_url %}
|
|
<img src="{{ item.listing.card.image_url }}" alt="{{ item.listing.card.name }}" style="width: 50px; border-radius: 4px;">
|
|
{% elif item.pack_listing and item.pack_listing.image_url %}
|
|
<img src="{{ item.pack_listing.image_url }}" alt="{{ item.pack_listing.name }}" style="width: 50px; border-radius: 4px;">
|
|
{% else %}
|
|
<div style="width: 50px; height: 70px; background: #334155; border-radius: 4px;"></div>
|
|
{% endif %}
|
|
|
|
<div>
|
|
{% if item.listing %}
|
|
<h4 style="margin: 0; font-size: 1rem;">{{ item.listing.card.name }}</h4>
|
|
<p style="margin: 0.25rem 0 0; color: #94a3b8; font-size: 0.875rem;">
|
|
{{ item.listing.card.set.name }} • {{ item.listing.get_condition_display }} • {% if item.listing.is_foil %}Foil{% else %}Non-Foil{% endif %}
|
|
</p>
|
|
{% elif item.pack_listing %}
|
|
<h4 style="margin: 0; font-size: 1rem;">{{ item.pack_listing.name }}</h4>
|
|
<p style="margin: 0.25rem 0 0; color: #94a3b8; font-size: 0.875rem;">Booster Pack</p>
|
|
{% else %}
|
|
<h4 style="margin: 0; font-size: 1rem;">Unknown Item</h4>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div style="text-align: right;">
|
|
<p style="margin: 0; font-weight: 600;">${{ item.price_at_purchase }}</p>
|
|
<p style="margin: 0.25rem 0 0; color: #94a3b8; font-size: 0.875rem;">Qty: {{ item.quantity }}</p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|