Example-TCG-Site/templates/users/profile.html

{% extends 'base/layout.html' %}

{% block content %}
<div class="card-grid" style="grid-template-columns: 1fr 2fr; gap: 2rem; align-items: start;">
    <div style="display: flex; flex-direction: column; gap: 2rem;">
        <!-- User Info Card -->
        <div style="background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
            <h2>{{ user.username }}</h2>
            <span
                style="background: {% if user.profile.is_pro %}{{ 'linear-gradient(to right, #f59e0b, #d97706)' }}{% else %}#475569{% endif %}; 
                         color: white; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600;">
                {% if user.profile.is_pro %}PRO MEMBER{% else %}BASIC MEMBER{% endif %}
            </span>
    
            <div style="margin-top: 2rem;">
                <p><strong>Email:</strong> {{ user.email }}</p>
            </div>
    
            <div style="margin-top: 2rem; border-top: 1px solid var(--border-color); padding-top: 1rem;">
                <form method="post">
                    {% csrf_token %}
                    <p><strong>Theme Preference:</strong></p>
                    <div style="display: flex; gap: 0.5rem;">
                        {{ form.theme_preference }}
                        <button type="submit" class="btn" style="padding: 0.25rem 0.75rem;">Save</button>
                    </div>
                </form>
            </div>
    
            {% if not user.profile.is_pro %}
            <div style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border-color);">
                <h3>Upgrade to Pro</h3>
                <p>Get access to Deck Builder and exclusive analytics.</p>
                <form action="{% url 'users:upgrade_account' %}" method="post">
                    {% csrf_token %}
                    <button type="submit" class="btn" style="width: 100%;">Upgrade Now ($5/mo)</button>
                </form>
            </div>
            {% endif %}
        </div>

        <!-- Addresses Card -->
        <div style="background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                <h3 style="margin: 0;">Addresses</h3>
                <a href="{% url 'users:add_address' %}" class="btn" style="font-size: 0.75rem; padding: 0.25rem 0.5rem;">+ Add</a>
            </div>
            {% if addresses %}
                <div style="display: flex; flex-direction: column; gap: 1rem;">
                    {% for address in addresses %}
                    <div style="border: 1px solid var(--border-color); padding: 0.75rem; border-radius: 0.375rem; position: relative;">
                        <div style="display: flex; justify-content: space-between;">
                            <span style="font-weight: 600; font-size: 0.875rem;">{{ address.get_address_type_display }} {% if address.is_default %}(Default){% endif %}</span>
                            <form action="{% url 'users:delete_address' address.pk %}" method="post" onsubmit="return confirm('Are you sure?');">
                                {% csrf_token %}
                                <button type="submit" style="background: none; border: none; color: #ef4444; cursor: pointer;">&times;</button>
                            </form>
                        </div>
                        <p style="margin: 0.25rem 0; font-size: 0.875rem;">{{ address.street }}<br>{{ address.city }}, {{ address.state }} {{ address.zip_code }}</p>
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <p style="color: #94a3b8; font-size: 0.875rem;">No addresses saved.</p>
            {% endif %}
        </div>
        
        <!-- Payment Methods Card -->
        <div style="background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                <h3 style="margin: 0;">Payment Methods</h3>
                <a href="{% url 'users:add_payment_method' %}" class="btn" style="font-size: 0.75rem; padding: 0.25rem 0.5rem;">+ Add</a>
            </div>
            {% if payment_methods %}
                <div style="display: flex; flex-direction: column; gap: 1rem;">
                    {% for pm in payment_methods %}
                    <div style="border: 1px solid var(--border-color); padding: 0.75rem; border-radius: 0.375rem; position: relative;">
                         <div style="display: flex; justify-content: space-between;">
                            <span style="font-weight: 600; font-size: 0.875rem;">{{ pm.brand }} •••• {{ pm.last4 }}</span>
                            <form action="{% url 'users:delete_payment_method' pm.pk %}" method="post" onsubmit="return confirm('Are you sure?');">
                                {% csrf_token %}
                                <button type="submit" style="background: none; border: none; color: #ef4444; cursor: pointer;">&times;</button>
                            </form>
                        </div>
                        <p style="margin: 0.25rem 0; font-size: 0.875rem; color: #94a3b8;">Expires {{ pm.exp_month }}/{{ pm.exp_year }}</p>
                         {% if pm.is_default %}<span style="font-size: 0.75rem; color: var(--primary-color);">Default</span>{% endif %}
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <p style="color: #94a3b8; font-size: 0.875rem;">No payment methods saved.</p>
            {% endif %}
        </div>

    </div>

    <div>
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
            <h2 style="margin: 0;">Recent Orders</h2>
            <form method="get" style="display: flex; gap: 0.5rem;">
                <input type="date" name="date" value="{{ date_query }}" style="background: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-color); padding: 0.25rem 0.5rem; border-radius: 0.25rem;">
                <button type="submit" class="btn" style="padding: 0.25rem 0.75rem;">Filter</button>
                {% if date_query %}
                    <a href="{% url 'users:profile' %}" class="btn" style="background: var(--card-bg); border: 1px solid var(--border-color); padding: 0.25rem 0.75rem;">Clear</a>
                {% endif %}
            </form>
        </div>

        {% if orders %}
        <div style="display: grid; gap: 1rem;">
            {% for order in orders %}
            <a href="{% url 'store:order_detail' order.id %}" style="text-decoration: none; color: inherit;">
                <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; transition: transform 0.2s;"
                    onmouseover="this.style.transform='translateY(-2px)'; this.style.borderColor='var(--accent-color)'"
                    onmouseout="this.style.transform='translateY(0)'; this.style.borderColor='var(--border-color)'">
                    <div>
                        <h4 style="margin: 0;">Order #{{ order.id }}</h4>
                        <p style="margin: 0.5rem 0 0; color: #94a3b8; font-size: 0.875rem;">{{ order.created_at|date }}</p>
                    </div>
                    <div style="text-align: right;">
                        <span style="display: block; font-weight: 600; font-size: 1.125rem;">${{ order.total_price }}</span>
                        <span
                            style="display: inline-block; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; background: #334155; margin-top: 0.5rem;">
                            {{ order.get_status_display }}
                        </span>
                    </div>
                </div>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <div
            style="text-align: center; padding: 4rem; background: var(--card-bg); border-radius: 0.5rem; color: #94a3b8;">
            <p>No orders found.</p>
            <a href="{% url 'store:card_list' %}" class="btn" style="margin-top: 1rem;">Start Shopping</a>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}