{% extends "base.html" %}

{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/profile.css') }}">
{% endblock %}

{% block content %}
<div class="profile-container">
  <h2>My Profile</h2>

  <div class="profile-info">
    <p><strong>Email:</strong> {{ current_user.email }}</p>
  </div>

  <div class="orders-section">
    <h3>My Orders</h3>

    {% if orders %}
    <table class="orders-table">
      <thead>
        <tr>
          <th>Order ID</th>
          <th>Date</th>
          <th>Status</th>
          <th>Items</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for order in orders %}
        <tr>
          <td class="order-id">#{{ order.id }}</td>
          <td class="order-date">{{ order.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
          <td>
            <span class="status-badge status-{{ order.status }}">
              {{ order.status|title }}
            </span>
          </td>
          <td class="order-items">{{ order.items|length }}</td>
          <td class="order-actions">
            <a href="{{ url_for('user.order_details', order_id=order.id) }}" class="view-details-link">
              View Details
            </a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div class="no-orders">
      <p>You haven't placed any orders yet.</p>
      <a href="{{ url_for('main.products') }}" class="shop-now-link">
        Start Shopping
      </a>
    </div>
    {% endif %}
  </div>

  <a href="{{ url_for('main.home') }}" class="back-link">
    ← Back to Home
  </a>
</div>
{% endblock %}