<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCP - Profile</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
.card {
border: none;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.card-header {
background-color: #fff;
border-bottom: 1px solid rgba(0,0,0,.1);
padding: 15px 20px;
}
.card-title {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h5 class="card-title">Profile Settings</h5>
</div>
<div class="card-body">
{% if success %}
<div class="alert alert-success alert-dismissible fade show">
<i class="fas fa-check-circle"></i> {{ success }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endif %}
{% if error %}
<div class="alert alert-danger alert-dismissible fade show">
<i class="fas fa-exclamation-circle"></i> {{ error }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endif %}
<form method="POST" action="/profile">
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" value="{{ user.email }}" disabled>
</div>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" name="name" value="{{ user.name if user.name else '' }}" placeholder="Enter your name">
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone</label>
<input type="tel" class="form-control" id="phone" name="phone" value="{{ user.phone if user.phone else '' }}" placeholder="Enter your phone number">
</div>
<div class="mb-3">
<label for="company" class="form-label">Company</label>
<input type="text" class="form-control" id="company" name="company" value="{{ user.company if user.company else '' }}" placeholder="Enter your company name">
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="newsletter_subscribed" name="newsletter_subscribed" {% if user.newsletter_subscribed %}checked{% endif %}>
<label class="form-check-label" for="newsletter_subscribed">
Subscribe to newsletter
</label>
</div>
</div>
<div class="mb-3">
<label for="email_frequency" class="form-label">Email Frequency</label>
<select class="form-select" id="email_frequency" name="email_frequency">
<option value="daily" {% if user.email_frequency == 'daily' %}selected{% endif %}>Daily</option>
<option value="weekly" {% if user.email_frequency == 'weekly' %}selected{% endif %}>Weekly</option>
<option value="monthly" {% if user.email_frequency == 'monthly' %}selected{% endif %}>Monthly</option>
</select>
</div>
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary">Update Profile</button>
<a href="/dashboard" class="btn btn-secondary">Back to Dashboard</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>