{% extends 'base.html' %}
{% block title %}My Profile{% endblock %}
{% block content %}

<div class="page-header">
  <div class="page-title">My Profile <small>Update your name or change your password</small></div>
  <a href="{{ url_for('dashboard') }}" class="btn btn-outline-secondary btn-sm">← Back</a>
</div>

<div class="row g-4" style="max-width:900px">
  <!-- Profile info -->
  <div class="col-md-6">
    <div class="card h-100">
      <div class="card-header"><span class="card-title"><i class="bi bi-person-circle me-2 text-success"></i>Account Info</span></div>
      <div class="card-body">
        {% if error %}<div class="alert alert-danger mb-3">{{ error }}</div>{% endif %}
        {% if success %}<div class="alert alert-success mb-3">{{ success }}</div>{% endif %}
        <form method="post">
          <div class="form-group mb-3">
            <label>Username</label>
            <input type="text" value="{{ g.user.username }}" disabled style="background:#f9fafb;color:#6b7280">
          </div>
          <div class="form-group mb-3">
            <label>Role</label>
            <input type="text" value="{{ ROLES.get(g.user.role, g.user.role) }}" disabled style="background:#f9fafb;color:#6b7280">
          </div>
          <div class="form-group mb-4">
            <label>Full Name *</label>
            <input type="text" name="full_name" value="{{ g.user.full_name }}" required>
          </div>

          <div style="border-top:1px solid #e2e8f0;padding-top:20px;margin-bottom:16px">
            <div style="font-weight:600;font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:.6px;margin-bottom:16px">
              <i class="bi bi-lock me-1"></i> Change Password
            </div>
          </div>
          <div class="form-group mb-3">
            <label>Current Password</label>
            <input type="password" name="current_password" placeholder="Required to change password">
          </div>
          <div class="form-group mb-4">
            <label>New Password</label>
            <input type="password" name="new_password" placeholder="Leave blank to keep current">
            <span class="form-hint">Minimum 6 characters</span>
          </div>
          <button type="submit" class="btn btn-primary">Save Changes</button>
        </form>
      </div>
    </div>
  </div>

  <!-- Session info -->
  <div class="col-md-6">
    <div class="card">
      <div class="card-header"><span class="card-title"><i class="bi bi-shield-check me-2 text-success"></i>Session Details</span></div>
      <div class="card-body">
        <div class="detail-grid" style="grid-template-columns:1fr">
          <div class="detail-item">
            <div class="detail-label">Logged in as</div>
            <div class="detail-value">{{ g.user.full_name }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">Access Level</div>
            <div class="detail-value">
              <span class="role-badge role-{{ g.user.role }}">{{ ROLES.get(g.user.role, g.user.role) }}</span>
            </div>
          </div>
          <div class="detail-item">
            <div class="detail-label">Last Login</div>
            <div class="detail-value text-sm">{{ g.user.last_login[:16] if g.user.last_login else 'First session' }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">Account Created</div>
            <div class="detail-value text-sm">{{ g.user.created_at[:10] if g.user.created_at else '–' }}</div>
          </div>
        </div>
        <div class="mt-4">
          <form method="post" action="{{ url_for('logout') }}">
            <button type="submit" class="btn btn-danger btn-sm w-100">
              <i class="bi bi-box-arrow-right me-1"></i> Sign Out
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}